纵向文字滚动代码,带上下图片控制的。鼠标放到上下图片上时滚动

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whlives/p/3880898.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过JavaScript实现的滚动效果，包括向上和向下滚动的功能。该方法利用了定时器来连续改变滚动条的位置，从而达到平滑滚动的效果。同时，还介绍了如何通过鼠标悬停事件触发滚动开始与停止。

<style type="text/css">
#swsh .swsh_body{height:352px;overflow:hidden;}</style></p>
<div id="swsh">
<script language="javascript">
    var UDMoveflag=true
    function scrollStart(object,offset){
    object.scrollTop+=offset 
    if (UDMoveflag) timeID=window.setTimeout("scrollStart("+object.id+","+offset+")",10)
        if (object.scrollHeight<= (object.scrollTop+object.offsetHeight)){
            down.style.color="#444444"
        }else{
            down.style.color="#C11020"
        }
        if (object.scrollTop==0){
            up.style.color="#444444"
        }else{
            up.style.color="#C11020"
        }
    }
    function scrollStop(){
        UDMoveflag=false
        window.clearTimeout(timeID)
        UDMoveflag=true 
    }
</script>
<div><img height="10" alt="" width="17" id="up" onmouseover="scrollStart(RightMove1,-1)" onmouseout="scrollStop()" src="images/1G353K27-0.jpg" /></div>
<div class="swsh_body" id="RightMove1" style="overflow: hidden">fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
fsdfsf<br />
&nbsp;</div>
<div><img height="10" alt="" width="17" id="down" onmouseover="scrollStart(RightMove1,1)" onmouseout="scrollStop()" src="images/1G353J24-1.jpg" /></div>
</div>