当前位置：网站首页>js，jq单行文字上下滚动

js，jq单行文字上下滚动

2022-04-22 05:57:00 【招来红月】

 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>

 

版权声明
本文为[招来红月]所创，转载请带上原文链接，感谢
https://blog.csdn.net/divpoxiao/article/details/98596734

边栏推荐

猜你喜欢

随机推荐