zoukankan      html  css  js  c++  java
  • jquery vticker (vertical news ticker)

    jquery vticker (vertical news ticker)

    I want to share with you my jquery plugin. I have made this plugin for easy and simple vertical news automatic scrolling. It will calculate height automaticaly, so no styling needed (added an option to set height manually). Just grab it and use it – so simple. Don’t add margin/padding on ul and li tags, try to style elements inside li or around div tag. This is my first jquery plugin, so if you see something wrong please don’t hesitate and say it to me. All criticism is welcome.

    Click here to see example

    Now about the plugin and how to use it.

    Html structure looks like:

      • some content
      • some content

    Javascript code:

    $('.myclass').vTicker();

    There are also few options:

    speed – speed of scrolling animation (default 700) pause – wait time between scrolling (default 4000) showItems – how many items to show (default 2) animation – animation of sliding. To fade in/fade out use a value ‘fade’ mousePause – stop scrolling on mouse over (default true) height – set vTicker container height. Also disables all items auto height calculation. It is usable to remove space gaps between items. (default 0 – it means off) direction – which direction all items will move. Values are ‘up’ and ‘down’. (default ‘up’)

    Example of options usage:

    $('.myclass').vTicker({  speed:500,  pause:3000,  showItems:3,  animation:'fade',  mousePause:false,  height:0,  direction:'up'  });

    Using with other plugins

    I’ve got a question how to use this plugin with other jquery plugin for Twitter called Tweet! . Tweet! plugin is taking information from twitter and makes a list that can be used with vTicker, but if you try to load simply in $(document).ready({ .. }) it won’t work, because Tweet! plugin loads the list after the document is ready and vTicker won’t have any data to scroll. So you need to use .ajaxStop().

    Example

    $(function(){  $('.twitter').tweet({  ......  }).ajaxStop(function(){  $('.twitter').vTicker();  });  });

    3rd party modifications

    In this section you can check modifications done by other users.
    • https://github.com/richhollis/vticker “I’ve modified the vTicker code so that you can manually scroll the next and previous items and turn pause on if say you are hovering over the next/previous buttons.” – Rich
  • 相关阅读:
    (转)Linux端口nmap和netstat命令
    (转)Linux下增加交换分区的大小
    (转)centos7安装telnet服务
    (转)VmWare下安装CentOS7图文安装教程
    (转)Linux系统安装时分区的选择
    (转)硬盘分区备忘(主分区,扩展分区和逻辑分区)以及Linux硬盘分区工具parted 介绍
    (转).tar.gz文件和.rpm文件的区别
    (转)Linux(Centos)之安装Java JDK及注意事项
    ibatis中integer类型
    ibatis时间比较大小
  • 原文地址:https://www.cnblogs.com/happy-Chen/p/3645301.html
Copyright © 2011-2022 走看看