jQuery实现模拟marquee标签效果

前端之家收集整理的这篇文章主要介绍了jQuery实现模拟marquee标签效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Marquee

模仿IE下面的marquee效果,鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部,用append和prepend模拟数组的push()和shift()。

代码如下:

HTML

模拟marquee<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>的简单实现

CSS

}
.marquee ul li a:hover{
color: red;
}

JavaScript

//给构造函数添加方法
BoxObj.prototype={

 commonScroll:function(){
   //接收对象属性
   var obj=this.$element;
   var boxWindow=$(this.$element).children('ul');
   var speed=this.defaults.speed;
   var style=this.defaults.style;
   var direction=(this.defaults.direction=='left')? 1 : -1;
   var lists=$(boxWindow).children('li');
   var len=$(lists).length;
   var boxWidth=$(lists[0]).width();
   var timer;
   var step=(this.defaults.direction=='left')? 0 : boxWidth;

   function move(style,speed,direction){
     if (style==0) {
       if (direction==1) {
         step+=1;
         if(step><a href="/tag/Box/" target="_blank" class="keywords">Box</a>Width){
           step-=<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Width;
           $(<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Window).append($(<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Window).children().eq(0));//将第一项放在最后,相当于push(0),shift()
         }else{
           $(obj).scrollLeft(step);
         }
       }else if (direction== -1) {
         step-=1;
         if(step<0){
           step+=<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Width;
           $(<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Window).prepend($(<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Window).children().eq(len-1));//将最后一项放在最前,相当于pop(last),unshift()
         }else{
           $(obj).scrollLeft(step);
         }
       }else{//不执行之外的数值

       }
     }else{//留待扩展,多了改switch

     }
   }

   timer=setInterval(function(){
     move(style,direction);
   },10*speed); //由于时间取得小,肉眼就看不出来

  $(lists).each(function() {//鼠标移上暂停
    $(this).hover(function() {
      clearInterval(timer);
    },function() {
      clearInterval(timer);
      timer=setInterval(function(){
         move(style,direction);
       },10*speed);
    });
  });
 }

}

$.fn.marquee=function(options){
//创建实体
var BoxObj=new BoxObj(this,options);
//用尾调的形式调用对象方法
return BoxObj.commonScroll();
}
})(jQuery,document);

详细下载见

以上所述就是本文的全部内容了,希望大家能够喜欢。

猜你在找的jQuery相关文章