jQuery实现鼠标响应式透明度渐变动画效果示例

转载  发布时间:2018年02月13日 14:12:23   作者:lexie   我要评论

这篇文章主要介绍了jQuery实现鼠标响应式透明度渐变动画效果,涉及jQuery事件响应及动态修改页面元素属性相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考,具体如下:

先来看看运行效果:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动画-透明度变化</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
  font-family:"微软雅黑"
}
#box{
  height:100px;
  width:100px;
  background-color:#0099CC;
  margin-top:200px;
  position:relative;
  /*透明度变化*/
  left:0px;
  filter:alpha(opacity:30);
  opacity:0.3;
}
span{
  display:block;
  color:blue;
  width:25px;
  height:100px;
  background-color:#FFFF99;
  position:absolute;
  left:100px;
}
</style>
</head>
<body>
  <div id="box">
    <span>移动</span>
  </div>
<script>
window.onload=function(){
  var div1=document.getElementById("box");
  div1.onmouseover=function(){
    startMove(100);
  }
  div1.onmouseout=function(){
    startMove(30);
  }
}
var timer=null;
var alpha=30;
function startMove(itarget){
  clearInterval(timer);
  var div1=document.getElementById("box");
  timer=setInterval(function(){
    var speed=0;
    if(alpha>itarget){
      speed=-10;
    }else{
      speed=10;
    }
    if(alpha==itarget){
      clearInterval(timer);
    }else{
      alpha+=speed;
      div1.style.filter="alpha(opacity:"+alpha+")";
      div1.style.opacity=alpha/100;
    }
  },100)
}
</script>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • 前端分页功能的实现以及原理(jQuery)

    前端分页功能的实现以及原理(jQuery)

    本文主要介绍了基于jQuery实现的前端分页功能,并分析了其实现原理。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jquery获取焦点和失去焦点事件代码

    jquery获取焦点和失去焦点事件代码

    鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下
    2013-04-04
  • jQuery实现对无序列表的排序功能(附demo源码下载)

    jQuery实现对无序列表的排序功能(附demo源码下载)

    这篇文章主要介绍了jQuery实现对无序列表的排序功能,涉及jQuery与javascript常见的文本操作函数与sort排序函数的相关使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery日期范围选择器附源码下载

    jQuery日期范围选择器附源码下载

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。下面通过本文给大家分享jQuery日期范围选择器的实现思路,需要的的朋友参考下吧
    2017-05-05
  • Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作

    jquery easyui框架提供了创建网页所需要的一切,可以帮助大家建立站点,接下来,通过本文给大家介绍Jquery easyui开启行编辑模式增删改操作,感兴趣的朋友一起学习
    2016-01-01
  • 基于JQuery的多标签实现代码

    基于JQuery的多标签实现代码

    最近在学习JQuery,其实也不叫学习,很久以前就学过,只是有一段时间没用,有些生疏了,于是就做几个小例子来练习练习,为了方便以后查找就将这些小示例记录下来
    2012-09-09
  • jquery实现按Enter键触发事件示例

    jquery实现按Enter键触发事件示例

    按Enter键触发事件比如提交等等,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-09-09
  • 如何使用jquery easyui创建标签组件

    如何使用jquery easyui创建标签组件

    这篇文章主要介绍了如何使用jquery easyui创建标签组件的相关资料,需要的朋友可以参考下
    2015-11-11
  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery中阻止事件冒泡方式有哪些?本文为大家准备了两种阻止事件冒泡的方式,两种方式的区别在于。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身
    2014-01-01
  • jQuery基于ajax操作json数据简单示例

    jQuery基于ajax操作json数据简单示例

    这篇文章主要介绍了jQuery基于ajax操作json数据的方法,结合简单实例形式分析了jQuery的ajax基本使用方法及json数据传输操作相关技巧,需要的朋友可以参考下
    2017-01-01

最新评论