当前位置：翔宇亭IT乐园 → IT知识库 → WEB → Javascript

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

减小字体

增大字体作者：本站来源：本站原创发布时间：2013-05-11 07:32:48

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

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>

本代码演示效果

微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。

个人成长离不开各位的关注，你的关注就是我继续前行的动力。