向上滚动：
<!doctype html> <title>javascript无缝滚动</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript无缝滚动" /> <meta name="description" content="javascript无缝滚动" /> <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:2px solid #369; } #marquee li { position:absolute; } #marquee img { display:block; border:0; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 10, delta = 0,//当前滚动的位置 critical = slide.offsetHeight;//临界点 slide.innerHTML += slide.innerHTML; var rolling = function(){ delta == -critical ? delta = 0 : delta--; slide.style.top = delta + "px"; } var timer = setInterval(rolling,speed)//设置定时器 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器 } window.onload = function(){ Marquee("marquee"); } </script> <h1>javascript无缝滚动(向上滚动)</h1> <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <ul id="marquee"> <li> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" /></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" ></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" /></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" ></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" "/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" "/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg"/></a> </li> </ul>
运行代码
浙公网安备 33010602011771号