-
Notifications
You must be signed in to change notification settings - Fork 20
/
11.1 滚动变色的链接.htm
117 lines (115 loc) · 7.34 KB
/
11.1 滚动变色的链接.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>11.1 滚动变色的链接</title>
<style type="text/css">
.box li{ list-style:none; height:20px; margin-top:4px; line-height:20px; font-size:12px;}
.menuBox li{ list-style:none; height:20px; margin-top:4px; width:60px; float:left; margin-right:10px; line-height:20px; font-size:12px;}
</style>
<script type="text/javascript">
var RollText = function(cName,color1,color2){this.initialize(cName,color1,color2);}
RollText.prototype = {
initialize : function(cName,color1,color2){
var self = this;
var obj = self.getClass(document.body,cName);
for(var i=0;i<obj[0].getElementsByTagName("li").length;i++){
var li = obj[0].getElementsByTagName("li")[i];
li.style.position = "relative";
li.style.overflow = "hidden";
var text = li.getElementsByTagName("a")[0];
text.style.position = "absolute";
text.style.textDecoration = "none";
text.innerHTML = "<font color="+color1+">" + text.innerHTML + "</font><br /><font color="+color2+">" + text.innerHTML + "</font>";
text.onmouseover = function(){
self.startMove(this,{"marginTop":-li.offsetHeight});
}
text.onmouseout = function(){
self.startMove(this,{"marginTop":0});
}
}
},
getClass : function(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
},
startMove : function(target, object, onComplete){
var self = this;
if(target.timer)clearInterval(target.timer);
target.timer = setInterval(function (){
self.doMove(target, object, onComplete);
}, 30);
},
doMove : function(target, object, onComplete){
var iCur = 0;
var attr = '';
var bStop = true;
var self = this;
for(attr in object){
attr == 'opacity' ? iCur = parseInt(parseFloat(self.getStyle(target, 'opacity'))*100) : iCur = parseInt(self.getStyle(target, attr));
if(isNaN(iCur))iCur = 0;
if(navigator.userAgent.indexOf("Firefox") > 0){
var iSpeed = (object[attr]-iCur) / 3;
}else{
var iSpeed = (object[attr]-iCur) / 3;
}
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(parseInt(object[attr])!=iCur)bStop = false;
if(attr=='opacity'){
target.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
target.style.opacity = (iCur + iSpeed) / 100;
}else{
attr == 'zIndex' ? target.style[attr] = iCur + iSpeed : target.style[attr] = iCur + iSpeed +'px';
}
}
if(bStop){
clearInterval(target.timer);
target.timer = null;
if(onComplete)onComplete();
}
},
getStyle : function(target, attr){
return target.currentStyle?target.currentStyle[attr]:getComputedStyle(target, false)[attr];
}
}
/**
* 用法如下
* @method RollText(cName,color1,color2);
* @param cName 要运用到的class
* @param color1 默认时文字颜色
* @param color1 鼠标经过翻滚显示的字体颜色
* 注:颜色值要写全(如#000000)否则IE那贱货不显示你设置的颜色
*/
window.onload = function(){
//新闻列表展示
var roll = new RollText("box","#000000","#ff0000");
//网站菜单展示
var rollMenu = new RollText("menuBox","#000000","#CC6000");
}
</script>
</head>
<body>
<div class="menuBox">
<ul>
<li><a href="#">清新</a></li>
<li><a href="#">妩媚</a></li>
<li><a href="#">亮丽</a></li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<div class="box">
<ul>
<li><a href="#">清新自然</a></li>
<li><a href="#">妩媚动人</a></li>
<li><a href="#">亮丽如新</a></li>
</ul>
</div>
</body>
</html>