编写一个简单的文字滚动效果

最新推荐文章于 2022-10-02 10:07:07 发布

Q905828

最新推荐文章于 2022-10-02 10:07:07 发布

阅读量152

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/Q905828/article/details/118443106

版权

本文介绍了如何使用JavaScript库scroll.js创建一个分页滚动的效果，通过设置速度和行高，实现在鼠标悬停时暂停并继续滚动。HTML示例中展示了如何在多个`.myscroll`元素中应用该插件。

摘要由CSDN通过智能技术生成

1.分装一个scroll.js

// JavaScript Document
(function($){
	$.fn.myScroll = function(options){
	//默认配置
	var defaults = {
		speed:40,  //滚动速度,值越大速度越慢
		rowHeight:24 //每行的高度
	};
	
	var opts = $.extend({}, defaults, options),intId = [];
	
	function marquee(obj, step){
	
		obj.find("ul").animate({
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}
		
		this.each(function(i){
			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this, sh);
				}
			}, speed);

			_this.hover(function(){
				clearInterval(intId[i]);
			},function(){
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this, sh);
					}
				}, speed);
			});
		
		});

	}

})(jQuery);

2.在HTML中写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .myscroll {
        width: 300px;
        height: 260px;
        margin: 0 auto;
        border: 1px solid #ccc;
        line-height: 26px;
        font-size: 12px;
        overflow: hidden;
    }
    
    .myscroll li {
        height: 26px;
        margin-left: 25px;
    }
    
    .myscroll a {
        color: #333;
        text-decoration: none;
    }
    
    .myscroll a:hover {
        color: #ED5565;
        text-decoration: underline;
    }
</style>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/scroll.js"></script>
<script type="text/javascript">
    $(function() {
        $(' .myscroll').myScroll({
            speed: 40, //数值越大，速度越慢
            rowHeight: 100 //li的高度
        });
    });
</script>

<body>
    <div class="myscroll">
        <ul>
            <li> <a href="#">
               模范党支部部
            </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部<li> <a href="#">
                模范党支部部
             </a></li>
            </a>
            </li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>

        </ul>
    </div>
    <div class="myscroll">
        <ul>
            <li> <a href="#">
               模范党支部部
            </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部<li> <a href="#">
                模范党支部部
             </a></li>
            </a>
            </li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>

        </ul>
    </div>
    <div class="myscroll">
        <ul>
            <li> <a href="#">
               模范党支部部
            </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部<li> <a href="#">
                模范党支部部
             </a></li>
            </a>
            </li>
            <li> <a href="#">
                模范党支部部
             </a></li>
            <li> <a href="#">
                模范党支部部
             </a></li>

        </ul>
    </div>
</body>

</html>