连续往上滚动jquery代码

网页设计中经常用到的滚动，比如滚动评论。利用JQ很容易实现。代码如下

 

CSS代码：

1 .scrollDiv{
2     height:153px;
3     overflow:hidden;
4     width:158px;
5 }

 

HTML代码：

1 <div class="scrollDiv">
2     <div id="scrollList">
3         <p><strong>2144玩家:</strong>杨幂好美</p>
4         <p><strong>2144玩家:</strong>杨幂</p>
5         <p><strong>2144玩家:</strong>杨幂最丑</p>
6         <p><strong>2144玩家:</strong>其实她们都不漂亮</p>
7         <p><strong>2144玩家:</strong>杨幂整过容，<br>李晟好看。</p>
8     </div>
9 </div>

 

jquery代码：

 1  
 2 jQuery(document).ready(function(){
 3  new Marquee($('#scrollList')[0],{speed:60,direction:'up'});           
 4 })
 5 function Marquee(obj,config){
 6  //alert('s');
 7  this.obj = obj;
 8  this.config = {speed:80,direction:'up',e:true}; 
 9  if(typeof config == 'object'){
10   var J = $;
11   J.extend(this.config, config);
12  } 
13  this.obj2 = null;
14  this.timer = null;
15  this.init();
16 }
17 Marquee.prototype = {
18  init: function(){
19   var _this = this;
20   if(this.config.direction == 'up' || this.config.direction == 'down'){
21    if(this.obj.offsetHeight < this.obj.parentNode.offsetHeight) return;
22    this.obj2 = this.obj.cloneNode(true);
23    $(this.obj).after(this.obj2);
24   }
25   function temp(){
26    _this.marquee();
27   }  
28   var myMar = setInterval(temp,_this.config.speed);
29   if(this.config.e){
30    this.obj.parentNode.onmouseover = function(){clearInterval(myMar)};
31    this.obj.parentNode.onmouseout = function(){myMar = setInterval(temp,_this.config.speed)};
32   }
33  },
34  marquee: function(){
35   var _this = this;
36   var con = this.obj.parentNode;  
37   if(this.obj2){
38    var offset = (this.obj2.offsetTop - this.obj.offsetHeight)/2;
39   }  
40   if(this.config.direction == 'up'){
41    if(this.obj2.offsetHeight <= con.scrollTop){
42     con.scrollTop = 0;
43    }else{
44     con.scrollTop +=1;
45    }
46   }
47  }
48 }

 

 

posted on 2012-09-28 15:18  Cosimo  阅读(247)  评论(0)  编辑  收藏  举报

导航