zoukankan      html  css  js  c++  java
  • 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*/
  • 相关阅读:
    整理:深度学习 vs 机器学习 vs 模式识别
    机器学习部分国内牛人
    图像去模糊
    删除流氓软件McAfee
    ceshi
    linux系统加快大文件的写入速度
    修改cmd的字体为Consolas字体
    gdb的可视化工具安装
    微服务编译、启动jar命令指定配置文件
    pycharm中安装可以贴图片的Markdown插件
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/14276626.html
Copyright © 2011-2022 走看看