jQuery:案例6 无缝滚动

一个人想着一个人 提交于 2019-12-02 22:36:51

动画:在窗口逐条(三条)显示信息,通过无缝滚动方式切换信息,当鼠标选中消息时停止滚动,鼠标移开时继续滚动。

实现方法:

通过animate()动画将信息流的向上移动一条信息的行高,并将第一条信息移至信息流的结尾,然后重置margin-top来实现信息流滚动,详见下方代码。

jQuery方法:animate(), first(), appentTo(), css()

动画效果:

 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <script src="D:\jQuery/jquery-3.3.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 50px auto;
            width: 600px;
            height: 90px;
            border: 1px solid black;
            overflow: hidden;
        }
 
        ul li{
            padding: 5px;
            width: 100%;
            height: 20px;
        }
	
       a {
	    text-decoration: none;
            color: black;
	}
	.selected a{
	    background: grey;
	    color: white;
	}
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">习近平时间:全民健身 总书记很关心</a></li>
        <li><a href="#">划重点 一文掌握习近平外交思想的理论要义</a></li>
        <li><a href="#">新华社评论员:踏平坎坷成大道</a></li>
        <li><a href="#">解码上半年市场环境 2018中国经济半年报的6个细节</a></li>
        <li><a href="#">中美贸易摩擦背后的60%定律</a></li>
    </ul>
</div>
<script>
    $(document).ready(function () {
        var height=$("ul li").first().innerHeight();
        //滚动函数    
        function roll(){
            $("ul").animate({marginTop:-height},1000,function () {
                $("ul li").first().appendTo($("ul"));//将第一条信息(已经移到显示区外)的信息转移到所有信息的结尾
                $("ul").css("marginTop",0);//
            });
        }
        var ani=setInterval(roll,1000);
  	//添加鼠标进入事件,如果鼠标选中某条信息,则停止滚动并修改该信息的样式
    $("ul li").mouseenter(function(){
		clearInterval(ani);
		$(this).addClass("selected");
	
	});
        $("ul li").mouseleave(function(){
		ani=setInterval(roll,1000);
                $(this).removeClass("selected");
	
	});
    })
</script>
</body>
</html>
 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!