亲宝软件园·资讯

展开

jQuery实现动态向上滚动

front_end_fan 人气:0
这篇文章主要为大家详细介绍了jQuery实现动态向上滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

总结:概括滚动的新闻、字幕、图片:两个最核心功能 :

1、”永动“(infinite)

2、循环

js实现”永动“(infinite) 的实现方法离不开定时器setInterval(),也就是说每过一段时间都要执行一次某个函数,从而实现无休止滚动;

而循环的实现:appendTo()或者append,三目运算符(或者 if else),insertBefore()或者prepend()等等好多种方法。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动态向上滚动</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示例一 -->
<div id="demo1">
 <div class="demo">
  <div class="con">
   向幸福生活致敬111!
  </div>
  <div class="con">
   向幸福生活致敬222!
  </div>
  <div class="con">
   向幸福生活致敬333!
  </div>
  <div class="con">
   向幸福生活致敬111!
  </div>
 </div>
</div>
<!-- demo示例二 -->
<div id="demo2">
 <a href="#" >第一条新闻</a>
 <a href="#" >第二条新闻</a>
 <a href="#" >第三条动态</a>
</div>
<!-- demo示例三 -->
<div id="demo3" style="overflow:hidden;height:200px;">

 <div id="dl">

  <p>恭喜133****1062用户获得10元手机话费</p>

  <p>恭喜153****0792用户获得50元助学代金券</p>

  <p>恭喜153****3890用户获得330元上课大礼包</p>

  <p>恭喜189****0883用户获得330元上课大礼包</p>

  <p>恭喜133****6823用户获得1500元现金</p>

  <p>恭喜153****5050用户获得330元上课大礼包</p>
  </div>
 </div>

<script>

 //总结:3种方法都离不开定时器setInterval(),也就是说每过一段时间都要执行一次某个函数,从而实现无休止滚动
 //而循环的实现:appendTo()或者append,三目运算符(或者 if else),insertBefore()或者prepend()


$(function() {
 // demo示例一
 setInterval('autoScroll("#demo1")', 1000);

// demo示例一函数
function autoScroll(obj) {      
 $(obj).find(".demo:first").animate({        
  marginTop: "-20px"      
 }, 500, function() {        
  $(this).css({
   marginTop: "0px"
  }).find(".con:first").appendTo(this);  //函数appendTo()把第一个挪到最后一个    
 });    
};

 // demo示例二

 $('#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示例三
var drawLetters = document.getElementById("demo3");    
var dl = document.getElementById("dl");    
var speed = 20; //滚动速度值,值越大速度越慢
    
function Marquee() {      
 drawLetters.scrollTop++;      
 var newNode = document.createElement("div");      
 newNode.innerHTML = dl.innerHTML;      
 drawLetters.insertBefore(newNode, null);    
}    
var MyMar = setInterval(Marquee, speed); //设置定时器</script>
</body>
</html>

加载全部内容

相关教程
猜你喜欢
用户评论