经典:不错的JS特效css菜单效果

2009-06-02 0 条评论 4,038 次阅读 被赞了 0 次
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
　
<!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" lang="UTF-8">
<head>
<title>Link Style01 - Cocoon Studio</title>
<script LANGUAGE="Javascript">
CocoonStudio = function(){}
CocoonStudio.DHtml = function(){}
CocoonStudio.DHtml.LinkStyle01 = function(){}
CocoonStudio.DHtml.LinkStyle01.TemplteDiv = document.createElement("DIV");
with(CocoonStudio.DHtml.LinkStyle01.TemplteDiv){
with(style){
position = "absolute"; display = "none"; width = height = 0;
backgroundColor = "#80FF00"; border = "1px solid #008000"; cursor = "hand";
filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=0) BlendTrans(duration=1);";
}
}
CocoonStudio.DHtml.LinkStyle01.ActionCount = 10;
CocoonStudio.DHtml.LinkStyle01.SizeStep = 4;
CocoonStudio.DHtml.LinkStyle01.FadeStep = 10;
CocoonStudio.DHtml.LinkStyle01.Timer = new Array();
CocoonStudio.DHtml.LinkStyle01.Items = new Array();
CocoonStudio.DHtml.LinkStyle01.Initial = function(){
document.body.insertAdjacentElement("beforeEnd",CocoonStudio.DHtml.LinkStyle01.TemplteDiv);
}
CocoonStudio.DHtml.LinkStyle01.MouseOver = function(){
var o;
var iAddSize = this.ActionCount * this.SizeStep * 2;
var oSrc = event.srcElement;
var c = oSrc.sourceIndex;
with(o=CocoonStudio.DHtml.LinkStyle01.TemplteDiv.cloneNode(true)){
with(style){
display = ''; width = oSrc.scrollWidth + iAddSize; height = oSrc.scrollHeight + iAddSize;
pixelTop = oSrc.offsetTop - iAddSize / 2; pixelLeft = oSrc.offsetLeft - iAddSize / 2;
}
onclick = oSrc.click;
onmouseout = new Function("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+");");
}
CocoonStudio.DHtml.LinkStyle01.Items[c] = o;
document.body.insertAdjacentElement("beforeEnd",o);
this.FadeIn(c);
setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+");" ,1500);
}
CocoonStudio.DHtml.LinkStyle01.FadeIn = function(c,n){
if(!c) return; var p = n; if(!p) p = 0;
var o = CocoonStudio.DHtml.LinkStyle01.Items[c]; if(!o) return;
with(o){
var iFade = filters[0].opacity;
if(iFade<=(100-this.FadeStep)) filters[0].opacity += this.FadeStep;
with(style){
width = parseInt(width) - this.SizeStep*2; height = parseInt(height) - this.SizeStep*2;
pixelTop += this.SizeStep; pixelLeft += this.SizeStep;
}
}
if(p>=this.ActionCount-3) return;
CocoonStudio.DHtml.LinkStyle01.Timer[c] = setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeIn("+c+","+(++p)+");",50);
}
CocoonStudio.DHtml.LinkStyle01.FadeOut = function(c,n){
if(!c) return; var p = n; if(!p) p = this.ActionCount-1;
clearTimeout(CocoonStudio.DHtml.LinkStyle01.Timer[c]);
var o = CocoonStudio.DHtml.LinkStyle01.Items[c]; if(!o) return;
with(o){
var iFade = filters[0].opacity;
if(iFade>=this.FadeStep) filters[0].opacity -= this.FadeStep;
with(style){
width = parseInt(width) + this.SizeStep; height = parseInt(height) + this.SizeStep;
pixelTop -= this.SizeStep/2; pixelLeft -= this.SizeStep/2;
}
}
if(p<=1){ o.removeNode(true); p=0; return; }
setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+","+(--p)+");",25);
}
window.onload = CocoonStudio.DHtml.LinkStyle01.Initial;
</script>
<script language="Javascript" event="onmousemove" for="CcLS02Menu">
CocoonStudio.DHtml.LinkStyle01.MouseOver();
</script>
<style>
body{
font-size: 9pt;
}
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Studio</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Sunrise_Chen</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">www.chinahtml.com.com</a>
<p>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Asp Check</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Counter 6</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Disk Manager 4.5</a>
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon MS-Access DbAdmin 1.0</a>
</body>
</html>

相关文章:

Default Thumbnailcss设置导航菜单li的鼠标经过背景换色效果 Default ThumbnailPJblog通用皮肤首字下沉效果之CSS修改 Default ThumbnailCSS写的进度条效果 Default Thumbnail关注css背景音乐代码 Default Thumbnail为网页设置页面切换时的换页过渡效果 Default Thumbnail鼠标触发型导航菜单 Default Thumbnail循序渐进学习CSS Default Thumbnail30个基于CSS设计的优秀导航和按钮设计教程 Default Thumbnailcss的滤镜应用 Default Thumbnail为什么火狐谷歌chrome等浏览器不支持一些css滤镜 Default ThumbnailCSS代码在线压缩优化工具示例 Default Thumbnail20个漂亮的“标准的”css配色方案参考
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code