js，jq单行文字上下滚动

最新推荐文章于 2023-07-25 17:05:03 发布

招来红月

最新推荐文章于 2023-07-25 17:05:03 发布

阅读量585

点赞数

分类专栏： javascript 文章标签：文字滚动 js文字滚动 jq文字滚动 animate滚动 js仿JQ的animate方法

本文链接：https://blog.csdn.net/divpoxiao/article/details/98596734

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

js，jq单行文字上下滚动，方法记录

页面布局什么没什么新奇只要保证只显示一行文字就好如果需要显示多行自行设置高度，这都不重要

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>demo</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
				text-decoration: none;
			}
			
			.box {
				width: 100%;
				position: relative;
				background: #ef2d68;
				padding: 20px 0;
			}
			
			.roll_box {
				position: relative;
				font-size: 30px;
				height: 40px;
				color: #fff;
				font-weight: bold;
				overflow: hidden;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="roll_box">
				<ul id="roll">
					<li>单行文字上下滚动__1</li>
					<li>单行文字上下滚动__2</li>
					<li>单行文字上下滚动__3</li>
					<li>单行文字上下滚动__4</li>
					<li>单行文字上下滚动__5</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		roll('roll', 3000)

		function roll(elem, time) {
            //js 方法
			var ul = document.getElementById(elem)
			var height = ul.getElementsByTagName('li')[0].offsetHeight;
			setInterval(function() {
				domAnimate(elem).animate({
					"margin-top": -height + 'px'
				}, 1000, function() {
					ul.style.marginTop = "0px";
					ul.appendChild(ul.getElementsByTagName('li')[0])
				})
			}, time || 5000)

           // JQ 方法  使用JQ的话需要引入JQ包
//			var ul = $("#"+elem);
//			var li = ul.find("li");
//			ul.animate({
//				"margin-top": -li.innerHeight() + 'px'
//			}, 500, function() {
//				ul.css({
//					marginTop: "0px"
//				}).find("li:first").appendTo(ul);
//			})
		}
         //该方法为仿JQ的animate() 方法
		function domAnimate(id) {
			var elem = document.getElementById(id),
				f = j = 0,
				callback, _this = {},
				tween = function(t, b, c, d) {
					return -c * (t /= d) * (t - 2) + b
				}
			_this.execution = function(key, val, t) {
				var s = (new Date()).getTime(),
					d = t || 500,
					b = parseInt(elem.style[key]) || 0,
					c = val - b;
				(function() {
					var t = (new Date()).getTime() - s;
					if(t > d) {
						t = d;
						elem.style[key] = tween(t, b, c, d) + 'px';
						++f == j && callback && callback.apply(elem);
						return _this;
					}
					elem.style[key] = tween(t, b, c, d) + 'px';
					setTimeout(arguments.callee, 10);
				})();
			}
			_this.animate = function(sty, t, fn) {
				callback = fn;
				for(var i in sty) {
					j++;
					_this.execution(i, parseInt(sty[i]), t);
				}
			}
			return _this;
		}
	</script>

</html>

招来红月

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js，jq单行文字上下滚动

js，jq单行文字上下滚动，方法记录页面布局什么没什么新奇只要保证只显示一行文字就好如果需要显示多行自行设置高度，这都不重要<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta charset="UTF-8"> <meta name="...
复制链接

扫一扫