欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery实现模拟marquee标签效果_jquery

程序员文章站 2022-05-08 12:58:13
...
Marquee

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

代码如下:

HTML



模拟marquee标签效果的简单实现

CSS

@charset "utf-8";
/* CSS Document */
body{
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
}
.wrap{
  font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
  font-size:14px;
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.marquee{
  margin: 0 auto;
  width: 960px;
  height: 300px;
  overflow: hidden;
}
.marquee ul{
  width: 10000px;
}
.marquee ul li{
  float: left;
  width: 500px;
  text-align: center;
}
.marquee ul li a{

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

JavaScript

/*
 * boxScroll 0.1
 * 兼容IE8,FF,Chrome等常见浏览器
 */
 ;(function($,window,document,undefined){
   //定义构造函数
   var BoxObj=function(ele,opt){
     this.$element=ele; //最外层对象
     this.defaults={
       'style': 0 ,//滚动样式选择,默认为普通效果
       'speed': 1 ,//默认为1s
       'direction': 'left'//默认为向左边滚动
     },
   
     this.options=$.extend({},this.defaults,opt );
     //这里可以添加一些通用方法  
   }

   //给构造函数添加方法
   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>boxWidth){
               step-=boxWidth;
               $(boxWindow).append($(boxWindow).children().eq(0));//将第一项放在最后,相当于push(0),shift()
             }else{
               $(obj).scrollLeft(step);
             }
           }else if (direction== -1) {
             step-=1;
             if(step

详细下载见https://github.com/codetker/myMarquee

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

相关标签: jQuery marquee