- <script type="text/javascript">
- $(function () {
- //奇數(shù)背景設(shè)置為灰色
- //$('.box1 li:even,.box2 li:even,.box3 li:even').css({ backgroundColor: "gray" });
- $(".box1").Scroll({ direction: "y" }); //設(shè)置為縱向滾動
- $(".box2").Scroll(); //默認(rèn)橫向滾動
- $(".box3").Scroll();
- });
- </script>
- 以下面JS引入，以上JS調(diào)用
- <script>
- (function ($) {
- $.fn.Scroll = function (options) {
- //將當(dāng)前上下文對象存入root
- var root = this;
- //默認(rèn)配置
- var settings = {
- speed: 40, //滾動速度,值越大速度越慢
- direction: "x" //滾動方向("x"或者"y" [x橫向;y縱向])
- };
- //不為空，則合并參數(shù)
- if (options)
- $.extend(settings, options);
- var timer = []; //計時器
- var marquee; //滾動器(函數(shù))
- var isRoll; //判斷是否滾動(函數(shù))
- var _ul = $("> ul", root); //ul標(biāo)簽
- var _li = $("> ul > li", root); //li標(biāo)簽(集合)
- var li_num = _li.length; //li標(biāo)簽個數(shù)
- var li_first = _li.first(); //獲取單個li標(biāo)簽
- //判斷為縱向還是橫向，并進(jìn)行相應(yīng)操作
- if (settings.direction == "x") {
- var li_w = li_first.outerWidth(true); //單個li標(biāo)簽的寬度
- var ul_w = li_w * li_num; //ul標(biāo)簽的寬度
- _ul.css({ width: ul_w }); //設(shè)置ul寬度
- marquee = function () {
- _ul.animate({ marginLeft: "-=1" }, 0, function () {
- var _mleft = Math.abs(parseInt($(this).css("margin-left")));
- if (_mleft > li_w) { //滾動長度一旦大于單個li的長度
- $("> li:first", $(this)).appendTo($(this)); //就把第一個li移到最后
- $(this).css("margin-left", 0); //滾動長度歸0
- }
- });
- };
- //ul長度小于box長度時則不滾動，反之滾動
- isRoll = function (t) {
- if (ul_w <= root.width())
- clearInterval(t);
- else
- marquee();
- }
- }
- else {
- var li_h = li_first.outerHeight(true); //單個li標(biāo)簽的高度
- var ul_h = li_h * li_num; //ul標(biāo)簽的高度
- _ul.css({ height: ul_h }); //設(shè)置ul高度
- marquee = function () {
- _ul.animate({ marginTop: "-=1" }, 0, function () {
- var _mtop = Math.abs(parseInt($(this).css("margin-top"))); //取絕對值
- if (_mtop > li_h) {
- $("> li:first", $(this)).appendTo($(this));
- $(this).css("margin-top", 0);
- }
- });
- };
- //ul長度小于box長度時則不滾動，反之滾動
- isRoll = function (t) {
- if (ul_h <= root.height())
- clearInterval(t);
- else
- marquee();
- }
- }
- //遵循鏈?zhǔn)皆瓌t，并進(jìn)行初始化
- return root.each(function (i) {
- //超出內(nèi)容隱藏，防止用戶沒寫overflow樣式
- $(this).css({ overflow: "hidden" });
- timer[i] = setInterval(function () {
- isRoll(timer[i]);
- }, settings.speed);
- //鼠標(biāo)進(jìn)入停止?jié)L動，離開繼續(xù)滾動
- $(this).hover(function () {
- clearInterval(timer[i]);
- }, function () {
- timer[i] = setInterval(function () {
- isRoll(timer[i]);
- }, settings.speed);
- });
- });
- };
- })(jQuery);
- </script>
相關(guān)標(biāo)簽：
- 上一篇：頁面跳轉(zhuǎn)的兩種方式
- 下一篇：CSS3新增特性簡單介紹
鄂公網(wǎng)安備 42011102000410號