本章节分享一段代码实例,它实现了图片的淡入淡出效果。
在分享之后会有详细的实现说明,需要的朋友可以做一下参考。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #content-mid-top { width: 670px; height: 240px; background-color: #F5F5F5; position: absolute; } #content-mid-top li { list-style-type: none; width: 670px; height: 240px; } #content-mid-top img { filter: alpha(opacity:100); opacity: 1; } </style> <script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById('content-mid-top'); var aLi = oDiv.getElementsByTagName('li'); for (var index = 0; index < aLi.length; index++) { aLi[index].timer = null; aLi[index].alpha = 100; aLi[index].onmouseover = function () { startMove(this, 100); } aLi[index].onmouseout = function () { startMove(this, 0); } } }; function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var ispeed = (iTarget - obj.alpha) / 10; ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed); if (obj.alpha == iTarget) { clearInterval(obj.timer); } else { obj.alpha = obj.alpha + ispeed; obj.style.filter = 'alpha(opacity:' + obj.alpha + ')'; obj.style.opacity = obj.alpha / 100; } }, 30); } </script> </head> <body> <ul id="content-mid-top"> <li class="img-1"><img src="demo/js/img/small.jpg"/></li> </ul> </body> </html>
上面的代码实现了淡入淡出效果,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。
(2).var oDiv = document.getElementById('content-mid-top'),获取指定id的元素对象。
(3).var aLi = oDiv.getElementsByTagName('li'),元素对象下所有的li元素对象集合。
(4).for (var index = 0; index < aLi.length; index++) {
aLi[index].timer = null;
aLi[index].alpha = 100;
aLi[index].onmouseover = function () { startMove(this, 100); }
aLi[index].onmouseout = function () { startMove(this, 0); }
},遍历li元素集合中的每一个元素。
然后为每一个元素添加一些自定义属性。
aLi[index].timer用来存储定时器函数的标识。
aLi[index].alpha透明度的一个初始值。
aLi[index].onmouseover定义鼠标悬浮的时候,将透明度设置为不透明。
aLi[index].onmouseout定义鼠标离开的时候,透明度设置为0.
(5).function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var ispeed = (iTarget - obj.alpha) / 10;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
if (obj.alpha == iTarget) {
clearInterval(obj.timer);
}
else {
obj.alpha = obj.alpha + ispeed;
obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = obj.alpha / 100;
}
}, 30);
},实现了透明度设置的功能,并且实现浏览器兼容。
二.代码注释:
(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(2).onmouseover事件可以参阅javascript mouseover事件一章节。
(3).onmouseout事件可以参阅javascript mouseout事件一章节。
(4).clearInterval()可以参阅clearInterval()一章节。
(5).setInterval()可以参阅setInterval()一章节
(6).Math.ceil()可以参阅javascript Math.ceil()一章节。
(7).Math.floor()可以参阅javascript Math.floor()一章节。
(8).js设置透明度可以参阅javascript实现的以渐变方式设置透明度一章节。
js图片淡入淡出效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js图片淡入淡出效果代码实例就介绍到这了。
js图片淡入淡出效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98600.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。