当前位置:首页 > 编程教程 > jQuery技术文章 > 基于jQuery实现一个marquee无缝滚动的插件

jQuery实现文字无缝滚动效果(marquee插件)

  • 发布时间:
  • 作者:码农之家
  • 点击:166

这篇文章主要知识点是关于marquee、无缝滚动、jquery、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

Tags:jQuery 无缝滚动 marquee 

基于jQuery实现一个marquee无缝滚动的插件

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee )。

代码如下:

/**
 * 类库名称:jQuery.marquee
 * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件
 * 作者主页:http://www.miaoqiyuan.cn/
 * 联系邮箱:mqycn@126.com
 * 使用说明:http://www.miaoqiyuan.cn/p/jquery-marquee
 * 最新版本:http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
  marquee : function(opt, callback){
    opt = opt || {};
    opt.speed = opt.speed || 30;
    opt.direction = opt.direction || 'left';
    opt.pixels = opt.pixels || 2;
    switch( opt.direction ){
      case "left":
      case "right":
        opt.weight = "width";
        opt.margin = "margin-left";
        opt.tpl = '<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>';
        break;
      case "top":
      case "bottom":
        opt.weight = "height";
        opt.margin = "margin-top";
        opt.tpl = '<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>';
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    switch( opt.direction ){
      case "left":
      case "top":
        opt.addon = -1;
        break;
      case "right":
      case "bottom":
        opt.addon = 1;
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    callback = typeof callback == "function" ? callback : function(){};
    //设置宽度
    $(this).each(function(){
      if( this.control ){
        clearInterval(this.control);
      } else {
        //如果第一次执行,初始化代码
        $(this)
          .data(opt.weight, opt.weight == 'width' ? $(this).find("table").width() : $(this).find("table").height())
          .width($(this).data(opt.weight) * 2)
          .html(opt.tpl.replace(/\[TABLE\]/ig, $(this).html()))
          .mouseover(function(){
            $(this).data("pause", true);
          }).mouseout(function(){
            $(this).data("pause", false);
          });
      }
      this.control = setInterval((function(){
        if( $(this).data("pause") ){
          return;
        }
        var _margin = parseInt($(this).css(opt.margin)) + opt.addon * opt.pixels;
        if( opt.addon == -1 && _margin + $(this).data(opt.weight) < 0 ){
          _margin = 0;
        }else if( opt.addon == 1, _margin > 0 ){
          console.log(_margin < 0,$(this).data(opt.weight));
          _margin = -1 * $(this).data(opt.weight);
        }
        $(this).css(opt.margin, _margin + "px");
        callback.bind(this)();
      }).bind(this), opt.speed);
    });
    return $(this);
  }
});

如果在IE9以下使用,还需要在之前增加如下代码:

/**
 * IE8插件(解决 function 不支持 bind 的问题),非原创
*/
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== "function") {
      throw new TypeError("[jQuery.marquee.ie8] Caller is not a function");
    }
    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function() {},
      fBound = function() {
        return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
      };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

一共有三个可选参数,一个回调方法。

direction,移动方向:支持 左:left 右:right 上:top 下:bottom;

pixels,每次移动的像素数

speed,两次移动之前的间隔时间数(毫秒)

调用方法如下:

$("scroll-a").marquee();
$("scroll-b").marquee({direction:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
  console.log("执行了一次");
});

以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.958851

jquery xMarquee实现文字水平无缝滚动效果

css style .xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; background:#ffffff; overflow:hidden;} .xMarquee ol{list-style-type:none; margin:0px; padding:0px; font-size:12px; width:100000%;} .xMarquee ol li{float:left;} .xMarquee ol li a{ color:#000; text-decoration:none; line-height:25px;} .xMarquee ol li a:hover{ text-decoration:underline;} /style js script src="xMarquee.js" type="text/javascript"/script script $(function(){ $("#x1").xMarquee(); $("#x2").xMarquee({temp:2,backMarquee:'backMarquee'}); }) function backMarquee(id,con){ $("#backMarquee").html(id+"::::::::::::::::::::"+con); } /script html div id="x1" class="xMarquee" ol lia href="" 中国移动/a/li lia href="" 双向录音/a/li lia href="" 360通话录音是目前较好的/a/li lia href="" 中国移动/a/li lia href="" 双向录音/a/li lia href="" 360通话录音是目前较好的/a/li /ol /div div id="x2" class="xMarquee" ol lia href="" 中国移动/a/li lia href="" 双向录音/a/li lia href=""……

网友NO.307784

JQuery实现文字无缝滚动效果示例代码(Marquee插件)

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。 使用方法如下: 1、加载javascript。 script type="text/javascript" src="js/jquery.js"/script script type="text/javascript" src="js/jquery.marquee.js"/script script type="text/javascript" $(function(){ $("#marquee").marquee({yScroll: "bottom"}); }); /script 2、加入CSS样式。 ul.marquee {display: block;line-height: 1;position: relative;overflow: hidden;width: 400px; height: 22px; } ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;} 3、HTML代码如下: ul id="marquee" lia href="http://www.bloomylife.com/?cat=153" rel="external nofollow" target="_blank" WEB前端开发/a [2011-10-20]/li lia href="http://www.bloomylife.com/?cat=154" rel="external nofollow" target="_blank" 架构设计/a [2011……

网友NO.779782

jQuery模拟Marquee实现无缝滚动效果完整实例

本文实例讲述了jQuery模拟Marquee实现无缝滚动效果。分享给大家供大家参考,具体如下: !DOCTYPE HTMLhtmlheadmeta charset="utf-8"title模拟Marquee无缝滚动/titlestyle type="text/css"/* CSS Document reset */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}:focus {/* remember to define focus styles! */ outline: 0;}body { font-family: Arial, Helvetica, sans-serif; padding: 0; font-size: 12px; margin: 0px auto auto auto; color: black; cursor:default;}ol, ul { list-style: none;}table {/* tables still need 'cellspacing="0"' in the markup */ borde……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757