zoukankan      html  css  js  c++  java
  • liMarquee无缝滚动

    介绍:

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大。它可以应用于任何 Web 元素,包括文字、图像、表格、表单等元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。

    参数:

    direction 字符串 left 滚动方向,可选 left / right / up / down
    loop 整数 -1 循环次数,-1 为无限循环
    scrolldelay 整数 0 每次重复之前的延迟
    scrollamount 整数 50 滚动速度,越大越快
    circular 布尔值 true 无缝滚动,如果为 false,则和 marquee 效果一样
    drag 布尔值 true 鼠标可拖动
    runshort 布尔值 true 内容不足是否滚动
    hoverstop 布尔值 true 鼠标悬停暂停
    xml 布尔值 false 加载 xml 文件
    inverthover 布尔值 false 反向,即默认不滚动,鼠标悬停滚动

    参考源码:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>liMarquee无缝滚动插件</title>
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script src="js/jquery.liMarquee.js"></script>
      <link href="css/jquery.liMarquee.css" rel="stylesheet" />
      <style>
        .cont {
           600px;
          margin: 30px auto;
          overflow: hidden;
        }
    
        ul,
        li {
          margin: 0;
          padding: 0;
        }
    
        ul {
           100%;
        }
    
        li {
          list-style-type: none;
          margin: 0 20px;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          /* 注意 display: inline-block; */
          display: inline-block; 
        }
      </style>
    </head>
    
    <body>
      <div class="cont">
        <ul>
          <li>测试数据1</li>
          <li>测试数据2</li>
          <li>测试数据3</li>
          <li>测试数据4</li>
          <li>测试数据5</li>
          <li>测试数据6</li>
          <li>测试数据7</li>
          <li>测试数据8</li>
          <li>测试数据9</li>
          <li>测试数据10</li>
        </ul>
      </div>
    </body>
    <script>
      $(function () {
        $('.cont').liMarquee({
          scrollamount: 160, //数值越大,滚动速度越大
        });
      });
    </script>
    
    </html>
    View Code
  • 相关阅读:
    [译]HTML&CSS Lesson5: 定位
    Emscripten教程之入门指导
    html简单响应式滚动条置顶
    移动web开发问题和优化小结
    React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
    ECMAScript中有两种属性:数据属性和访问器属性。
    css写作建议和性能优化小结
    validator API文档
    HBase概念学习(九)HTablePool为何弃用?
    leetcode -day 15 Distinct Subsequences
  • 原文地址:https://www.cnblogs.com/songxia/p/11226870.html
Copyright © 2011-2022 走看看