📄 11-1 复杂的跑马灯.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>11-1 复杂的跑马灯</title>
<!-- 样式表 -->
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; }
#mq { width:220px; height:40px; line-height:20px; overflow:hidden; border:1px solid black; }
#mq div { position:absolute; width:220px; padding:0px 10px; }
</style>
<script>
function init(){
initMq($("mq"));
$("mq").start();
}
function initMq(obj){
var objs;
//定义跑马灯对象的自定义属性
obj.currentItem = -1;
obj.loopDelay = 50;
obj.loopItems = new Array();
obj.loopTimer = null;
obj.speedX = 2;
obj.speedY = 2;
//定义跑马灯对象的自定义方法
obj.loop = mq_loop;
obj.start = mq_startLoop;
obj.stop = mq_stopLoop;
//定义跑马灯对象的事件
obj.onmouseover = function(){ this.stop(); }
obj.onmouseout = function(){ this.loop(); }
//获取跑马灯对象的所有子元素
objs = obj.getElementsByTagName("div");
for(var i=0; i<objs.length; i++){
//在loopItems属性中记录子元素
obj.loopItems.push(objs[i]);
//自定义子元素的属性和方法
objs[i].index = i;
objs[i].move = move;
objs[i].reset = mq_reset;
//初始化子元素的状态
objs[i].reset();
}
}
function move(x, y){
this.style.left = x + "px";
this.style.top = y + "px";
}
function mq_loop(){
var obj;
clearTimeout(this.loopTimer);
if(this.currentItem >= this.loopItems.length)this.currentItem = 0;
obj = this.loopItems[this.currentItem];
if(obj.offsetLeft!=this.offsetLeft){
//向左卷动
obj.move(obj.offsetLeft - this.speedX, obj.offsetTop);
}else if(obj.offsetTop + obj.offsetHeight > this.offsetTop){
//向上卷动
obj.move(obj.offsetLeft, obj.offsetTop - this.speedX);
}else{
//重置该子元素
obj.reset();
this.currentItem++;
}
this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay);
}
function mq_reset(){
var p = this.parentNode;
this.move(p.offsetLeft + p.offsetWidth, p.offsetTop);
}
function mq_startLoop(){
for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset();
this.currentItem = 0;
this.loop();
}
function mq_stopLoop(){
clearTimeout(this.loopTimer);
}
function $(str){ return(document.getElementById(str)); }
window.onload = init;
</script>
</head>
<body>
<div id="mq">
<div>
北京时间2月8日消息，刚刚击败了骑士队，特雷西-麦克格雷迪就开始在吃起了鸡汤面。
他一整天都非常虚弱，早上的训练就没有参加，在比赛之前总共只热身了不到一个小时。
<br>好在火箭在今天的比赛中不需要这位全明星后卫付出太多。
<br>姚明在今天的比赛中拿到了22分和12个篮板球，拉斐尔-阿尔斯通拿到了17分和9次助攻，
最终火箭以92比77击败了骑士，这是他们在最近10场比赛中的第九场胜利，也是他们取得的五连胜。
赛后麦蒂说：“我们很多球员都站了出来。”
</div>
<div>
2月7日（大年初一），由小天王周杰伦率队，会集了蔡卓妍、陈柏霖、陈楚河、吴孟达、曾志伟、
吴宗宪、王刚、梁家仁、黄渤、闫妮等内地港台众多明星的年度大片《大灌篮》隆重上演。
<br>影片《大灌篮》除了在电影特技和体育主题两大方面，与当年星爷的《少林足球》堪称龙虎片，
而且此番故事中，周董和老戏骨曾志伟饰演的一段动人父子情，又与星爷前不久刚刚公映的转型大片
《长江7号》不谋而合。
</div>
</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -