js--图片放大
在各类网站可见到大量图片放大的例子，无聊就实现了个简单的，不想借助别人写得插件，看了人家的代码都写得很抽象...
html部分：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta charset="UTF-8"> <title>js tupian fangda</title> <link rel="stylesheet" href="css/test.css"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <script type="text/javascript" > </script> </head> <body> <div id="head">pic loading</div> <div id="demo"> <div id="smallbox"> <img src="images/yh.jpg" id="smallpic" > </div> <div id="bigbox"> <div id="bigpico"> <img src="images/yh.jpg" id="bigpic" > </div> </div> <div id="view" ></div> </div> </body> </html>
css部分：
body{
margin:0;
padding:0;
}
img { border:0; display:block; }
#head{
text-align:center;
line-height:40px;
font:bold;
color:red;
}
#demo {
width:100%;
height:600px;
margin:0px;
}
#smallbox {
width:0px;
height:0px;
overflow:hidden;
border:1px solid #c33;
float:left;
}
.view{
width:0px;
height:0px;
border:1px solid #c33;
position:absolute;
}
#bigbox {
width:0px;
height:0px;
overflow:hidden;
float:left;
border:1px #c33 solid;
}
js部分：（还有点小问题，hover触发不连续，明天继续改下..）
window.onload =function(){
PIC.start();
}
var PIC = {
srcX : 1024,//原图的大小
srcY : 768,
bigX : 200, //预览窗大小
bigY : 400,
smallX : 400, //缩略图的大小
smallY : 100,
border : 10,
viewX : 0, //预览范围
viewY : 0,
b1 :0,
start : function(){
$('#head').text("图片已载入.");
PIC.smallY = PIC.srcY * PIC.smallX /PIC.srcX;
PIC.viewX = PIC.bigX / PIC.srcX * PIC.smallX;
PIC.viewY = PIC.bigY / PIC.srcY * PIC.smallY;
PIC.b1 = PIC.srcX/PIC.smallX;
console.log("VIEW:"+PIC.viewX+","+PIC.viewY);
$('#smallpic').css('width',PIC.smallX);
$('#smallpic').css('height',PIC.smallY);
console.log('smallpic_width = '+$('#smallpic').width()+',smallpic_heigth='+$('#smallpic').height());
$('#bigpic').css('width',PIC.srcX);
$('#bigpic').css('height',PIC.srcY);
$('#view').css('width',PIC.viewX);
$('#view').css('height',PIC.viewY);
$('#smallbox').css('border',PIC.border);
$('#bigbox').css('border',PIC.border);
if(window.event){ //is ie
console.log("gag");
$('#smallbox').css('width',$('#smallpic')[0].offsetWidth+PIC.border*2);
$('#smallbox').css('height',$('#smallpic')[0].offsetHeight+PIC.border*2);
$('#bigbox').css('width',$('#bigpic')[0].offsetWidth +PIC.border*2);
$('#bigbox').css('height',$('#bigpic')[0].offsetHeight+PIC.border*2);
}else { //is ff
$('#smallbox').css('width',$('#smallpic')[0].offsetWidth);
$('#smallbox').css('height',$('#smallpic')[0].offsetHeight);
$('#bigbox').css('width',$('#bigpic')[0].offsetWidth);
$('#bigbox').css('height',$('#bigpic')[0].offsetHeight);
}
console.log($('#smallbox').width());
// $('#bigbox').hide();
$('#smallpic').hover(PIC.eventOver,PIC.eventOut);
},
eventOver: function(){
var e = window.event ? window.event : e;
console.log('e='+e);
var iebug = 0;
if(window.event){ //ie
var vX = e.offsetX - PIC.viewX/2;
var vY = e.offsetY - PIC.viewY/2;
}else{
var vX = e.pageX - $('#smallbox').width() - border;
var vY = e.pageY - $('#smallbox').height() - border;
iebug = 2;
}
console.log('mousekey:'+e.offsetX+","+e.offsetY);
if(vX<0) vX = 0;
if(vY<0) vY = 0;
if(vX>PIC.smallX - PIC.viewX - iebug)
if(vY>PIC.smallY - PIC.viewY -iebug)
vY = PIC.smallY - PIC.viewY - iebug;
$('#bigpic').css('margin-left',-vX*PIC.b1);
$('#bigpic').css('margin-top',-vY*PIC.b1);
$('#view').css('left',vX+$('#smallbox').width()+PIC.border);
$('#view').css('top',vX+$('#smallbox').height()+PIC.border);
console.log('bigpic:'+$('#bigpic').offset().left);
},
eventOut: function(){
console.log('out='+event);
}
};
