图片局部放大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>图片局部放大</title> <style> body { font-size: 12px; } #origin { float: left; width: 400px; height: 300px; margin-right: 16px; overflow: hidden; cursor: url(point.ico), auto; } #origin img { display: block; } #zoom { float: left; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; display: none; } #detail { float: left; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; } </style> </head> <body> <div id="origin"> <img src="win7.jpg" id="srcImg" /> </div> <div id="zoom"> <img id="zoomImg" /> </div> <div id="detail"> 详细说明 </div> <script type="text/javascript" src="jquery-1.3.1.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //获取两个图片对象 var oImg = $('#srcImg'); var nImg = $('#zoomImg'); //获取原始图片的宽,高以及宽/高比 var oW = oImg.width(); var oH = oImg.height(); var bal = oW / oH; //获取图片展示区的宽度和高度 var originW = $('#origin').width(); var originH = $('#origin').height(); //console.log(originW); //获取将被缩小的系数zoomRate if (bal >= 4 / 3 && oW > originW) { //如果图片比较宽并且过界的话 var zoomRate = oW / originW; //originW展示区图片区域; //oImg为原来的那个显示区域； oImg.width(originW); //console.log(oImg.width(originW).attr("width")); oImg.height(originW / bal); //console.log(originW / bal); //console.log(oImg.height(originW / bal).attr("height")); // oImg.show(); } else if (oH > originH) { //如果图片比较高并且过界 var zoomRate = oH / originH; oImg.height(originH); oImg.width(originH * bal); //oImg.show(); } else { // oImg.show(); $('#origin').css('cursor', 'default'); return } //设置放大图片的url地址 nImg.attr('src', oImg.attr('src')); //获取原始图片的位置 var oPos = oImg.offset(); // console.log(oPos); var w = oImg.width() / zoomRate / 2; var h = oImg.height() / zoomRate / 2; /* console.info(w); console.info(h); */ oImg.bind('mouseover', function(){ $('#detail').hide(); $('#zoom').show(); }); oImg.bind('mouseout', function(){ $('#detail').show(); $('#zoom').hide(); }); oImg.bind('mousemove', function(event){ var x = event.pageX - oPos.left; x = x < (oImg.width() - w) ? x < w ? w : x : oImg.width() - w; nImg.css('marginLeft', (w - x) * zoomRate); var y = event.pageY - oPos.top; y = y < (oImg.height() - h) ? y < h ? h : y : oImg.height() - h; nImg.css('marginTop', (h - y) * zoomRate); }); }); </script> </body></html>
页:
[1]