善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是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*/


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 jquery同时实现向上和向左无缝滚动
<div class="dehang-scroll">   <div class...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    79.89ms