向上公告走马灯代码,Js代码库,德仔网

代码语言
代码分类
【Js】向上公告走马灯
作者:筱雨 / 发布于2018/3/20/ 645
向上公告走马灯
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
		<title>有停顿的走马灯效果</title>
		<style type="text/css">
			.cls_container {
				border: 1px solid #eee;
				width: 668px;
				font-size: 12px;
				height: 24px;
				overflow: hidden;
			}
			
			.cls_container ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				margin-left: 32px;
			}
			
			.cls_container ul li {
				height: 26px;
				line-height: 26px;
				width: 320px;
				float: left;
				display: inline;
			}
		</style>
	</head>

	<body>
		<div id="myscroll" class="cls_container">
			<ul>
				<li>
					<a href="/soft/1206.shtml" target="_blank">MSMAX 个人博客 v4.0最新版</a>
				</li>
				<li>
					<a href="/soft/1658.shtml" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a>
				</li>
				<li>
					<a href="/soft/1202.shtml" target="_blank">SKYUC 天空网络电影系统 v2.6.3 PHP版</a>
				</li>
				<li>
					<a href="/soft/3061.shtml" target="_blank">基于AJAX的WEB流程图制作工具</a>
				</li>
				<li>
					<a href="/soft/1498.shtml" target="_blank">《Eclipse从入门到精通》陈刚教程巨著 (PDF)</a>
				</li>
				<li>
					<a href="/soft/2465.shtml" target="_blank">ASP公文签收系统 V2.0</a>
				</li>
				<li>
					<a href="/soft/2438.shtml" target="_blank">JAVA版旋转俄罗斯方块游戏</a>
				</li>
				<li>
					<a href="/soft/2394.shtml" target="_blank">Java日程管理——万年行事历源代码</a>
				</li>
			</ul>
		</div>
		<div id="showhint"></div>
		<script type="text/javascript">
			function $(element) {
				if(arguments.length > 1) {
					for(var i = 0, length = arguments.length, elements = []; i < length; i++) {
						elements.push($(arguments[i]));
					}
					return elements;
				}
				if(typeof element == "string") {
					return document.getElementById(element);
				} else {
					return element;
				}
			}
			var Class = {
				create: function() {
					return function() {
						this.initialize.apply(this, arguments);
					}
				}
			}
			Function.prototype.bind = function(object) {
				var method = this;
				return function() {
					method.apply(object, arguments);
				}
			}
			var Scroll = Class.create();
			Scroll.prototype = {
				initialize: function(element, height) {
					this.element = $(element);
					this.element.innerHTML += this.element.innerHTML;
					this.height = height;
					this.maxHeight = this.element.scrollHeight / 2;
					this.counter = 0;
					this.scroll();
					this.timer = "";
					this.element.onmouseover = this.stop.bind(this);
					this.element.onmouseout = function() {
						this.timer = setTimeout(this.scroll.bind(this), 1000);
					}.bind(this);
				},
				scroll: function() {
					if(this.element.scrollTop < this.maxHeight) {
						this.element.scrollTop++;
						this.counter++;
					} else {
						this.element.scrollTop = 0;
						this.counter = 0;
					}

					if(this.counter < this.height) {
						this.timer = setTimeout(this.scroll.bind(this), 22);
					} else {
						this.counter = 0;
						this.timer = setTimeout(this.scroll.bind(this), 3126);
					}
				},
				stop: function() {
					clearTimeout(this.timer);
				}
			}
			var myscroll = new Scroll("myscroll", 26);
		</script>
	</body>

</html>
试试其它关键字
同语言下
可能有用的
筱雨贡献的其它代码(28)