Of Stack

jQuery realizes dynamic upward scrolling

  • 2021-10-15 09:33:33
  • OfStack

In this paper, we share the specific code of jQuery to realize dynamic upward scrolling for your reference. The specific contents are as follows

Summary: Summarize rolling news, subtitles and pictures: two core functions:

1. "Perpetual Motion" (infinite)

2. Cycle

The implementation method of js to realize "perpetual motion" (infinite) can not be separated from the timer setInterval (), that is to say, a certain function must be executed once every once in a period of time, so as to realize endless scrolling;

Loop implementation: appendTo () or append, 3-item operators (or if else), insertBefore () or prepend () and so on.

Code: 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Dynamic scrolling up </title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
 margin:0;
 padding:0;
}
body {
 font-family:'microsoft yahei';
 background:#fff;
 overflow:hidden;
}
#demo1,#demo2 {
 width:1000px;
 height:40px;
 line-height:30px;
 margin:50px auto;
 overflow:hidden;
 background:#f60;
 color:#fff;
 padding:10px;
 box-sizing:border-box;
}
#demo2 {
 height:90px;
}
#demo2 a {
 display:block;
 text-decoration:none;
 color:#fff;
}
#demo3 {
 width:1000px;
 height:400px;
 overflow:hidden;
 background:#f60;
 color:#fff;
 margin:50px auto;
 padding:10px;
 box-sizing:border-box;
}
</style>
</head>
<body>
<!-- demo Example 1 -->
<div id="demo1">
 <div class="demo">
 <div class="con">
  Pay tribute to a happy life 111 ! 
 </div>
 <div class="con">
  Pay tribute to a happy life 222 ! 
 </div>
 <div class="con">
  Pay tribute to a happy life 333 ! 
 </div>
 <div class="con">
  Pay tribute to a happy life 111 ! 
 </div>
 </div>
</div>
<!-- demo Example 2 -->
<div id="demo2">
 <a href="#" > No. 1 1 A piece of news </a>
 <a href="#" > No. 1 2 A piece of news </a>
 <a href="#" > No. 1 3 Strip dynamics </a>
</div>
<!-- demo Example 3 -->
<div id="demo3" style="overflow:hidden;height:200px;">

 <div id="dl">

 <p> Congratulations 133****1062 User access 10 Yuan mobile phone bill </p>

 <p> Congratulations 153****0792 User access 50 Yuan student aid voucher </p>

 <p> Congratulations 153****3890 User access 330 Yuan class gift package </p>

 <p> Congratulations 189****0883 User access 330 Yuan class gift package </p>

 <p> Congratulations 133****6823 User access 1500 Yuan in cash </p>

 <p> Congratulations 153****5050 User access 330 Yuan class gift package </p>
 </div>
 </div>

<script>

 // Summary: 3 All methods can not be separated from timers setInterval() That is to say, every time 1 It has to be executed for a period of time 1 A function, so as to realize endless scrolling 
 // And the implementation of the loop: appendTo() Or append,3 Destination operator (or  if else ) ,insertBefore() Or prepend()


$(function() {
 // demo Example 1
 setInterval('autoScroll("#demo1")', 1000);

// demo Example 1 Function 
function autoScroll(obj) {   　　  　　   　　  
 $(obj).find(".demo:first").animate({    　　  　　   　　   　　  
 marginTop: "-20px"   　　  　　   　　  
 }, 500, function() {    　　  　　   　　   　　  
 $(this).css({
 marginTop: "0px"
 }).find(".con:first").appendTo(this); 　　 // Function appendTo() Put the first 1 Move to the end 1 A 
 });  　　  　　  
};

 // demo Example 2

 $('#demo2 a:first').siblings().hide();
 setInterval(function() {
 $('#demo2 a:visible').slideUp('slow', function() {
 $(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow");
 });
 }, 1000 * 2)
});

// demo Example 3
var drawLetters = document.getElementById("demo3");  　　  　　  
var dl = document.getElementById("dl");  　　  　　  
var speed = 20; // Scroll speed value, the larger the value, the slower the speed 
  　　  　　  
function Marquee() {   　　  　　   　　  
 drawLetters.scrollTop++;   　　  　　   　　  
 var newNode = document.createElement("div");   　　  　　   　　  
 newNode.innerHTML = dl.innerHTML;   　　  　　   　　  
 drawLetters.insertBefore(newNode, null);  　　  　　  
}  　　  　　  
var MyMar = setInterval(Marquee, speed); // Set the timer </script>
</body>
</html>

Let's share a previous favorite code: jQuery text scrolls up line by line:

Implementation principle: After scrolling up 1 line distance as a whole, the last 1 line of appendTo will be 


<div class="apple">
 <ul>
 <li><a href="#" target="_blank"> You are my little apple  </a></li> 
  <li><a href="#" target="_blank"> I can't love you too much </a></li> 
  <li><a href="#" target="_blank"> Red little face warms my heart  </a></li> 
  <li><a href="#" target="_blank"> Light the fire of my life   Fire, fire, fire </a></li> 
  <li><a href="#" target="_blank"> You are my little apple  </a></li> 
  <li><a href="#" target="_blank"> Just like the most beautiful clouds in the sky </a></li> 
  <li><a href="#" target="_blank"> Spring has come to the hillside full of flowers  </a></li> 
  <li><a href="#" target="_blank"> Planting hope will reap </a></li> 
 </ul> 
</div>

<script type="text/javascript"> 
 function autoScroll(obj){ 
 $(obj).find("ul").animate({marginTop : "-39px"},500,function(){ 
 $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); 
 }) 
 } 
 $(function(){ 
 setInterval('autoScroll(".apple")',2000); 
 }) 
 
</script>
Related articles: