使用JavaScript控制图片层上下移动

2023-04-13 12:29:58

字体：大中小

来源：转载

供稿：网友

经常看到一些网站中有控制着多幅图片上下移动滚动的效果，本站也整理了一个，供大家参考。

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="images/logo1.gif" alt="图片1" /><br />
    <img src="images/logo2.gif" alt="图片2" /><br />
    <img src="images/logo3.gif" alt="图片3" /><br />
    <img src="images/logo4.gif" alt="图片4" /><br />
    <img src="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>