JS实现淡入淡出图片效果的方法分析


Posted in Javascript onDecember 20, 2016

本文实例讲述了JS实现淡入淡出图片效果的方法。分享给大家供大家参考,具体如下:

效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明

分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少

核心代码:

window.onload=function(){
  var oDiv=document.getElementById("div1");
  var timer=null;
  var alpha=30;
  oDiv.onmouseover=function(){
    setAlpha(100);
  };
  oDiv.onmouseout=function(){
    setAlpha(30);
  };
  function setAlpha(iTarget){ //iTarget目标透明度通过参数传入
    clearInterval(timer); //执行计时器之前,先清除计时器,否则执行完一次再执行,上次的计时器还在,会不停抖动
    timer=setInterval(function(){
      var iSpeed;
      if(alpha<iTarget)
      {
        iSpeed=10;
      }
      else
      {
        iSpeed=-10;
      }

 if(alpha==iTarget)


 {


   clearInterval(timer);


 }


 else


 {


 
alpha+=iSpeed;


 
oDiv.style.opacity=alpha/100;



 oDiv.style.filter='alpha(opacity:'+alpha+')'


 }
    },30);
  };
};

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

Javascript 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
vuex 的简单使用
Mar 22 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
自学实现angularjs依赖注入
Dec 20 #Javascript
JS多物体实现缓冲运动效果示例
Dec 20 #Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 #Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 #Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 #Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 #Javascript
js多个物体运动功能实例分析
Dec 20 #Javascript
You might like
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
使用PHP开发留言板功能
2019/11/19 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
详解jQuery中的事件
2016/12/14 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
浅析Python函数式编程
2018/10/06 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
浅析Python 条件控制语句
2020/07/15 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
学校献爱心活动总结
2014/07/08 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
公司聚餐通知
2015/04/22 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
创业计划书之酒店
2019/08/30 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Python数据分析之pandas读取数据
2021/06/02 Python