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

html code:

<!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

</script>
18

</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

<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

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

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

48

<a href="index.aspx">
49

<img src="data:images/geovindu.jpg" width="140" height="59" border="0"></a>
50

</body>
51

</html>

css code:

/**//*
2

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

geovindu@163.com www.dupcit.com www.dusystem.com
4

Geovin Du 涂聚文
5

2009-08-18
6

*/
7

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:

/**//*
2

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

geovindu@163.com www.dupcit.com www.dusystem.com
4

Geovin Du 涂聚文
5

2009-08-18
6

*/
7

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

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

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

function run()

{
85

for(j in O)O[j].anim();
86

setTimeout("run()", 16);
87

}
88

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

浮动层图片鼠标指针移到自动放大相关推荐

两套供左撇子人士使用的鼠标指针（带自动安装inf文件）
一套来自于游戏"星际",另外一套来自 OS X 风格的,请君享用:) 这里点击下左手鼠标指针 edit:2011-5-24 迁移服务器,修正了旧链接. edit:2012-10-1 ...
用键盘来操纵鼠标指针（鼠标损坏时的应急措施）
会使用电脑的人都知道常见的电脑构成主要由:主机(主要部分).输出设备(显示器等).输入设备(键盘和鼠标等)三大件组成. 输入设备之一键盘,是负责对主机系统的"输入&q ...
鼠标指针变成一条竖着的虚线，WIN7，AMD显卡，应急处理方法
AMD显卡,A卡,系统WIN7,有的时候鼠标指针会变成图中的竖着的虚线的情况应急处理方法: [WIN7系统] 1.鼠标指针移到桌面右下角的"显示桌面",再移出,可以恢复正常! 2 ...
html5鼠标移过切换图片,鼠标移动到图片上切换到另一张图片，移出时又切默认图片...
HTML写法: JS写法:var img = document.createElement("img"); img.setAttribute("src",&qu ...
纯css3鼠标经过出现文字或图片鼠标移走消失
2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...
html5 鼠标截取图片,小编推荐：简单实用的截取鼠标指针截图工具—WinSnap
一个能截取鼠标指针的截图工具,简单方便,以及如何实现通过命令打开指定的程序今天小编给大家分享一款非常轻巧的截图工具-WinSnap WinSnap截图的时候可以把鼠标截进去,具体的截取样式,效果等可 ...
鼠标指针移入按钮和图片改变光标样式
效果图: 原码如下: <div><p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p><span style="cursor:auto&qu ...
win7图片查看器的注册表项_win7打开电脑黑屏只剩鼠标指针的解决教程
小编给大家详解win7打开电脑黑屏只剩鼠标指针的解决教程,使用win7系统过程中,开机黑屏是见的故障,当你遇到电脑开机黑屏只剩下鼠标指针的问题时,可参照以下的详细方法进行解决. 最近有win7系统用户 ...
18常用web开发浮动层、提示层代码下载
1.jQuery顶部固定层页面滚动淡出淡进菜单显示查看演示>> 2.jQuery鼠标滚动条到页面底部浮动层滑动弹出信息查看演示>> 3.网页向导Jquery插件wlGuid ...

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

浮动层图片鼠标指针移到自动放大相关推荐

最新文章

热门文章