CSS放大镜特效

一、CSS代码

1. #divcss5 { width: 120px; height: 90px; padding: 5px;

    border: 1px solid #ccc; position: relative; } 

2. #divcss5 .small_pic { width: 120px; height: 90px; background: #eee;

    position: relative; } 

3. #divcss5 .float_layer { width: 50px; height: 50px; border: 1px solid #000;

    background: #fff; filter: alpha(opacity: 30); opacity: 0.3;

    position: absolute; top: 0; left: 0; display:none; } 

4. #divcss5 .mark {width:100%; height:100%; position:absolute; z-index:2;

    left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} 

5. #divcss5 .big_pic { position: absolute; top: -1px; left: 215px; 

   width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 

6. #divcss5 .big_pic img { position:absolute; top: -30px; left: -80px; } 

二、JS代码

1. function getByClass(oParent, sClass) 
2. { 
3.  var aEle=oParent.getElementsByTagName('*'); 
4.  var aTmp=[]; 
5.  var i=0; 
6.  for(i=0;i<aEle.length;i++) 
7.  { 
8.   if(aEle[i].className==sClass) 
9.   { 
10.    aTmp.push(aEle[i]); 
11.   } 
12.  } 
13.  return aTmp; 
14. } 
15. window.onload=function () 
16. { 
17.  var oDiv=document.getElementById('divcss5'); 
18.  var oMark=getByClass(oDiv, 'mark')[0]; 
19.  var oFloat=getByClass(oDiv, 'float_layer')[0]; 
20.  var oBig=getByClass(oDiv, 'big_pic')[0]; 
21.  var oSmall=getByClass(oDiv, 'small_pic')[0]; 
22.  var oImg=oBig.getElementsByTagName('img')[0]; 
23.  oMark.onmouseover=function () 
24.  { 
25.   oFloat.style.display='block'; 
26.   oBig.style.display='block'; 
27.  }; 
28.  oMark.onmouseout=function () 
29.  { 
30.   oFloat.style.display='none'; 
31.   oBig.style.display='none'; 
32.  }; 
33.  oMark.onmousemove=function (ev) 
34.  { 
35.   var oEvent=ev||event; 
36.   var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; 
37.   var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; 
38.   if(l<0) 
39.   { 
40.    l=0; 
41.   } 
42.   else if(l>oMark.offsetWidth-oFloat.offsetWidth) 
43.   { 
44.    l=oMark.offsetWidth-oFloat.offsetWidth; 
45.   } 
46.   if(t<0) 
47.   { 
48.    t=0; 
49.   } 
50.   else if(t>oMark.offsetHeight-oFloat.offsetHeight) 
51.   { 
52.    t=oMark.offsetHeight-oFloat.offsetHeight; 
53.   } 
54.   oFloat.style.left=l+'px'; 
55.   oFloat.style.top=t+'px'; 
56.   var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth); 
57.   var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight); 
58.   oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; 
59.   oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; 
60.  }; 
61. }; 

三、HTML代码

1. <div id="divcss5"> 
2. <div class="small_pic"> 
3. <span class="mark"></span> 
4.     <span class="float_layer"></span> 
5.     <img src="small.jpg" width=120px height=90px /></div> 
6.     <div class="big_pic"><img src="big.jpg" /></div> 
7. </div>