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入门教程(11) js事件处理
Jan 31 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php动态函数调用方法
2015/05/21 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
pyside写ui界面入门示例
2014/01/22 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
为什么说python更适合树莓派编程
2020/07/20 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
电子信息工程自荐信
2014/05/26 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
社保转移委托书范本
2014/10/08 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL