以下是 jquery文字列表向下滑动切换滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字列表向下滑动切换</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<div id="club">
<div class="modle" id="modle_left">
<h2 class="modle_title"><span>热门晒单</span></h2>
<div class="modle_con">
<ul>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho3.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
</ul>
</div>
</div>
<div class="modle modle_right" id="modle_right">
<h2 class="modle_title"><span>热门晒单</span></h2>
<div class="modle_con">
<ul>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho3.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
<li class="fn-clear">
<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
<div class="modle_text fn-right">
<p><a href="###">很不错的一款电热壶哟</a></p>
<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>
</div>
</li>
</ul>
</div>
</div>
</div><!--club end-->
</body>
</html>
JS代码(demo.js):
$(function(){
function scollDown(id,time){
var liHeight=$("#"+id+" ul li").height();
var time=time||2500;
setInterval(function(){
$("#"+id+" ul").prepend($("#"+id+" ul li:last").css("height","0px").animate({
height:liHeight+"px"}
,"slow"));
}
,time);
}
scollDown("modle_left");
scollDown("modle_right",3000);
}
);
CSS代码(style.css):
@charset "utf-8";/* club */
#club{width:888px;height:190px;margin:40px auto;border:1px solid #dddddd;border-radius:5px 5px 0px 0px;}
#club .modle{width:443px;height:190px;border-right:1px solid #dddddd;float:left;}
#club .modle_right{border-right:none;float:right;}
#club .modle .modle_title{width:443px;height:29px;line-height:29px;font-size:12px;font-weight:bold;background:#f3f3f3;}
#club .modle .modle_title span{padding-left:7px;}
#club .modle .modle_con{width:423px;margin:0 auto;height:160px;overflow:hidden;}
#club .modle .modle_con ul li{border-bottom:1px #DDD dotted;position:relative;}
#club .modle .modle_con .modle_img{width:50px;height:79px;text-align:center;}
#club .modle .modle_con .modle_img img{margin-top:14px;}
#club .modle .modle_con .modle_img i{display:block;width:15px;height:17px;background:url(../image/buy.png)no-repeat;position:absolute;top:10px;left:60px;}
#club .modle .modle_con .modle_text{width:337px;height:60px;overflow:hidden;margin-top:15px;padding-left:8px;}
#club .modle .modle_con .modle_text p a{color:#005ea7;}
#club .modle .modle_con .modle_text div a{color:#999999;}
分享到QQ
分享到微博
微信扫一扫
