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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
自学实现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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
js中settimeout方法加参数
2014/02/28 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python 画函数曲线示例
2019/12/04 Python
三个python爬虫项目实例代码
2019/12/28 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
《尊严》教学反思
2014/02/11 职场文书
yy生日主持词
2014/03/20 职场文书
文秘应届生求职信
2014/07/05 职场文书
民间借贷被告代理词
2015/05/23 职场文书
微观世界观后感
2015/06/10 职场文书
校运会广播稿
2015/08/19 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
基于Python实现流星雨效果的绘制
2022/03/18 Python