Skip to content

Instantly share code, notes, and snippets.

@yasuoza
Created February 20, 2012 07:43
Show Gist options
  • Save yasuoza/1868298 to your computer and use it in GitHub Desktop.
Save yasuoza/1868298 to your computer and use it in GitHub Desktop.
jQuery Ticker code
<ul id="ticker">
<li class="bd">
<p id="slide">
<span>
2012/01/24&nbsp;
<a href="http://www.google.com">text00</a>
</span>
<span>
2011/11/08&nbsp;
<a href="http://www.yahoo.com">text01</a>
<span>
2011/11/08&nbsp;
<a href="http://www.bing.com">test02</a>
</span>
</li>
</ul>
#ticker {
width: 880px;
height: 30px;
padding: 0px 10px;
overflow: hidden;
overflow-x: hidden;
overflow-y:hidden;
margin:auto;
background: url('../img/bg_ticker.png') no-repeat;
}
ul#ticker span {
font-size:1.2em;
width:885px;
background:url('../img/bg_ticker_li.png') no-repeat 0 13px;
padding-top: 8px;
padding-left: 15px;
float:left;
margin-left: 10px
}
ul#ticker li a {
color: #016522;
border-bottom: #016522;
}
ul#ticker li.bd {
overflow:hidden;
position:relative;
width:880px;
height: 30px
padding:0px 10px;
}
ul#ticker p#slide{
width: 9999999px;
position: relative
};
jQuery.extend(jQuery.easing,
{
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
});
jQuery(function ($) {
var parent = $('li.bd').children('p'),
list = parent.children('span'),
list_length = list.length,
margin = 0, // If there is margin, set this parameter
duration = 2000,
interval = 8000;
setInterval(function () {
parent.animate(
{
'left': '-=' + (parent.children(':first-child').outerWidth() + margin) + 'px'
},
duration,
'easeInQuad', function () {
parent.css('left', '');
list.children('span:first').appendTo(parent);
});
}, interval);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment