<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../zk1/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#tbheadline li{
list-style: none;
height: 40px;
position: relative;
top: 10px;
left: 10px;
line-height: 20px;
}
#tbheadline li span{
width: 40px;
display: block;
border: 1px solid red;
border-radius: 10px;
font-size: 13px;
float: left;
text-align: center;
color: tomato;
}
#tbheadline li p{
margin-left: 20px;
float: left;
}
</style>
</head>
<body>
<ul id="tbheadline">
<li><span>最新</span> <p>巧克力热销top榜</p></li>
<li><span>双11</span> <p>双11晚会我们等着你</p></li>
<li><span>热卖</span> <p>2016车载充电器热卖场</p></li>
<li><span>双11</span> <p>TFboys变天使飞起来了!</p></li>
<li><span>雷军</span> <p>雷军问答送MAX F码!</p></li>
</ul>
</body>
<script type="text/javascript">
function textScroll(){
$(function(){
$('#tbheadline li').eq(1).fadeOut(100,function(){
// alert($(this).clone().html());
//克隆:不用克隆的话,remove()就没了。
$(this).clone().appendTo($(this).parent()).fadeIn(100).siblings().hide();
$(this).remove();
});
});
}
setInterval('textScroll()',2000);
</script>
</html>
实现文字滚动效果
最新推荐文章于 2022-08-23 13:56:27 发布