- ·上一篇文章:Javascript中Math.round方法的使用
- ·下一篇文章:使用JavaScript获取中英文字符串的长度
使用JavaScript控制图片层上下移动
经常看到一些网站中有控制着多幅图片上下移动滚动的效果,本站也整理了一个,供大家参考。
其基本思想是使用对象的scrollTop方法,详细代码如下,将下面代码放在<body>和</body>之间即可
<a href="javascript: void(0);" onmouseover="ScrollDivUp_T=setInterval(ScrollDivUp,10);" onmouseout="clearInterval(ScrollDivUp_T)">向上滚动</a>
<div id="items" style="margin:5px 0px 5px 0px;width:675px;height:170px;border:1px solid #dddddd;overflow:hidden">
<img src=http://www.biye5u.com/article/netsite/Javascript/2013/"images/logo1.gif" alt="图片1" /><br />
<img src=http://www.biye5u.com/article/netsite/Javascript/2013/"images/logo2.gif" alt="图片2" /><br />
<img src=http://www.biye5u.com/article/netsite/Javascript/2013/"images/logo3.gif" alt="图片3" /><br />
<img src=http://www.biye5u.com/article/netsite/Javascript/2013/"images/logo4.gif" alt="图片4" /><br />
<img src=http://www.biye5u.com/article/netsite/Javascript/2013/"images/logo5.gif" alt="图片5" />
</div>
<a href="javascript: void(0);" onmouseover="ScrollDivDown_T=setInterval(ScrollDivDown,10);" onmouseout="clearInterval(ScrollDivDown_T)">向下移动</a>
<script language="javascript">
function ScrollDivUp(){document.getElementById('items').scrollTop -= 1;}
function ScrollDivDown(){document.getElementById('items').scrollTop += 1;}
</script>
使用JavaScript控制图片层上下移动