• Tags ,         
  • 2018-08-23  15:11:48        
  • 37 °C    

    Jquery多功能滚动显示的参数描述如下:

    /***
     @description 基于 jQuery 多功能无缝滚动显示插件
     @params auto: true                     # 是否自动滚动
             interval: 3000                 # 间隔时间(毫秒)
             direction: 'forward'           # 向前 -  forward / 向后 - backward
             speed: 500                     # 移动速度(毫秒)
             showNum: 1                     # 显示个数
             stepLen: 1                     # 每次滚动步长
             type: 'horizontal'             # 水平滚动 - horizontal / 垂直滚动 - vertical
             prevElement: null              # 上一组按钮元素
             prevBefore: function() {}      # 上一组移动前回调
             prevAfter: function() {}       # 上一组移动后回调
             nextElement: null              # 下一组按钮元素
             nextBefore: function() {}      # 下一组移动前回调
             nextAfter: function() {}       # 下一组移动后回调
             pauseElement: null             # 暂停按钮元素
             pauseBefore: function() {}     # 暂停前回调
             pauseAfter: function() {}      # 暂停后回调
             resumeElement: null            # 继续按钮元素
             resumeBefore: function() {}    # 继续前回调
             resumeAfter: function() {}     # 继续后回调
    ***/
    

    核心的JS代码如下:

     
    $(function() {
    $('.mod').each(function() {
    var _this = $(this),
    code = $.trim($('.demo', _this).html()).replace(/textarea>/, 'textarea>');
    $('.code', _this).prepend($('<textarea>' + code + '</textarea>'));
    });
    $('.mod_ft').each(function() {
    $('<div class="to_top"><a href="#mod_header" title="返回顶部">返回顶部</a></div>').appendTo($(this));
    });
    $('a[href*=#]').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({
    scrollTop : targetOffset
    }, 1000);
    return false;
    }
    }
    });
    })
    !function(a) {
    var b;
    b = function() {
    function b(b, c) {
    this.elements = {
    wrap: b,
    ul: b.children(),
    li: b.children().children()
    },
    this.settings = a.extend({},
    a.fn.marquee.defaults, c),
    this.cache = {
    allowMarquee: !0
    }
    }
    return b.prototype.init = function() {
    this.setStyle(),
    this.move(),
    this.bind()
    },
    b.prototype.setStyle = function() {
    var a, b, c, d, e, f, g, h;
    switch (d = this.elements.li.outerWidth(!0), c = this.elements.li.outerHeight(!0), b = Math.max(parseInt(this.elements.li.css("margin-top"), 10), parseInt(this.elements.li.css("margin-bottom"), 10)), this.settings.type) {
    case "horizontal":
    h = this.settings.showNum * d,
    g = c,
    f = 9999,
    e = "auto",
    a = "left",
    this.cache.stepW = this.settings.stepLen * d,
    this.cache.prevAnimateObj = {
    left: -this.cache.stepW
    },
    this.cache.nextAnimateObj = {
    left: 0
    },
    this.cache.leftOrTop = "left";
    break;
    case "vertical":
    h = d,
    g = this.settings.showNum * c - b,
    f = "auto",
    e = 9999,
    a = "none",
    this.cache.stepW = this.settings.stepLen * c - b,
    this.cache.prevAnimateObj = {
    top: -this.cache.stepW
    },
    this.cache.nextAnimateObj = {
    top: 0
    },
    this.cache.leftOrTop = "top"
    }
    this.elements.wrap.css({
    position: "relative",
    width: h,
    height: g,
    overflow: "hidden"
    }),
    this.elements.ul.css({
    position: "relative",
    width: f,
    height: e
    }),
    this.elements.li.css({
    "float": a
    })
    },
    b.prototype.bind = function() {
    var a, b, c, d, e, f;
    f = this,
    null != (a = this.settings.prevElement) && a.click(function(a) {
    a.preventDefault(),
    f.prev()
    }),
    null != (b = this.settings.nextElement) && b.click(function(a) {
    a.preventDefault(),
    f.next()
    }),
    null != (c = this.settings.pauseElement) && c.click(function(a) {
    a.preventDefault(),
    f.pause()
    }),
    null != (d = this.settings.resumeElement) && d.click(function(a) {
    a.preventDefault(),
    f.resume()
    }),
    null != (e = this.elements.wrap) && e.hover(function() {
    f.pause()
    },
    function() {
    f.resume()
    })
    },
    b.prototype.move = function() {
    var a, b, c;
    if (c = this, this.settings.auto) {
    switch (this.settings.direction) {
    case "forward":
    b = c.prev;
    break;
    case "backward":
    b = c.next
    }
    a = c.settings.interval,
    setTimeout(function() {
    b.call(c),
    setTimeout(arguments.callee, a)
    },
    a),
    this.cache.moveBefore = this.cache.moveAfter = function() {
    return null
    }
    } else this.cache.moveBefore = function() {
    return c.cache.allowMarquee = !1
    },
    this.cache.moveAfter = function() {
    return c.cache.allowMarquee = !0
    }
    },
    b.prototype.prev = function() {
    var a, b, c;
    c = this,
    this.cache.allowMarquee && (this.cache.moveBefore.call(this), this.settings.prevBefore.call(this), b = this.elements.ul, a = b.children().slice(0, this.settings.stepLen), a.clone().appendTo(b), b.animate(this.cache.prevAnimateObj, this.settings.speed,
    function() {
    b.css(c.cache.leftOrTop, 0),
    a.remove(),
    c.cache.moveAfter.call(c),
    c.settings.prevAfter.call(c)
    }))
    },
    b.prototype.next = function() {
    var a, b, c;
    c = this,
    this.cache.allowMarquee && (this.cache.moveBefore.call(this), this.settings.nextBefore.call(this), b = this.elements.ul, a = b.children().slice( - this.settings.stepLen), a.clone().prependTo(b), b.css(c.cache.leftOrTop, -this.cache.stepW).animate(this.cache.nextAnimateObj, this.settings.speed,
    function() {
    a.remove(),
    c.cache.moveAfter.call(c),
    c.settings.nextAfter.call(c)
    }))
    },
    b.prototype.pause = function() {
    this.settings.pauseBefore.call(this),
    this.cache.allowMarquee = !1,
    this.settings.pauseAfter.call(this)
    },
    b.prototype.resume = function() {
    this.settings.resumeBefore.call(this),
    this.cache.allowMarquee = !0,
    this.settings.resumeAfter.call(this)
    },
    b
    } (),
    a.fn.marquee = function(c) {
    this.each(function() {
    var d;
    d = new b(a(this), c),
    d.init()
    })
    },
    a.fn.marquee.defaults = {
    auto: !0,
    interval: 3e3,
    direction: "forward",
    speed: 500,
    showNum: 1,
    stepLen: 1,
    type: "horizontal",
    prevElement: null,
    prevBefore: function() {},
    prevAfter: function() {},
    nextElement: null,
    nextBefore: function() {},
    nextAfter: function() {},
    pauseElement: null,
    pauseBefore: function() {},
    pauseAfter: function() {},
    resumeElement: null,
    resumeBefore: function() {},
    resumeAfter: function() {}
    }
    } (jQuery);
    

    CSS文件如下:

    * {margin:0;padding:0;}
    body{font:12px/1.4 SimSun,Arial,Helvetica,sans-serif;color:#333;}
    strong{font-weight:700;}
    :focus{outline:0;}
    #mod_header,#mod_main,#mod_footer{width:1000px;margin:0 auto 20px;}
    #mod_footer{margin:0 auto;padding-bottom:20px;font-family:Arial;}
    #mod_header h1{font:700 22px/2 'Microsoft YaHei';text-align:center;}
    #desc pre{font:13px/15px 'Lucida Console',Arial;color:#7F9F7F;}
    .mod{border-bottom:5px dashed #f00;margin-bottom:10px;padding-bottom:10px;}
    .mod_hd{}
    .mod_hd h2{margin-bottom:10px;padding:0 20px;font:700 16px/2 'Microsoft YaHei',SimSun;color:#fff;background:#104778;text-shadow:1px 1px 1px #8DB2E3;}
    .mod_bd{}
    .mod_ft strong{display:block;margin-bottom:5px;}
    .mod_ft ul{margin-bottom:10px;}
    .mod_ft li{list-style:disc inside none;line-height:20px;}
    .demo,.code{margin-bottom:10px;}
    .code textarea{margin:0;border:0 none;padding:0;width:100%;height:150px;font:12px/1.4 'Lucida Console',Arial;background:#ddd;resize:none;}
    .to_top{text-align:right;}
    .to_top a{text-decoration:none;}
    #mod_footer{text-align:center;}
    .wrap,.box{margin-bottom:10px;}
    .wrap ul,.wrap .ul{overflow:hidden;clear:both;*zoom:1;}
    .wrap li,.wrap .li{list-style:none;width:120px;height:80px;padding:5px;background:#ccc;margin:2px 5px 10px 5px;font:700 30px/80px Arial;text-align:center;}
    

    jQuery 多功能无缝滚动显示插件:不带任何参数(默认参数)

    <div id="module_a" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:不带任何参数(默认参数)</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap1" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <script type="text/javascript">
    $(function() {
    $('#wrap1').marquee();
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:DOM 结构不用 ul,li

    <div id="module_b" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:DOM 结构不用 ul&gt;li</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap2" class="wrap">
    <div class="ul">
    <div class="li">1</div>
    <div class="li">2</div>
    <div class="li">3</div>
    <div class="li">4</div>
    <div class="li">5</div>
    <div class="li">6</div>
    <div class="li">7</div>
    <div class="li">8</div>
    <div class="li">9</div>
    </div>
    </div>
    <script type="text/javascript">
    $(function() {
    $('#wrap2').marquee();
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:自动滚动

    <div id="module_c" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:自动滚动</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap3" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <script type="text/javascript">
    $(function() {
    $('#wrap3').marquee({
    auto: true,
    interval: 3000,
    speed: 500,
    showNum: 5,
    stepLen: 5
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:手动滚动

    <div id="module_d" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:手动滚动</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap4" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <input type="button" value="上一组" id="prev4" />
    <input type="button" value="下一组" id="next4" />
    <script type="text/javascript">
    $(function() {
    $('#wrap4').marquee({
    auto: false,
    speed: 1000,
    showNum: 4,
    stepLen: 4,
    prevElement: $('#prev4'),
    nextElement: $('#next4')
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:暂停/继续滚动

    <div id="module_e" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:暂停/继续滚动</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap5" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <input type="button" value="暂停" id="pause5" />
    <input type="button" value="继续" id="resume5" />
    <script type="text/javascript">
    $(function() {
    $('#wrap5').marquee({
    auto: true,
    interval: 1000,
    showNum: 4,
    stepLen: 4,
    pauseElement: $('#pause5'),
    resumeElement: $('#resume5')
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:向右滚动

    <div id="module_f" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:向右滚动</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap6" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <script type="text/javascript">
    $(function() {
    $('#wrap6').marquee({
    auto: true,
    interval: 2000,
    speed: 800,
    showNum: 6,
    stepLen: 6,
    direction: 'backward'
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:垂直滚动

    <div id="module_g" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:垂直滚动</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap7" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <script type="text/javascript">
    $(function() {
    $('#wrap7').marquee({
    auto: true,
    interval: 2000,
    showNum: 3,
    stepLen: 3,
    type: 'vertical'
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:显示个数 !== 每次步长

    <div id="module_h" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:显示个数 !== 每次步长</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap8" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <input type="button" value="上一组" id="prev8" />
    <input type="button" value="下一组" id="next8" />
    <script type="text/javascript">
    $(function() {
    $('#wrap8').marquee({
    auto: false,
    prevElement: $('#prev8'),
    nextElement: $('#next8'),
    showNum: 4,
    stepLen: 3,
    type: 'vertical'
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

    jQuery 多功能无缝滚动显示插件:支持回调

    <div id="module_i" class="mod">
    <div class="mod_hd">
    <h2>jQuery 多功能无缝滚动显示插件:支持回调</h2>
    </div>
    <div class="mod_bd">
    <div class="demo">
    <div id="wrap9" class="wrap">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <input type="button" value="上一组" id="prev9" />
    <input type="button" value="下一组" id="next9" />
    <script type="text/javascript">
    $(function() {
    $('#wrap9').marquee({
    auto: false,
    speed: 500,
    showNum: 3,
    stepLen: 3,
    prevElement: $('#prev9'),
    nextElement: $('#next9'),
    prevBefore: function() {
    alert('prev before callback~')
    },
    prevAfter: function() {
    alert('prev after callback~')
    },
    nextBefore: function() {
    alert('next before callback~')
    },
    nextAfter: function() {
    alert('next after callback~')
    }
    });
    })
    </script>
    </div>
    <div class="code"></div>
    </div>
    <div class="mod_ft"></div>
    </div>
    

     
    转载请保留页面地址:https://www.breakyizhan.com/jquery/5427.html