纯js实现图片匀速淡入淡出效果
更新时间:2017年08月22日 11:21:43 作者:diuleilaomo
这篇文章主要为大家详细介绍了纯js实现图片匀速淡入淡出效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
图片匀速淡入淡出效果如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } div { border: 2px solid #aaa; } img { width: 300px; height: 300px; filter: alpha(opacity:30); opacity: .3; margin: 0 auto; } </style> </head> <body> <div> <img src="img/timg.jpg" alt="" id="img"> </div> <script> var alpha=30; var img = document.getElementById("img"); img.onmouseover=function(){ startMove(100) }; img.onmouseout=function(){ startMove(30) } var timer; function startMove(tar) { var img = document.getElementById("img"); clearInterval(timer); timer = setInterval(function () { var ispeed=0; ispeed= alpha<tar?5:-5; if(alpha==tar){ clearInterval(timer) } else{ alpha+=ispeed; img.style.filter="alpha(opacity:"+alpha+")"; img.style.opacity=alpha/100; } }, 30) } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
ECharts formatter属性设置的3种方法(字符串模板,函数模板,回调函数)
formatter有两种写法,一种字符串模板,另一种是回调函数,下面这篇文章主要给大家介绍了关于ECharts formatter属性设置的3种方法,分别是字符串模板,函数模板,回调函数,需要的朋友可以参考下2023-02-02web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
这篇文章主要介绍了web3.js增加eth.getRawTransactionByHash(txhash)方法步骤,需要的朋友可以参考下2018-03-03
最新评论