当前位置：网站首页>Message scrolling JS implementation

Message scrolling JS implementation

2022-06-13 04:23:00 【Twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, 】

If it is the selected element , perform $(content).appendTo(selector) Is to move to selector Back , At this time $(content) The previous position will be moved to selector Back , Will change the original position
If it is a new element such as $("<li>1</li>").appendto(selector) Is added to selector Back , Will not change the original position 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Scrolling information </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 () {
   // Get the current <ul>
   var $uList = $(".scroll-box ul");
   var timer = null;
   // Touch the clear timer 
   $uList.hover(function () {
    clearInterval(timer);
   },function () {// Leave the start timer 
    timer = setInterval(function () {
     scrollList($uList);
    },1000);
   }).trigger("mouseleave"); // Automatically trigger touch events 
   // Scroll animation 
   function scrollList(obj) {
    // Get the current <li> Height 
    var scrollHeight = $("ul li:first").height();
    // Roll out a <li> Height 
    $uList.stop().animate({marginTop:-scrollHeight},600,function () {
     // After the animation , Will the current <ul>marginTop Set to initial value 0 state , And the first <li> Splice to the end .
     $uList.css({marginTop:0}).find("li:first").appendTo($uList);
    });
   }
  });
 </script>
</head>
<body>
<div class="scroll-box">
 <ul>
  <li>1 The good news ！ The good news ！ All our products are free 1</li>
  <li>2 The good news ！ The good news ！ All our products are free 2</li>
  <li>3 The good news ！ The good news ！ All our products are free 3</li>
  <li>4 The good news ！ The good news ！ All our products are free 4</li>
  <li>5 The good news ！ The good news ！ All our products are free 5</li>
  <li>6 The good news ！ The good news ！ All our products are free 6</li>
  <li>7 The good news ！ The good news ！ All our products are free 7</li>
  <li>8 The good news ！ The good news ！ All our products are free 8</li>
 </ul>
</div>
</body>
</html>

原网站

版权声明
本文为[Twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202280523391939.html

边栏推荐

猜你喜欢

随机推荐