您的位置：首页 > Web前端 > JQuery

jquery新闻滚动案例

2018-02-24 11:38 218 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
#view{
width:300px;
height:50px;
border:1px solid red;
margin:200px auto;
overflow: hidden

}
#view li{
width: 300px;
height:50px;
line-height: 50px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="view">
<ul id="list">
<li>学生遭绑架后遇害学生遭绑架后遇害女子遭家暴流产</li>
<li>女子遭家暴流产女子遭家暴流产</li>
<li>男子冒充校花骗财女子遭家暴流产女子遭家暴流产</li>
<li>宁波一工地爆炸将孩子甩床上</li>
<li>男子获刑472年章子怡现身母校</li>
</ul>
</div>
</body>
<script>
var time
function Loop(){
time=setInterval(function(){
$("#list").animate({marginTop:-50},1000,function(){
$("#list li:last").after($("#list li:first"));
$("#list").css("marginTop",0)
})
},2000)
}
Loop();
$("#view").hover(function(){
clearInterval(time);
},function(){
Loop();
})
</script>
</html>

文字溢出隐藏，一行显示，多余部分变为省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
用jquery书写，代码非常精简

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航