jQuery 的一个自动向上翻页的效果
jQuery效果的制作还是相对与JS来所容易简便得多，今天分享的制作的一个jQuery效果是图片 自动向上翻页的一个特效，这特效对于商城来说还是比较常见的下面是代码：
<!DOCTYPE html> <html> <head> <title>upDown1</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> * { margin:0; padding:0;} ul, li { list-style:none;} body{ text-align:center; } .play{ width:400px; height:80px; position:relative; overflow:hidden; background:#DDD; margin:10px 0; } .playimg{ width:400px; height:80px; background:red; position:absolute; } .playimg li{ height:80px; background:green; margin:5px 0; overflow:hidden; } .playimg img{ width:80px; height:80px; } </style> </head> <body> <script type="text/javascript"> function $(id){return document.getElementsByClassName(id)} function moveElement(elementID,n,final_x,final_y,interval) { if (!document.getElementsByClassName) return false; if (!document.getElementsByClassName(elementID)) return false; var elem = document.getElementsByClassName(elementID)[n]; if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); //ypos = dist + ypos; //往下切换回第一张 ypos = dist - ypos; //往上切换回第一张 } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+n+","+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } function imgChange(num,n){//切换内容 if(!$('play')) return false; var piclist=$('playimg')[n].getElementsByTagName('img'); var imgheight=piclist[0].offsetHeight; var moveY=-(imgheight*num); moveElement('playimg',n,0,moveY,5); } function classToggle(arr,n){//切换当前样式Class for(var i=0;i<arr.length;i++){ arr[i].className=''; } arr[n].className='current'; } function autoChange(btns){ if(!$(btns)) return false; if(!autokey) return false; for(var j=0;j<$(btns).length;j++){ var arr=$(btns)[j].getElementsByTagName('li'); for(var i=0;i<arr.length;i++){ if(arr[i].className=='current'){ var n=i+1; } } if(n>=arr.length) n=0; classToggle(arr,n); imgChange(n,j); } } var autokey = true; setInterval("autoChange('playimg')",3000); </script> <div class="play"> <ul class="playimg"> <li class="current"><img alt="" src="./public/img/1.jpg" />11111111</li> <li><img alt="" src="./public/img/1.jpg" />222222222</li> </ul> </div> <div class="play"> <ul class="playimg"> <li class="current"><img alt="" src="./public/img/1.jpg" />11111111</li> <li><img alt="" src="./public/img/1.jpg" />222222222</li> <li><img alt="" src="./public/img/2.jpg" />333333333</li> </ul> </div> <div class="play"> <ul class="playimg"> <li class="current"><img alt="" src="./public/img/1.jpg" />11111111</li> <li><img alt="" src="./public/img/1.jpg" />222222222</li> <li><img alt="" src="./public/img/1.jpg" />333333333</li> <li><img alt="" src="./public/img/1.jpg" />444444444</li> </ul> </div> </body> </html>
