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 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
微信小程序登录换取token的教程
May 31 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
Javascript模拟实现new原理解析
Mar 03 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
改变Apache端口等配置修改方法
2008/06/05 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python实现日志按天分割
2019/07/22 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
大学生社会实践方案
2014/05/11 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年设计师工作总结
2014/11/25 职场文书
文体活动总结
2015/02/04 职场文书
留学推荐信怎么写
2015/03/26 职场文书
小学运动会报道稿
2015/07/22 职场文书
Python类方法总结讲解
2021/07/26 Python