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); 
    }

};

　　

posted @ 2013-01-27 01:45  GM_Lv  阅读(475)  评论(0)    收藏  举报