<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://www.365css.cn/example/tupianfangdayulan/ -->
<HTML><HEAD><TITLE>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS.CN</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<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.οnlοad=function (){
head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
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;
}
//-->
</SCRIPT>
<STYLE type=text/css>* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
IMG {
DISPLAY: block
}
#smallbox {
BORDER-RIGHT: #c33 1px solid; BORDER-TOP: #c33 1px solid; FLOAT: left; OVERFLOW: hidden; BORDER-LEFT: #c33 1px solid; WIDTH: 0px; BORDER-BOTTOM: #c33 1px solid; HEIGHT: 0px
}
#bigbox {
BORDER-RIGHT: #c33 1px solid; BORDER-TOP: #c33 1px solid; FLOAT: left; OVERFLOW: hidden; BORDER-LEFT: #c33 1px solid; WIDTH: 0px; BORDER-BOTTOM: #c33 1px solid; HEIGHT: 0px
}
#view {
BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; WIDTH: 0px; BORDER-BOTTOM: #ddd 1px solid; POSITION: absolute; HEIGHT: 0px
}
#head {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: red; LINE-HEIGHT: 40px; FONT-STYLE: normal; TEXT-ALIGN: center; FONT-VARIANT: normal
}
</STYLE>
<META content="MSHTML 6.00.6000.16735" name=GENERATOR></HEAD>
<BODY>
<DIV id=head></DIV>
<DIV id=smallbox><IMG οnmοusemοve=move(event) id=smallpic
οnmοuseοver="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''"
οnmοuseοut="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"
height=300 src="JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS_CN_files/1.jpg"
width=300 border=0 name=smallpic></DIV>
<DIV id=bigbox style="DISPLAY: none">
<DIV id=bigpico><IMG id=bigpic height=300
src="JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS_CN_files/1.jpg" width=300
border=0 name=bigpic></DIV></DIV>
<DIV οnmοusemοve="move(event) " id=view
style="DISPLAY: none"></DIV></BODY></HTML>
<!-- saved from url=(0047)http://www.365css.cn/example/tupianfangdayulan/ -->
<HTML><HEAD><TITLE>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS.CN</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<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.οnlοad=function (){
head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
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;
}
//-->
</SCRIPT>
<STYLE type=text/css>* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
IMG {
DISPLAY: block
}
#smallbox {
BORDER-RIGHT: #c33 1px solid; BORDER-TOP: #c33 1px solid; FLOAT: left; OVERFLOW: hidden; BORDER-LEFT: #c33 1px solid; WIDTH: 0px; BORDER-BOTTOM: #c33 1px solid; HEIGHT: 0px
}
#bigbox {
BORDER-RIGHT: #c33 1px solid; BORDER-TOP: #c33 1px solid; FLOAT: left; OVERFLOW: hidden; BORDER-LEFT: #c33 1px solid; WIDTH: 0px; BORDER-BOTTOM: #c33 1px solid; HEIGHT: 0px
}
#view {
BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; WIDTH: 0px; BORDER-BOTTOM: #ddd 1px solid; POSITION: absolute; HEIGHT: 0px
}
#head {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: red; LINE-HEIGHT: 40px; FONT-STYLE: normal; TEXT-ALIGN: center; FONT-VARIANT: normal
}
</STYLE>
<META content="MSHTML 6.00.6000.16735" name=GENERATOR></HEAD>
<BODY>
<DIV id=head></DIV>
<DIV id=smallbox><IMG οnmοusemοve=move(event) id=smallpic
οnmοuseοver="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''"
οnmοuseοut="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"
height=300 src="JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS_CN_files/1.jpg"
width=300 border=0 name=smallpic></DIV>
<DIV id=bigbox style="DISPLAY: none">
<DIV id=bigpico><IMG id=bigpic height=300
src="JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS_CN_files/1.jpg" width=300
border=0 name=bigpic></DIV></DIV>
<DIV οnmοusemοve="move(event) " id=view
style="DISPLAY: none"></DIV></BODY></HTML>
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
