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>
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
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; }
2 浮动层图片鼠标指针移到自动放大
3 geovindu@163.com www.dupcit.com www.dusystem.com
4 Geovin Du 涂聚文
5 2009-08-18
6*/
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
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 speed
23 delay = . 5 ; // 1 = no delay
24 //
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
2 浮动层图片鼠标指针移到自动放大
3 geovindu@163.com www.dupcit.com www.dusystem.com
4 Geovin Du 涂聚文
5 2009-08-18
6*/
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 speed
23 delay = . 5 ; // 1 = no delay
24 //
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