应老婆的要求,用javascript做了一个鼠标滑上去后图片放大浮出的效果,大家指正一下。
1 <script>
2
3 function GetAbsPosition(obj)
4 {
5 var curleft = 0, curtop = 0;
6 do {
7 curleft += obj.offsetLeft;
8 curtop += obj.offsetTop;
9 } while (obj = obj.offsetParent);
10 return [curleft,curtop];
11 }
12
13 function ShowFloatingImage(image, width, height)
14 {
15 var id = "trailimageid";
16 var newdiv = document.getElementById(id);
17 if(newdiv == null)
18 {
19 newdiv = document.createElement('div');
20 newdiv.setAttribute('id',id);
21 newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
22 document.body.appendChild(newdiv);
23 }
24 newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
25
26 var absPos = GetAbsPosition(image);
27 newdiv.style.position = "absolute";
28 newdiv.style.posLeft = absPos[0] - width/2;
29 newdiv.style.posTop = absPos[1] - height/2;
30 newdiv.style.display="block";
31 }
32
33 function HideElement(id)
34 {
35 var elem = document.getElementById(id);
36 elem.style.display="none";
37 }
38
39 </script>
40
41 例子:
42 <img src="../Pictures/tupian/00070724_m500.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />
2
3 function GetAbsPosition(obj)
4 {
5 var curleft = 0, curtop = 0;
6 do {
7 curleft += obj.offsetLeft;
8 curtop += obj.offsetTop;
9 } while (obj = obj.offsetParent);
10 return [curleft,curtop];
11 }
12
13 function ShowFloatingImage(image, width, height)
14 {
15 var id = "trailimageid";
16 var newdiv = document.getElementById(id);
17 if(newdiv == null)
18 {
19 newdiv = document.createElement('div');
20 newdiv.setAttribute('id',id);
21 newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
22 document.body.appendChild(newdiv);
23 }
24 newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
25
26 var absPos = GetAbsPosition(image);
27 newdiv.style.position = "absolute";
28 newdiv.style.posLeft = absPos[0] - width/2;
29 newdiv.style.posTop = absPos[1] - height/2;
30 newdiv.style.display="block";
31 }
32
33 function HideElement(id)
34 {
35 var elem = document.getElementById(id);
36 elem.style.display="none";
37 }
38
39 </script>
40
41 例子:
42 <img src="../Pictures/tupian/00070724_m500.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />