-
JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）</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 viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
smallbox.style.overflow = "hidden";
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
view.style.position = "absolute";
view.style.display = "none";
view.style.border = "1px #ddd solid";
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
bigbox.style.overflow = "hidden";
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
}else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
bigbox.style.width=bigX;
bigbox.style.height=bigY;
}
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpico.style.marginLeft = - vX * bl
bigpico.style.marginTop = - vY * bl
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
function disover(bigbox,view){
document.getElementById(bigbox).style.display='';
//document.getElementById(view).style.display=''
}
function disout(bigbox,view){
document.getElementById(bigbox).style.display='none';
//document.getElementById(view).style.display='none'
}
//-->
</script>
<div id="smallbox" style="border:1px #c33 solid;float:left;">
<img src="1.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic">
</div>
<div id="bigbox" style="display:none;border:1px #c33 solid;float:left;margin-left:10px;">
<div id="bigpico"><img src="1.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
</div>
<div id="view"></div>
-
5323 次浏览
4 条评论
收藏
4个评论
-
-
--
2020-12-01 10:00
-
这个功能实用
-
-
回复 · 0条回复
-
-
-
--
2020-12-01 10:00
-
有点复杂 看的很晕乎
-
-
回复 · 0条回复
-
-
-
--
2020-12-01 10:00
-
是啊,楼主二楼主的对哦,这些代码放在哪里去?[s:6]
-
-
回复 · 0条回复
-
-
-
--
2020-12-01 10:00
-
这个叫什么名字，，有该放到哪个文件里去呢，，，谢谢哈
-
-
回复 · 0条回复
-
作者信息
-
关注
-
试
免费试用
-
咨询热线
-
咨询热线
020-82299 259
-
在线咨询
