js鼠标经过文字滚动，移开还原

最新推荐文章于 2025-05-22 14:31:14 发布

weixin_30703911

最新推荐文章于 2025-05-22 14:31:14 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/squirrel-king/p/5085697.html

本文介绍了一种使用JavaScript实现的鼠标悬停自动滚动效果。当鼠标放置在指定区域时，该区域内的文本会自动向上滚动；当鼠标移开时，滚动立即停止并返回初始位置。文章提供了具体的代码实现。

不说别的，直接贴代码。

<div class="kj-scroll" id="countrylist0" onmouseover="wPAa = setInterval('countryscrollUp(0)', 40)" onmouseout="clearInterval(wPAa)">
这里是文字内容
</div>
<div class="kj-scroll" id="countrylist1" onmouseover="wPAa = setInterval('countryscrollUp(1)', 40)" onmouseout="clearInterval(wPAa)">
这里是文字内容
</div>

　　40——滚动速度，越大越慢。

<script type="text/javascript">
    var wPAa;
    function countryscrollUp(obj) {
        document.getElementById("countrylist"+obj).scrollTop++;
    }
    $(".kj-scroll").bind("mouseout", function (dom) {
        dom.currentTarget.scrollTop = 0;
    })
</script>

这个js放在上面div的后面。搞定，鼠标放上面，文字滚动，离开立马还原。

转载于:https://www.cnblogs.com/squirrel-king/p/5085697.html