<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript" src="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; 220px; } li{ display:inline-block; 100px; height:50px; overflow:hidden; position:relative; list-style-type:none; } div{ position:absolute; left:0px; top:0px; } img{ 100px; height:50px; } </style> </head> <body> <ul> <li> <div> <img src="img/5-1.jpg"> <img src="img/5-2.jpg"> </div> </li> <li> <div> <img src="img/5-3.jpg"> <img src="img/5-4.jpg"> </div> </li> <li> <div> <img src="img/5-5.jpg"> <img src="img/5-6.jpg"> </div> </li> <li> <div> <img src="img/5-7.jpg"> <img src="img/5-8.jpg"> </div> </li> <li> <div> <img src="img/5-9.jpg"> <img src="img/5-10.jpg"> </div> </li> <li> <div> <img src="img/5-11.jpg"> <img src="img/5-12.jpg"> </div> </li> <li> <div> <img src="img/5-13.jpg"> <img src="img/5-14.jpg"> </div> </li> <li> <div> <img src="img/5-15.jpg"> <img src="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); };