一、HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">二、CSS样式
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>放大镜效果</title>
<link rel="stylesheet" type="text/css" href="css/my.css">
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<div id="content1" class="flitrue">
<div id="small_pic1" class="flitrue">
<span id="mark1" class="flitrue"></span>
<span id="block1" class="flitrue"></span>
<img src="img/11.jpg"/>
</div>
<div id="big_pic1" class="flitrue">
<img id="pic_img1" class="flitrue" src="img/12.jpg"/>
</div>
</div>
<div id="content2" class="flitrue">
<div id="small_pic2" class="flitrue">
<span id="mark2" class="flitrue"></span>
<span id="block2" class="flitrue"></span>
<img src="img/21.jpg"/>
</div>
<div id="big_pic2" class="flitrue">
<img id="pic_img2" class="flitrue" src="img/22.jpg"/>
</div>
</div>
<div id="content3" class="flitrue">
<div id="small_pic3" class="flitrue">
<span id="mark3" class="flitrue"></span>
<span id="block3" class="flitrue"></span>
<img src="img/31.jpg"/>
</div>
<div id="big_pic3" class="flitrue">
<img id="pic_img3" class="flitrue" src="img/32.jpg"/>
</div>
</div>
</body>
</html>
#content1{
height:400px;width:200px;border:1px solid #ccc;padding:10px;margin:10px;
position:relative;overflow: hidden;float:left;
}
#small_pic1,#small_pic2,#small_pic3{
height:200px;width: 200px;margin:0px auto;position:relative;overflow:hidden;
}
#content2 {
height:400px;width:200px;border:1px solid #ccc;padding:10px;margin:10px;
position:relative;overflow: hidden;float:left;
}
#content3{
height:400px;width:200px;border:1px solid #ccc;padding:10px;margin:10px;
position:relative;overflow: hidden;float:left;
}
#small_pic1 img,#small_pic2 img,#small_pic3 img{
margin:0px auto;
}
#big_pic1 img,#big_pic2 img,#big_pic3 img{
position: absolute;
}
#mark1,#mark2,#mark3{
width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px;
background:red; filter:alpha(opacity:0); opacity:0;
}
#block1,#block2,#block3{
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;
}
#big_pic1,#big_pic2,#big_pic3{ height:199px;width: 199px;top: 210px; margin:0px auto;
position: absolute;overflow:hidden; border:1px solid #CCC; display: none;
}
三、js文件
/**
*
*/
function setClass(){
var arr=[];
var i=0;
var flitrue=[];
arr=$('.flitrue');
for(i=0;i<arr.length;i++){
flitrue.push(arr[i]);
}
/**
*frist image
*/
flitrue[2].onmouseover=function(){
flitrue[4].style.display='block';
flitrue[3].style.display='block';
}
flitrue[2].onmouseout=function(){
flitrue[4].style.display='none';
flitrue[3].style.display='none';
}
flitrue[2].onmousemove=function(event){
var e=event;
var left=e.offsetX-flitrue[3].offsetWidth/2;
var top=e.offsetY-flitrue[3].offsetHeight/2;
if(left<0){
left=0;
}else if(left>flitrue[2].offsetWidth-flitrue[3].offsetWidth){
left=flitrue[2].offsetWidth-flitrue[3].offsetWidth;
};
if(top<0){
top=0;
}else if(top>flitrue[2].offsetHeight-flitrue[3].offsetHeight){
top=flitrue[2].offsetHeight-flitrue[3].offsetHeight;
};
flitrue[3].style.top=top+'px';
flitrue[3].style.left=left+'px';
//大图的显示比例percentX percentY
var percentX=left/(flitrue[2].offsetWidth-flitrue[3].offsetWidth);
var percentY=top/(flitrue[2].offsetHeight-flitrue[3].offsetHeight);
flitrue[5].style.left=-percentX*(flitrue[5].offsetWidth-flitrue[4].offsetWidth)+'px';
flitrue[5].style.top=-percentY*(flitrue[5].offsetHeight-flitrue[4].offsetHeight)+'px';
};
/**
*second image
*/
var array=[];
//array=$('.flitrue').find('.flitrue');//find 只能获得除父标签以外的子标签
array=$('.flitrue');
var content2=array[6];
var small_pic2=array[7];
var mark2=array[8];
var block2=array[9];
var big_pic2=array[10];
var big_img2=array[11];
mark2.onmouseover=function(){
big_pic2.style.display='block';
block2.style.display='block';
}
mark2.onmouseout=function(){
big_pic2.style.display='none';
block2.style.display='none';
}
mark2.onmousemove=function(event){
var e=event;
var left=e.clientX-content2.offsetLeft-block2.offsetWidth/2;
var top=e.clientY-content2.offsetTop-block2.offsetHeight/2;
if(left<0){
left=0;
}else if(left>mark2.offsetWidth-block2.offsetWidth){
left=mark2.offsetWidth-block2.offsetWidth;
};
if(top<0){
top=0;
}else if(top>mark2.offsetHeight-block2.offsetHeight){
top=mark2.offsetHeight-block2.offsetHeight;
};
block2.style.top=top+'px';
block2.style.left=left+'px';
//大图的显示比例percentX percentY
var percentX=left/(mark2.offsetWidth-block2.offsetWidth);
var percentY=top/(mark2.offsetHeight-block2.offsetHeight);
big_img2.style.left=-percentX*(big_img2.offsetWidth-big_pic2.offsetWidth)+'px';
big_img2.style.top=-percentY*(big_img2.offsetHeight-big_pic2.offsetHeight)+'px';
};
/**
*third image
*/
var content3=array[12];
var small_pic3=array[13];
var mark3=array[14];
var block3=array[15];
var big_pic3=array[16];
var big_img3=array[17];
mark3.onmouseover=function(){
big_pic3.style.display='block';
block3.style.display='block';
}
mark3.onmouseout=function(){
big_pic3.style.display='none';
block3.style.display='none';
}
mark3.onmousemove=function(event){
var e=event;
var left=e.clientX-content3.offsetLeft-block3.offsetWidth/2;
var top=e.clientY-content3.offsetTop-block3.offsetHeight/2;
if(left<0){
left=0;
}else if(left>mark3.offsetWidth-block3.offsetWidth){
left=mark3.offsetWidth-block3.offsetWidth;
};
if(top<0){
top=0;
}else if(top>mark3.offsetHeight-block3.offsetHeight){
top=mark3.offsetHeight-block3.offsetHeight;
};
block3.style.top=top+'px';
block3.style.left=left+'px';
//大图的显示比例percentX percentY
var percentX=left/(mark3.offsetWidth-block3.offsetWidth);
var percentY=top/(mark3.offsetHeight-block3.offsetHeight);
big_img3.style.left=-percentX*(big_img3.offsetWidth-big_pic3.offsetWidth)+'px';
big_img3.style.top=-percentY*(big_img3.offsetHeight-big_pic3.offsetHeight)+'px';
};
}
/**
*主入口
*/
window.onload=function(){
setClass();
}