文字滚动
Posted wxx-17-5-13
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字滚动相关的知识，希望对你有一定的参考价值。
<!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循环实现。
以上是关于文字滚动的主要内容，如果未能解决你的问题，请参考以下文章