js消息滚动鼠标移入停止滚动，鼠标移开继续滚动

最新推荐文章于 2025-02-11 09:04:10 发布

1113467806

最新推荐文章于 2025-02-11 09:04:10 发布

阅读量2.3k

点赞数 1

分类专栏： js jquery 文章标签： js

本文链接：https://blog.csdn.net/weixin_44578496/article/details/108190204

版权

js jquery 专栏收录该内容

15 篇文章

订阅专栏

一.原理

实现的中心思想，如图所示：
图片移动，用的是appendTo()这个方法。这个方法是先将标签从父标签中删除，然后拼接到某个标签后面，所以也就是替我们实现了，remove()这个方法。所以用这个方法是极好的~
然后就会用到定时器了。用定时器每次调用移动方法，让
- 每次执行一个动画，改变它的margin-top值，执行完动画后，再将它的margin-top变为初始值；
触摸
- 标签清除定时器，离开后，继续执行。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滚动信息</title>
 <style>
  *{
   margin: 0;
   padding:0;
  }
  .scroll-box{
   width: 400px;
   height: 200px;
   border: 2px solid #000;
   margin: 20px auto;
   overflow: hidden;
 
  }
  .scroll-box ul{
   list-style: none;
   width: 100%;
   height: 100%;
  }
  .scroll-box ul li{
   width: 100%;
   height: 40px;
   box-sizing: border-box;
   line-height: 40px;
   text-align: center;
  }
 </style>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script>
  $(function () {
   //获得当前<ul>
   var $uList = $(".scroll-box ul");
   var timer = null;
   //触摸清空定时器
   $uList.hover(function () {
    clearInterval(timer);
   },function () {//离开启动定时器
    timer = setInterval(function () {
     scrollList($uList);
    },1000);
   }).trigger("mouseleave"); //自动触发触摸事件
   //滚动动画
   function scrollList(obj) {
    //获得当前<li>的高度
    var scrollHeight = $("ul li:first").height();
    //滚动出一个<li>的高度
    $uList.stop().animate({marginTop:-scrollHeight},600,function () {
     //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
     $uList.css({marginTop:0}).find("li:first").appendTo($uList);
    });
   }
  });
 </script>
</head>
<body>
<div class="scroll-box">
 <ul>
  <li>1好消息！好消息！本店所有商品全部白送1</li>
  <li>2好消息！好消息！本店所有商品全部白送2</li>
  <li>3好消息！好消息！本店所有商品全部白送3</li>
  <li>4好消息！好消息！本店所有商品全部白送4</li>
  <li>5好消息！好消息！本店所有商品全部白送5</li>
  <li>6好消息！好消息！本店所有商品全部白送6</li>
  <li>7好消息！好消息！本店所有商品全部白送7</li>
  <li>8好消息！好消息！本店所有商品全部白送8</li>
 </ul>
</div>
</body>
</html>

2021.6.15 补充另一种方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #box{
    	width:260px;
    	height:100px;
    	margin:0 auto;
    	border:2px solid red;
    	overflow: hidden}
    ul{
    	padding:0;
    	margin:0;
    	list-style: none;
    	overflow: hidden}
    ul li{
    	height:24px;
    	line-height: 24px;
    	padding-left:10px;}


  </style>
</head>
<body>
<div id="box">
  <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">
     <li>第一段话 </li>
     <li>第二段话 </li>
     <li>第三段话 </li>
     <li>第四段话 </li>
     <li>第五段话 </li>
     <li>第六段话 </li>
  </ul>
  <ul id="con2">
  	
  </ul>
</div>
</body>
<script type="text/javascript">
  var box=document.getElementById("box");
  var con1=document.getElementById("con1");
  var con2=document.getElementById("con2");
  var s=document.getElementsByTagName("a");
  var speed=50;
  
  //con1的内容可以进行自定义
  //con2的内容与con1的内容一致
  con2.innerHTML=con1.innerHTML;
  
  function ScrollUp(){
    if( box.scrollTop>=con1.scrollHeight){
      box.scrollTop=0;
    }else
      box.scrollTop++;
  }
  
  var i=setInterval("ScrollUp()",speed);
  
  function Stop(){
    clearInterval(i);
  }
  function Up(){
    i=setInterval("ScrollUp()",speed);
  }
  
</script>
</html>