Skip to content

Instantly share code, notes, and snippets.

@si1en2i0

si1en2i0/gist:2191635

Created March 25, 2012 05:59
Show Gist options
  • Save si1en2i0/2191635 to your computer and use it in GitHub Desktop.
Save si1en2i0/2191635 to your computer and use it in GitHub Desktop.
Download ZIP
简易滚动列表
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style type="text/css">
* { margin:0; padding:0; }
li { font-size:12px; height: 1.5em;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
</head>
<div id="container" style="width: 159px; height: 75px; overflow: hidden;">
<ul>
<li>行1</li>
<li>行2</li>
<li>行3</li>
<li>行4</li>
<li>行5</li>
<li>行6</li>
<li>行7</li>
</ul>
</div>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var display = 4;
var roll = 2;
var c = jQuery('#container');
var items = c.find('ul > li');
var count = items.size();
if (count == display || count < display) {
return;
}
var height_one_time = jQuery(items[0]).height() * roll;
var c_dom = c.get(0);
var duration = 1000;
var interval = 2000;
var func = function() {
if (c_dom.scrollTop + c_dom.offsetHeight >= c_dom.scrollHeight) {
c_dom.scrollTop = 0;
start();
} else {
c.animate({
scrollTop: '+=' + height_one_time + 'px'
}, duration, function() {
start();
});
}
}
var start = function() {
setTimeout(func, interval);
};
start();
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment