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*/
欢迎访问每天进步网:https://meitianjinbu.cn/