<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.shan_info {
width: 100px;
height: 56px;
overflow: hidden;

}

.shan_info p {
line-height: 28px;
}
</style>
</head>

<body>
<div class="shan_info">
<p id="aaa">
这是一段很长。。很长。。。很长。。。。。。的话。。。。。。 这是一段很长。。很长。。。很长。。。。。。的话。。。。。。 这是一段很长。。很长。。。很长。。。。。。的话。。。。。。
</p>
</div>
<script type="text/javascript">
window.onload = function() {

gun();
}

function gun() {
var _this = $("#aaa");
//获取‘p’的行高
var lineHeight = _this.css('line-height').replace('px', '');
//获取‘p’的总共高度
var cssHeight = _this.css('height').replace('px', '');

var scrollTimer2 = setInterval(function() {
//判断当‘i’小于总行数的时候执行滚动函数
for(var i = 0; i < Math.ceil(cssHeight / lineHeight); i++) {
//最少显示两行,最后两行不滚动
if(lineHeight * i < cssHeight - 40) {

scrollNew(_this, lineHeight, cssHeight, i);

}
}

}, 1000);
}

//通过动画改变‘p’的'marginTop'值实现滚动
function scrollNew(_this, lineHeight, cssHeight, i) {
_this.animate({
"marginTop": -(lineHeight * i) + "px"
}, 4000);

}
</script>
</body>

</html>

 

 多个'p'滚动可以通话for循环实现。

 

posted on 2018-08-02 15:06  wxx17513  阅读(87)  评论(0编辑  收藏  举报