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


Posted in jQuery onFebruary 13, 2018

本文实例讲述了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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
You might like
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python统计cpu利用率的方法
2015/06/02 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python实现的分层随机抽样案例
2020/02/25 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
联强国际笔试题面试题
2013/07/10 面试题
厨师岗位职责
2013/11/12 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
好的旅游活动方案
2014/08/19 职场文书
金砖之国观后感
2015/06/11 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers