html code:
css code:
javacript code:
更多专业前端知识，请上 【猿2048】www.mk2048.com
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<title>缔友计算机信息技术有限公司--浮动层图片鼠标指针移到自动放大</title>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<meta http-equiv="imagetoolbar" content="no">
7<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
8<meta name="Robots" content="all index follow ">
9<meta name="Author" content="涂聚文" />
10<link href="images/css.css" rel="stylesheet" type="text/css">
11<link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />
12<link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />
13<link rel="Bookmark" href="http://www.dupcit.com/favicon.ico">
14<link rel="stylesheet" type="text/css" href="css/css.css"/>
15
<script type="text/javascript" src="js/float.js">
16
17</script>
18
19</head>
20<body>
21<div id="screen">
22 <div id="box"">
23 <img src="http://www.dupcit.com/01.jpg" title="涂聚文" alt=""/>
24 <img src="http://www.dupcit.com/02.jpg" title=" 涂聚文"alt=""/>
25 <img src="http://www.dupcit.com/03.jpg" title="涂聚文" alt=""/>
26 <img src="http://www.dupcit.com/04.jpg" title="涂聚文" alt=""/>
27 <img src="http://www.dupcit.com/05.jpg" title="涂聚文" alt=""/>
28 <img src="http://www.dupcit.com/06.jpg" title="涂聚文" alt=""/>
29 <img src="http://www.dupcit.com/07.jpg" title="涂聚文" alt=""/>
30
31 <span id="txt"></span>
32 <span id="tit"></span>
33 <span id="lnk">
34 <a></a>
35 <a></a>
36 <a></a>
37 <a></a>
38 <a></a>
39 <a></a>
40 <a></a> </span> </div>
41</div>
42
43<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
44<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading
</span>
45<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
46<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i )m02 =(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100) 'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>
47
<!-- end of images_loading_bar code -->
48<a href="index.aspx">
49<img src="images/geovindu.jpg" width="140" height="59" border="0"></a>
50</body>
51</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title>缔友计算机信息技术有限公司--浮动层图片鼠标指针移到自动放大</title>5
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">6
<meta http-equiv="imagetoolbar" content="no">7
<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">8
<meta name="Robots" content="all index follow ">9
<meta name="Author" content="涂聚文" />10
<link href="images/css.css" rel="stylesheet" type="text/css">11
<link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />12
<link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />13
<link rel="Bookmark" href="http://www.dupcit.com/favicon.ico"> 14
<link rel="stylesheet" type="text/css" href="css/css.css"/>15
<script type="text/javascript" src="js/float.js">
16
17
</script>18
19
</head>20
<body>21
<div id="screen">22
<div id="box"">23
<img src="http://www.dupcit.com/01.jpg" title="涂聚文" alt=""/>24
<img src="http://www.dupcit.com/02.jpg" title=" 涂聚文"alt=""/>25
<img src="http://www.dupcit.com/03.jpg" title="涂聚文" alt=""/>26
<img src="http://www.dupcit.com/04.jpg" title="涂聚文" alt=""/>27
<img src="http://www.dupcit.com/05.jpg" title="涂聚文" alt=""/>28
<img src="http://www.dupcit.com/06.jpg" title="涂聚文" alt=""/>29
<img src="http://www.dupcit.com/07.jpg" title="涂聚文" alt=""/>30
31
<span id="txt"></span>32
<span id="tit"></span>33
<span id="lnk">34
<a></a>35
<a></a>36
<a></a>37
<a></a>38
<a></a>39
<a></a>40
<a></a> </span> </div>41
</div>42
43
<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->44
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading</span>45
<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>46
<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i )m02 =(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100) 'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>47
<!-- end of images_loading_bar code -->48
<a href="index.aspx">49
<img src="images/geovindu.jpg" width="140" height="59" border="0"></a>50
</body>51
</html>
css code:
1/*
2 浮动层图片鼠标指针移到自动放大
3 geovindu@163.com www.dupcit.com www.dusystem.com
4 Geovin Du 涂聚文
5 2009-08-18
6*/
7
8html {
9 overflow: hidden;
10 }
11 body {
12 margin: 0px;
13 padding: 0px;
14 position: absolute;
15 width: 100%;
16 height: 100%;
17 cursor: crosshair;
18 background-color: #FF0000;
19 }
20 #box {
21 position: absolute;
22 border: gray solid 1px;
23 visibility: hidden;
24 background-color: #FFFFFF;
25 }
26 #screen {
27 position: absolute;
28 left: 0px;
29 width: 100%;
30 top: 10%;
31 height: 80%;
32 border: gray solid 1px;
33 background-color: #FFFFFF;
34 }
35 #box img {
36 position: absolute;
37 border: gray solid 1px;
38 cursor: pointer;
39 }
40 #box span {
41 position: absolute;
42 color: #ccc;
43 font-family: verdana;
44 font-size: 12px;
45 width: 200px;
46 }
47 #box a {
48 text-decoration: none;
49 color:#ff8000;
50 }
51 #box a:hover {
52 text-decoration: none;
53 background:#ff8000;
54 color:#ffffff;
55 }
56 #box a:visited {
57 text-decoration: none;
58 color:#ff8000;
59 }
60 #box a:visited:hover {
61 text-decoration: none;
62 background:#ff8000;
63 color:#ffffff;
64 }
65 #lnk {
66 visibility: hidden;
67 }
68.font {
69 font-family: Arial, Helvetica, sans-serif;
70 font-size: 20px;
71 color: #FFFFFF;
72 font-weight: bold;
73}
74.STYLE3 {font-family: Arial, Helvetica, sans-serif; font-size: 25px; color: #FFFFFF; font-weight: bold; }
/*2
浮动层图片鼠标指针移到自动放大3
geovindu@163.com www.dupcit.com www.dusystem.com4
Geovin Du 涂聚文5
2009-08-186
*/7
8
html {9
overflow: hidden;10
}11
body {12
margin: 0px;13
padding: 0px;14
position: absolute;15
width: 100%;16
height: 100%;17
cursor: crosshair;18
background-color: #FF0000;19
}20
#box {21
position: absolute;22
border: gray solid 1px;23
visibility: hidden;24
background-color: #FFFFFF;25
}26
#screen {27
position: absolute;28
left: 0px;29
width: 100%;30
top: 10%;31
height: 80%;32
border: gray solid 1px;33
background-color: #FFFFFF;34
}35
#box img {36
position: absolute;37
border: gray solid 1px;38
cursor: pointer;39
}40
#box span {41
position: absolute;42
color: #ccc;43
font-family: verdana;44
font-size: 12px;45
width: 200px;46
}47
#box a {48
text-decoration: none;49
color:#ff8000;50
}51
#box a:hover {52
text-decoration: none;53
background:#ff8000;54
color:#ffffff;55
}56
#box a:visited {57
text-decoration: none;58
color:#ff8000;59
}60
#box a:visited:hover {61
text-decoration: none;62
background:#ff8000;63
color:#ffffff;64
}65
#lnk {66
visibility: hidden;67
}68
.font {69
font-family: Arial, Helvetica, sans-serif;70
font-size: 20px;71
color: #FFFFFF;72
font-weight: bold;73
}74
.STYLE3 {font-family: Arial, Helvetica, sans-serif; font-size: 25px; color: #FFFFFF; font-weight: bold; }
javacript code:
1/*
2 浮动层图片鼠标指针移到自动放大
3 geovindu@163.com www.dupcit.com www.dusystem.com
4 Geovin Du 涂聚文
5 2009-08-18
6*/
7
8document.onselectstart = new Function("return false");
9O = new Array();
10box = 0;
11img = 0;
12txt = 0;
13tit = 0;
14W = 0;
15H = 0;
16nI = 0;
17sel = 0;
18si = 0;
19ZOOM = 0;
20rImg = 0;
21//
22speed = .06; // animation speed
23delay = .5; // 1 = no delay
24//
25
26function dText(){
27 txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
28 txt.innerHTML = O[sel].tx;
29 tit.innerHTML = O[sel].ti;
30}
31
32function CObj(n, s, x, tx, ti){
33 this.n = n;
34 this.dim = s;
35 this.tx = tx;
36 this.ti = ti;
37 this.is = img[n];
38 this.vz = 0;
39 this.sx = 0;
40 this.x0 = x;
41 this.x1 = 0;
42 this.zo = 0;
43
this.over = function() {
44 with(this){
45 if(n!=sel){
46 O[sel].dim = 100;
47 O[n].dim = ZOOM * 100;
48 sel = n;
49 l = 0;
50 for(k=0; k<nI; k ){
51 O[k].x0 = l;
52 l = O[k].dim;
53
}
54 txt.innerHTML = tit.innerHTML = "";
55 setTimeout("dText()", 32);
56 }
57 }
58 }
59 this.anim = function () {
60 with(this){
61 vz = speed*(vz (x1-sx)*delay);
62 x1 -= vz;
63 sx = (n==0)?0:O[n-1].x0 O[n-1].dim;
64 zo -= (zo-dim)*speed;
65 l = (x1*si) 6*(n 1);
66 w = zo*si;
67 is.style.left = Math.round(l) 'px';
68 is.style.top = Math.round((H-w*rImg)*.5) 'px';
69 is.style.width = Math.round(w) 'px';
70 is.style.height = Math.round(w*rImg) 'px';
71 if(sel == n){
72 if(sel<nI*.5) {
73 tit.style.left = txt.style.left = Math.round(l w 6) 'px';
74 } else {
75 tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6) 'px';
76 }
77 txt.style.top = Math.round(-(w*rImg)*.25) 'px';
78 tit.style.top = Math.round((w*rImg)*.33) 'px';
79 }
80 }
81 }
82}
83
84function run(){
85 for(j in O)O[j].anim();
86 setTimeout("run()", 16);
87}
88
89function doResize(){
90 tit.style.width = Math.round(nx*.25) 'px';
91 txt.style.width = Math.round(nx*.25) 'px';
92 tit.style.fontSize = (nx/30) 'px';
93 txt.style.fontSize = (nx/70) 'px';
94 with(box.style){
95 width = Math.round(W) 'px';
96 height = Math.round(H) 'px';
97 left = Math.round(nx/2-W/2) 'px';
98 top = Math.round(ny/2-H/2) 'px';
99 }
100}
101
102function resize(){
103 nx = scr.offsetWidth;
104 ny = scr.offsetHeight;
105 W = nx*90/100;
106 si = (W-((nI 1)*6))/((ZOOM*100) ((nI-1)*100));
107 H = (100*si*rImg) 14;
108 doResize();
109}
110onresize = resize;
111
112onload = function(){
113 scr = document.getElementById("screen");
114 box = document.getElementById("box");
115 tit = document.getElementById("tit");
116 txt = document.getElementById("txt");
117 img = box.getElementsByTagName("img");
118
119 Lnk = document.getElementById("lnk").getElementsByTagName("a");
120 nI = img.length;
121 ZOOM = nI;
122 rImg = img[0].height/img[0].width;
123 resize();
124 s = ZOOM * 100;
125 x = 0;
126 tit.innerHTML = img[0].title;
127 txt.innerHTML = img[0].alt;
128 for(i=0; i<nI; i ) {
129 var t = img[i].alt;
130 if(Lnk[i].href!="") t ='<br><a href="' Lnk[i].href '">' Lnk[i].innerHTML '</a>';
131 O[i] = new CObj(i, s, x, t, img[i].title);
132 img[i].alt = "";
133 img[i].title = "";
134 img[i].onmousedown = new Function("return false;");
135 img[i].onmouseover = new Function('O[' i '].over();');
136 if(Lnk[i].href!=""){
137 /* ==== hyperlink ==== */
138 img[i].onclick = new Function('window.open("' Lnk[i].href '","_blank");');
139 }
140 x = s;
141 s = 100;
142 }
143 box.style.visibility = "visible";
144 run();
145}
146
147
/*2
浮动层图片鼠标指针移到自动放大3
geovindu@163.com www.dupcit.com www.dusystem.com4
Geovin Du 涂聚文5
2009-08-186
*/7
8
document.onselectstart = new Function("return false");9
O = new Array();10
box = 0;11
img = 0;12
txt = 0;13
tit = 0;14
W = 0;15
H = 0;16
nI = 0;17
sel = 0;18
si = 0;19
ZOOM = 0;20
rImg = 0;21
//22
speed = .06; // animation speed23
delay = .5; // 1 = no delay24
//25
26
function dText(){27
txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";28
txt.innerHTML = O[sel].tx;29
tit.innerHTML = O[sel].ti;30
}31
32
function CObj(n, s, x, tx, ti){33
this.n = n;34
this.dim = s;35
this.tx = tx;36
this.ti = ti;37
this.is = img[n];38
this.vz = 0;39
this.sx = 0;40
this.x0 = x;41
this.x1 = 0;42
this.zo = 0;43
this.over = function() {
44
with(this){45
if(n!=sel){46
O[sel].dim = 100;47
O[n].dim = ZOOM * 100;48
sel = n;49
l = 0;50
for(k=0; k<nI; k ){51
O[k].x0 = l;52
l = O[k].dim;53
}54
txt.innerHTML = tit.innerHTML = "";55
setTimeout("dText()", 32);56
}57
}58
}59
this.anim = function () {60
with(this){61
vz = speed*(vz (x1-sx)*delay);62
x1 -= vz;63
sx = (n==0)?0:O[n-1].x0 O[n-1].dim;64
zo -= (zo-dim)*speed;65
l = (x1*si) 6*(n 1);66
w = zo*si;67
is.style.left = Math.round(l) 'px';68
is.style.top = Math.round((H-w*rImg)*.5) 'px';69
is.style.width = Math.round(w) 'px';70
is.style.height = Math.round(w*rImg) 'px';71
if(sel == n){72
if(sel<nI*.5) {73
tit.style.left = txt.style.left = Math.round(l w 6) 'px';74
} else {75
tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6) 'px';76
}77
txt.style.top = Math.round(-(w*rImg)*.25) 'px';78
tit.style.top = Math.round((w*rImg)*.33) 'px';79
}80
}81
}82
}83
84
function run(){85
for(j in O)O[j].anim();86
setTimeout("run()", 16);87
}88
89
function doResize(){90
tit.style.width = Math.round(nx*.25) 'px';91
txt.style.width = Math.round(nx*.25) 'px';92
tit.style.fontSize = (nx/30) 'px';93
txt.style.fontSize = (nx/70) 'px';94
with(box.style){95
width = Math.round(W) 'px';96
height = Math.round(H) 'px';97
left = Math.round(nx/2-W/2) 'px';98
top = Math.round(ny/2-H/2) 'px';99
}100
}101
102
function resize(){103
nx = scr.offsetWidth;104
ny = scr.offsetHeight;105
W = nx*90/100;106
si = (W-((nI 1)*6))/((ZOOM*100) ((nI-1)*100));107
H = (100*si*rImg) 14;108
doResize();109
}110
onresize = resize;111
112
onload = function(){113
scr = document.getElementById("screen");114
box = document.getElementById("box");115
tit = document.getElementById("tit");116
txt = document.getElementById("txt");117
img = box.getElementsByTagName("img");118
119
Lnk = document.getElementById("lnk").getElementsByTagName("a");120
nI = img.length;121
ZOOM = nI;122
rImg = img[0].height/img[0].width;123
resize();124
s = ZOOM * 100;125
x = 0;126
tit.innerHTML = img[0].title;127
txt.innerHTML = img[0].alt;128
for(i=0; i<nI; i ) {129
var t = img[i].alt;130
if(Lnk[i].href!="") t ='<br><a href="' Lnk[i].href '">' Lnk[i].innerHTML '</a>';131
O[i] = new CObj(i, s, x, t, img[i].title);132
img[i].alt = "";133
img[i].title = "";134
img[i].onmousedown = new Function("return false;");135
img[i].onmouseover = new Function('O[' i '].over();');136
if(Lnk[i].href!=""){137
/* ==== hyperlink ==== */138
img[i].onclick = new Function('window.open("' Lnk[i].href '","_blank");');139
}140
x = s;141
s = 100;142
}143
box.style.visibility = "visible";144
run();145
}146
147
更多专业前端知识，请上 【猿2048】www.mk2048.com
![IE Firefox css 差别 [转]](http://pic.xiahunao.cn/IE Firefox css 差别 [转])
