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 uploadify 多余的Get请求(404错误)的解决方法

    Jquery uploadify 多余的Get请求(404错误)的解决方法

    下面小编就为大家带来一篇Jquery uploadify 多余的Get请求(404错误)的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • jquery动画2.元素坐标动画效果(创建一个图片走廊)

    jquery动画2.元素坐标动画效果(创建一个图片走廊)

    今天文章的内容是关于使用jquery的animate方法,修改html元素的position属性,创建一个图片走廊
    2012-08-08
  • jQuery解决iframe高度自适应代码

    jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试。
    2009-12-12
  • jquery使用ColorBox弹出图片组浏览层实例演示

    jquery使用ColorBox弹出图片组浏览层实例演示

    本示例使用Jquery的ColorBox插件弹出图片组浏览层,点击会弹出页中窗的效果同时带有关闭及上一个下一个的切换,个人感觉相当不错的弹出窗,感兴趣的你可不要错过了哈
    2013-03-03
  • JQuery 确定css方框模型(盒模型Box Model)

    JQuery 确定css方框模型(盒模型Box Model)

    做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决于页面上的DOCTYPE的声明。
    2010-01-01
  • 网页中返回顶部代码(多种方法)另附注释说明

    网页中返回顶部代码(多种方法)另附注释说明

    下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部
    2013-04-04
  • jQuery 1.5.1 发布,全面支持IE9 修复大量bug

    jQuery 1.5.1 发布,全面支持IE9 修复大量bug

    jQuery 1.5.1发布了!这是自jQuery1.5发布以来第一个小版本更新,并且解决了很多BUG。
    2011-02-02
  • jQuery 2.0.3 源码分析之core(一)整体架构

    jQuery 2.0.3 源码分析之core(一)整体架构

    这篇文章主要介绍了jQuery 2.0.3 源码分析之core(一)整体架构,需要的朋友可以参考下
    2014-05-05
  • jQuery代码优化 选择符篇

    jQuery代码优化 选择符篇

    毫无疑问,jQuery的独到之处就是它以集合为中心的操作。为了取得DOM对象集合,jQuery利用JavaScript不仅实现了(它诞生时)很多浏览器不支持的CSS选择符,还实现了不少独到的自定义选择符,为在文档中查找元素提供了极大的便利
    2011-11-11
  • jquery Firefox3.5中操作select的问题

    jquery Firefox3.5中操作select的问题

    不过最近安装了FF3.5正式版,发现这种方法在它下面得不到值,就去看jquery的帮助文档,在文档中对select选中的引用是用如下方法
    2009-07-07

最新评论