• 滚动新闻插件vticker


    vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB。vTicker 支持自定义滚动时间、间隔时间、显示个数、滚动方向(向上/向下)、容器高度等等,但它对 HTML 结构有点小“苛刻”——容器里面只能是 ul 标签。不过如果你仅仅是需要一个垂直滚动效果的话,vTicker 仍然是一个很好的选择,毕竟它是如此的小巧方便。

    使用方法

    1、引入文件

    1 <script src="js/jquery.min.js"></script>
    2 <script src="js/jquery.vticker.js"></script>

    2、HTML

    01 <div class="w3ci">
    02     <ul>
    03         <li>1、新闻标题</li>
    04         <li>2、新闻标题</li>
    05         <li>3、新闻标题</li>
    06         <li>4、新闻标题</li>
    07         <li>5、新闻标题</li>
    08         <li>6、新闻标题</li>
    09         <li>7、新闻标题</li>
    10         <li>8、新闻标题</li>
    11     </ul>
    12 </div>

    4、JavaScript

    1

    $('.w3ci').vTicker();

    使用方法

    1、引入文件

    1 <script src="js/jquery.min.js"></script>
    2 <script src="js/jquery.vticker.js"></script>

    2、HTML

    01 <div class="w3ci">
    02     <ul>
    03         <li>1、新闻标题</li>
    04         <li>2、新闻标题</li>
    05         <li>3、新闻标题</li>
    06         <li>4、新闻标题</li>
    07         <li>5、新闻标题</li>
    08         <li>6、新闻标题</li>
    09         <li>7、新闻标题</li>
    10         <li>8、新闻标题</li>
    11     </ul>
    12 </div>
     1 $(function()&nbsp;{
     2     $('#scroller').vTicker({
     3     speed:&nbsp;500,        //滚动速度,单位毫秒。
     4     pause:&nbsp;3000,       //暂停时间,就是滚动一条之后停留的时间,单位毫秒。
     5     showItems:&nbsp;10,     //显示内容的条数。
     6     animation:&nbsp;'fade', //动画效果,默认是fade,淡出。
     7     mousePause:&nbsp;true,  //鼠标移动到内容上是否暂停滚动,默认为true。
     8     height:&nbsp;235,       //滚动内容的高度。
     9     direction:&nbsp;'up'        //滚动的方向,默认为up向上,down则为向下滚动。
    10     });
    11 });
    View Code
  • 相关阅读:
    7深入FDOFDO概念
    IP 地址输入控件
    如何在设计时公开复合控件内的子控件
    Hello! CnBlogs... ...
    十句话,我竟然看了好久
    Linux下剪切命令
    Linux下拷贝命令
    Linux下新建文件夹命令
    Linux下*.tar.gz文件解压缩命令
    项目管理四条转载
  • 原文地址:https://www.cnblogs.com/liuyanxia/p/4841015.html
Copyright © 2020-2023  润新知