码迷,mamicode.com
首页 > 其他好文 > 详细

文字滚动

时间:2018-08-02 16:01:33      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:scroll   port   ble   com   html   inter   hidden   tle   执行   

<!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循环实现。

 

文字滚动

标签:scroll   port   ble   com   html   inter   hidden   tle   执行   

原文地址:https://www.cnblogs.com/wxx-17-5-13/p/9407225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!