jquery同时实现向上和向左无缝滚动

 <div class="dehang-scroll">
  <div class="wrap">
    <div class="tit">有问必答</div>
    <ul>
      <li><a>169机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>269机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>369机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>469机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>569机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>669机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>769机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
      <li><a>869机什么价位?能处理硬度为6点多度的花岗岩吗?</a></li>
    </ul>
    <div class="more"><a>查看更多>></a></div>
  </div>
</div>



<div class="scroll-box">
         <ul>
          <li><a>寇先生留言:69机什么价位?能处理硬度为6点多度的花岗岩吗?<span>2021-01-08 17:29:19</span></a></li>
          <li><a>1寇先生留言:69机什么价位?能处理硬度为6点多度的花岗岩吗?<span>2021-01-08 17:29:19</span></a></li>
          <li><a>2寇先生留言:69机什么价位?能处理硬度为6点多度的花岗岩吗?<span>2021-01-08 17:29:19</span></a></li>
          <li><a>3寇先生留言:69机什么价位?能处理硬度为6点多度的花岗岩吗?<span>2021-01-08 17:29:19</span></a></li>
         </ul>
</div>

 

/*无缝滚动 start*/
(function ($) {
$.fn.scroll = function (options) {
//默认配置
var defaults = {
speed: 30,  //滚动速度为0-100之间
direction: 'vertical'  //方向:vertical向上滚动,horizantal向左滚动
};

var opts = $.extend({}, defaults, options), intId = [];

function marquee(obj, step, direction) {
if (direction == 'horizantal') {
obj.find("ul").animate({
marginLeft: '-=1'
}, 0, function () {
var s = Math.abs(parseInt($(this).css("margin-left")));
if (s >= step) {
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-left", 0);
}
});
} else if (direction == 'vertical') {
obj.find("ul").animate({
marginTop: '-=1'
}, 0, function () {
var s = Math.abs(parseInt($(this).css("margin-top")));
if (s >= step) {
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
}

this.each(function (i) {
var speed = 0 < 100 - opts["speed"] && 100 - opts["speed"] <= 100 ? 100 - opts["speed"] : 30;
var direction = opts["direction"] == 'vertical' || opts["direction"] == 'horizantal' ? opts["direction"] : 'vertical';
var _this = $(this);
intId[i] = setInterval(function () {
var sh;
if (direction == 'horizantal') {
sh = _this.find("ul").find("li:first").outerWidth(true);
} else {
sh = _this.find("ul").find("li:first").outerHeight(true);
}
marquee(_this, sh, direction);
}, speed);

_this.hover(function () {
clearInterval(intId[i]);
}, function () {
intId[i] = setInterval(function () {
var sh;
if (direction == 'horizantal') {
sh = _this.find("ul").find("li:first").outerWidth(true);
} else {
sh = _this.find("ul").find("li:first").outerHeight(true);
}
marquee(_this, sh, direction);
}, speed);
});

});

}
})(jQuery);
$(function () {
$('.dehang-scroll').scroll({
speed: 80, //数值越大,速度越快
direction: 'horizantal'
});
});

$(function () {
$('.scroll-box').scroll({
speed: 60, //数值越大,速度越快
direction: 'vertical'
});
});

/*无缝滚动 end*/

 

posted @ 2021-01-14 13:02  绿林豪士  阅读(240)  评论(0编辑  收藏  举报