Vertical news ticker using vTicker Jquery

Here we are going to see about News Ticker, News ticker you can see this kind news ticker in more web sites, especially in news web site and forum web sites and more, here i'm going to use vertical news ticker using vTicker.js. let see the coding. it is very simple one.

DOWNLOAD LIVE DEMO

this is very interesting news ticker, it is very simple and flexible one. we can use in E-commerce site too, for latest and recent activities and flash news etc.

CODE

<div class="container" id="news">
  <ul>
    <li class="news-head">
      <a href="http://www.2my4edge.com/2013/10/image-zoom-on-hover-using-css3.html" >
Image zoom on hover using css3</a>
    </li>
    <li class="news-head">
      <a href="http://www.2my4edge.com/2013/08/how-to-view-more-web-pages-in-single.html" >
How to view more web pages in one web page</a>
    </li>
    <li class="news-head">
      <a href="http://www.2my4edge.com/2013/06/browser-full-screen-api-using-query.html" >
Full screen API using JQuery</a>
    </li>
  </ul>
</div>

id="news" is only applied to the news ticker. we have to call that id in Script.

SCRIPTS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
    $('#news').vTicker({ 
        speed: 500,
        pause: 3000,
        animation: 'fade', 
        mousePause: false,
        showItems: 1
    });
});
</script>

the above highlighted scripts are important, we can make any changes in the above script as our need.

CSS

<style type="text/css" media="all">
* {
    padding:0px;
    margin:0px;
}
.container {
    margin:0 auto;
    margin-top:150px;
    width:950px;
    background-color:#59ACFF;
    box-shadow:0px 0px 20px #999;
}
.news-head {
    font-size:26px;
    font-family:Tahoma, Geneva, sans-serif;
    height:35px;
    padding:10px;
}
.news-head > a {
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    }
</style>