当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

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

减小字体 增大字体 作者:佚名  来源:翔宇亭IT乐园  发布时间:2019-1-3 0:36:17

:2013-05-11 07:32:48

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

其基本思想是使用对象的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控制图片层上下移动