jQuery实现模拟marquee标签效果


Posted in Javascript onJuly 14, 2015

Marquee

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

      代码如下:

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>模拟marquee标签效果的简单实现</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.marquee.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="marquee">
      <ul>
        <li>
          <a href="" title="">1
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">2
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">3
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">4
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">5
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">6
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">7
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">8
            <img src="images/test.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
<script type="text/javascript">
  $(document).ready(function(){
    $(".marquee").marquee();
  });
</script>
</body>
</html>

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<0){
               step+=boxWidth;
               $(boxWindow).prepend($(boxWindow).children().eq(len-1));//将最后一项放在最前,相当于pop(last),unshift()
             }else{
               $(obj).scrollLeft(step);
             }
           }else{//不执行之外的数值

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

         }
       }

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

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

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

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

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

Javascript 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
js+canvas实现验证码功能
Sep 21 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 #Javascript
jQuery自动添加表单项的方法
Jul 13 #Javascript
JavaScript去除数组里重复值的方法
Jul 13 #Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 #Javascript
jQuery检测返回值的数据类型
Jul 13 #Javascript
jQuery常用且重要方法汇总
Jul 13 #Javascript
C#中使用迭代器处理等待任务
Jul 13 #Javascript
You might like
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python 字符串格式化代码
2013/03/17 Python
python 计算文件的md5值实例
2017/01/13 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
新东网科技Java笔试题
2012/07/13 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
单位实习证明怎么写
2014/01/17 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
政工例会汇报材料
2014/08/26 职场文书
代办出身证明书
2014/10/21 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
教学督导岗位职责
2015/04/10 职场文书
南极大冒险观后感
2015/06/05 职场文书
运动会致辞稿
2015/07/29 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书