网页设计中经常用到的滚动,比如滚动评论。利用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 }