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程序设计有所帮助。

相关文章

  • 设置jQueryUI DatePicker默认语言为中文

    设置jQueryUI DatePicker默认语言为中文

    本文主要介绍jQueryUI DatePicker设置中文的方法,需要的朋友可以参考下。
    2016-06-06
  • jQuery实现的简单歌词滚动功能示例

    jQuery实现的简单歌词滚动功能示例

    这篇文章主要介绍了jQuery实现的简单歌词滚动功能,结合实例形式分析了基于jQuery插件scroll.js实现滚动功能相关操作技巧,涉及jQuery结合时间函数动态操作页面元素相关实现方法,需要的朋友可以参考下
    2019-01-01
  • jquery ajax跨域解决方法(json方式)

    jquery ajax跨域解决方法(json方式)

    本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 聊一聊jQuery插件uploadify使用方法

    聊一聊jQuery插件uploadify使用方法

    聊一聊jQuery插件uploadify使用方法,这篇文章主要总结了uploadify使用的一些经验,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jQuery toggle 代替方法

    jQuery toggle 代替方法

    这篇文章主要介绍了jQuery toggle 代替方法 的相关资料,需要的朋友可以参考下
    2016-03-03
  • 常见的jQuery选择器汇总

    常见的jQuery选择器汇总

    本文汇总介绍了常见的jQuery选择器知识,包含基本元素选择器、分层选择器、基本条件选择器、内容条件选择器、可见性条件选择器、属性选择器、子元素选择器、表单元素选择器、表单属性选择器。十分的详尽,有需要的小伙伴参考下吧
    2014-11-11
  • 关于两个jQuery(js)特效冲突的bug的解决办法

    关于两个jQuery(js)特效冲突的bug的解决办法

    下面小编就为大家带来一篇关于两个jQuery(js)特效冲突的bug的解决办法。小编觉得挺不错的,现在就分享 给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jQuery中after的两种用法实例

    jQuery中after的两种用法实例

    after() 方法在被选元素后插入指定的内容
    2013-07-07
  • jquery offset函数应用实例

    jquery offset函数应用实例

    点击一个按钮,然后在按钮的下方显示一个div,当按钮位于角落时,div的位置设定就需要调整,不然,div将显示不完全.我打算使用offset()方法实现此功能
    2012-11-11
  • 解决ajax不能访问本地文件问题(利用js跨域原理)

    解决ajax不能访问本地文件问题(利用js跨域原理)

    本篇文章主要介绍了解决ajax不能访问本地文件问题(利用js跨域原理),具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01

最新评论