js+css实现图片放大预览效果

图片放大预览效果js代码，高清显示鼠标所经过的位置，移动鼠标放大显示某个位置，实用图片放大预览特效。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js+css实现图片放大预览效果_武鸣人</title>
<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var www_wuming__renX = bigX / srcX * smallX; //预览范围
var www_wuming__renY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
wuming_ren.innerHTML="JS+CSS实现图片放大预览效果,武鸣人信息资源平台！";
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
www_wuming__ren.style.width=www_wuming__renX;
www_wuming__ren.style.height=www_wuming__renY;
www_wuming_ren.style.borderWidth=border;
bigbox.style.borderWidth=border;
if (window.event){
www_wuming_ren.style.width=smallpic.offsetWidth+border*2;
www_wuming_ren.style.height=smallpic.offsetHeight+border*2;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
}else{
www_wuming_ren.style.width=smallpic.offsetWidth;
www_wuming_ren.style.height=smallpic.offsetHeight;
bigbox.style.width=bigX;
bigbox.style.height=bigY;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - www_wuming__renX/2;
var vY = e.offsetY - www_wuming__renY/2;
}else{
var vX = e.pageX - www_wuming__renX/2 - www_wuming_ren.offsetLeft - border;
var vY = e.pageY - www_wuming__renY/2 - www_wuming_ren.offsetTop - border;
iebug = 2;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - www_wuming__renX - iebug) vX = smallX - www_wuming__renX - iebug;
if (vY > smallY - www_wuming__renY - iebug) vY = smallY - www_wuming__renY - iebug;
bigpico.style.marginLeft = - vX * bl
bigpico.style.marginTop = - vY * bl
www_wuming__ren.style.left = vX + www_wuming_ren.offsetLeft + border;
www_wuming__ren.style.top = vY + www_wuming_ren.offsetTop + border;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#www_wuming_ren{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#www_wuming__ren{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#wuming_ren{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="wuming_ren"></div>
<div id="www_wuming_ren"><img src="/img/20240325_www_wuming_ren_8.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('www_wuming__ren').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('www_wuming__ren').style.display='none'"></div>
<div id="bigbox"  style="display:none"><div id="bigpico"><img src="/img/20240325_www_wuming_ren_8.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
</div>
<div id="www_wuming__ren" onmousemove="move(event) "style="display:none"></div>