js：超炫的滚动效果

最新推荐文章于 2024-11-08 17:24:22 发布

weixin_30399871

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量68

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/caism/archive/2011/08/17/2142768.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/public.js" type="text/javascript"></script>
<style>
* {
margin:0px;
padding:0px;
}
ul li {
list-style-type:none;
}
body {
font-size:12px;
font-family: "宋体", Arial;
}
div {
margin:0 auto;
}
.dv{
width:500px;
height:504px;
border:1px solid blue;
overflow:hidden;
}
.dv ul{
height:100px;
border-bottom:1px dashed red;
overflow:hidden;
}
.dv ul li{
padding-left:50px;
line-height:25px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="dota1" class="dv">
<ul cur_li= li_s=>
 <li>第一条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第二条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第三条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第四条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
</ul>
<ul cur_li= li_s=>
 <li>第五条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第六条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第七条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第八条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
</ul>
<ul cur_li= li_s=>
 <li>第九条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十一条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十二条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
</ul>
<ul cur_li= li_s=>
 <li>第十三条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十四条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十五条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十六条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
</ul>
<ul cur_li= li_s=>
 <li>第十七条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十八条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第十九条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
 <li>第二十条 今天是2001-10-1，美好的一天 国庆快乐 johnson</li>
</ul>
</div>
<script>
function ScrollBottom(dvId){
 var dota1=$("#"+dvId),
 ta_tc1=dota1.find("ul");
 if(dota1.size()==0){return false;}
 var scroll=function(uls){
 //复制一次内部的li
 var li_h=uls.eq(0).find("li").outerHeight();
 var topVal=(uls.eq(0).find("li").size()*2-1)*li_h;
 this.copy=function(){
 uls.each(function(){
 var lis=$(this).find("li");
 $(this).append(lis.clone());
 $(this).attr("li_s",lis.size()*2);
 $(this).attr("cur_li",lis.size()*2-1);
 });
 }
 this.copy();
 //移动到最下边的li
 this.toLast=function(){
 uls.each(function(){
 $(this).scrollTop(topVal);
 });
 }
 this.toLast();