®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

浮动层图片鼠标指针移到自动放大

html code:

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

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

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

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; }

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

posted @ 2009-08-18 08:53 ®Geovin Du Dream Park™ 阅读(887) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

浮动层图片鼠标指针移到自动放大

公告