首页 > 代码库 > 随机图片滚动
随机图片滚动
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://www.mamicode.com/float.js"></script><script type="text/javascript">window.onload = function (){ var ali = document.getElementsByTagName(‘li‘); var flag = 0; for(var i = 0; i < ali.length; i++) { fnshow(ali[i]); } function fnshow (li) { var odiv = li.getElementsByTagName(‘div‘)[0]; function fnshowone () { setTimeout(function () { flag = flag == 0?-50:0; domove(odiv,‘top‘,10,80,flag,fnshowone); },Math.round(Math.random()*2000+1000)); } fnshowone(); };};</script><style>ul{ margin:50px auto; width:220px; }li{ display:inline-block; width:100px; height:50px; overflow:hidden; position:relative; list-style-type:none; }div{ position:absolute; left:0px; top:0px; } img{ width:100px; height:50px; } </style></head><body><ul> <li> <div> <img src="http://www.mamicode.com/img/5-1.jpg"> <img src="http://www.mamicode.com/img/5-2.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-3.jpg"> <img src="http://www.mamicode.com/img/5-4.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-5.jpg"> <img src="http://www.mamicode.com/img/5-6.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-7.jpg"> <img src="http://www.mamicode.com/img/5-8.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-9.jpg"> <img src="http://www.mamicode.com/img/5-10.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-11.jpg"> <img src="http://www.mamicode.com/img/5-12.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-13.jpg"> <img src="http://www.mamicode.com/img/5-14.jpg"> </div> </li> <li> <div> <img src="http://www.mamicode.com/img/5-15.jpg"> <img src="http://www.mamicode.com/img/5-16.jpg"> </div> </li></ul></body></html>
function getstyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}function domove (obj,attr,step,frequency,target,endfn){ step = parseInt(getstyle(obj,attr))<target?step:-step; clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = parseInt(getstyle(obj,attr)) + step; if(step>0&&speed>target||step<0&&speed<target) { speed = target; } obj.style[attr] = speed + ‘px‘; if( speed == target ) { clearInterval(obj.timer); endfn&&endfn(); } },frequency); };function opacity(obj,step,target,frequency,endfn){ var currentOpacity = getstyle(obj,‘opacity‘) * 100; step = currentOpacity < target?step:-step; clearInterval(obj.opacity) obj.opacity = setInterval (function () { currentOpacity = getstyle(obj,‘opacity‘) *100; var nextOpacity = currentOpacity + step; if(step>0&& nextOpacity>target || step<0&& nextOpacity < target ) { nextOpacity = target; } obj.style.opacity = nextOpacity/100; obj.style.filter = ‘alpha(opacity:)‘ + nextOpacity +‘)‘; if(nextOpacity == target ) { clearInterval(obj.opacity); endfn&&endfn(); } },frequency); };function shake(obj,attr,endfn){ if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +‘px‘; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50);};
随机图片滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。