<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单实用的图片放大效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
#large{width:650px;position:absolute;top:100px;left:100px;}
#large #smallimg{width:300px;position:relative;float:left;border:1px solid #CCCCCC;}
#large #smallimg #mark{width:100px;height:100px;border:1px solid #CCCCCC;position:absolute;display:none;z-index:10;filter:alpha(opacity=40);opacity:.4;background:#CCCCCC;cursor:crosshair;}
#large #smallimg img{width:300px;z-index:1;}
#large #largeimg{width:225px;height:225px;float:right;overflow:hidden;}
</style>
<script language="javascript">
function showmark(e){
var large=document.getElementById("large");
var smallimg=document.getElementById("smallimg");
var mark=document.getElementById("mark");
var e=e||window.event;
mark.style.display="block";
smallimg.onmousemove=movemark;
smallimg.onmouseout=hidemark;
}
function hidemark(){
var mark=document.getElementById("mark");
var largeimg=document.getElementById("largeimg");
mark.style.display="none";
largeimg.style.background="";
}
function movemark(e){
var large=document.getElementById("large");
var smallimg=document.getElementById("smallimg");
var largeimg=document.getElementById("largeimg");
var mark=document.getElementById("mark");
var e=e||window.event;
var left=e.clientX-large.offsetLeft-50;
var top=e.clientY-large.offsetTop-50;
mark.style.left=left+"px";
mark.style.top=top+"px";
if(left<0){
mark.style.left=0+"px";
}
else{
if(left>200){
mark.style.left=200+"px";
}
else{
mark.style.left=left+"px";
}
}
if(top<0){
mark.style.top=0+"px";
}
else{
if(top>125){
mark.style.top=125+"px";
}
else{
mark.style.top=top+"px";
}
}
largeimg.style.background="url(/get_pic/2010/03/20100507135839310.jpg) "+"-"+parseInt(mark.style.left)*1024/300+"px"+" -"+parseInt(mark.style.top)*1024/300+"px"+" no-repeat";
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="large">
<div id="smallimg" onmouseover="showmark(event)">
<div id="mark"></div>
<img alt="js 简单实用的图片放大效果" src="/get_pic/2010/03/20100507135839310.jpg">
</div>
<div id="largeimg"></div>
</div>
</body>
</html>