图片放大镜效果


图片放大镜效果_第1张图片
 

注释:* 测试兼容it8,ff,chome,其余浏览器未测试;
         * ff和chrome中需要设置图片的高度宽度;

<!doctype html>
<html>
    <head><meta charset="gb2312">
        <title></title>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
        <style>
            .goods_img {
                cursor: pointer;
                float: left;
                padding: 0;
                position: relative;
                width: 342px;
                height: 455px;
                margin-left: 200px;
            }
            .bigImg{display: block;}
            body{ margin: 10px auto;}
        </style>
    </head>
    <body>
        <div class="goods_img">
            <img id="mediumImg" src="small_img.jpg" zoomSrc="big_img.jpg"/>
        </div>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
    </body>
<script>
 /*
  * sImg:小图片的jquery对象;
  * 小图片中的zoomSrc存储大图片的地址;
  * 测试兼容it8,ff,chome,360;
  * ff和chrome中需要设置图片的高度宽度;
  ***keimon***2013-01-07***
 */
function showBigImg(sImg){
  var sContent = sImg[0].parentNode;
  var sWidth = sImg.width() || 345; //chrome中不能自动获得图片的宽度和高度,需设置;
  var sHeight = sImg.height() || 455;//
  var sLeft = $(sContent).offset().left;
  var sTop = $(sContent).offset().top;
  var sLeft = $(sContent).offset().left;
 
  var bLeft = sLeft+sWidth+10;
  var bTop = sTop;
  var bImgSrc = sImg.attr('zoomSrc');
 
  //放置大图片的div框
  var bContent = document.createElement('div');
  var bContentStyle = {
     width:sWidth+'px',
  height:sHeight+'px',
  left : bLeft+'px',
  top : bTop +'px',
  border :'1px solid #000',
  overflow : 'hidden',
  visibility : 'hidden',
  position: 'absolute'
  }
  $(bContent).css(bContentStyle);
  $('body').get(0).appendChild(bContent);
  var bigImg = document.createElement('img');
  $(bigImg).attr({'id':'bImg','src':bImgSrc});
  var bigImgStyle = {
    position:'absolute',
 top:'0px',
 left:'0px',
 width:'1200px',  //需要设置大图的宽度和高度,否则ff浏览器中存在问题;
 height:'1600px'  //
  }
  $(bigImg).css(bigImgStyle);
  bContent.appendChild(bigImg);
  //$(bContent).append($('<img id="bImg" style="position:absolute; top:0px; left:0px;">'))
  //$('#bImg').attr('src',bImgSrc);
 
  var bWidth = $('#bImg').width();
  var bHeight = $('#bImg').height();
  var hoverDivWidth = sWidth/bWidth * sWidth;
  var hoverDivHeight = sHeight/bHeight * sHeight;
  $('#a').html('hoverDivWidth'+hoverDivWidth);
  $('#b').html('sWidth'+sWidth);
  $('#c').html('bWidth'+bWidth);
 
  //鼠标移入时,在小图片上的div框
  var hoverDiv = document.createElement('div');
  var hoverDivStyle = {
   width:hoverDivWidth + 'px',
  height:hoverDivHeight + 'px',
  border:'1px solid #fff',
  backgroundColor:'#fff',
  position:'absolute',
  visibility : 'hidden',
  left:'0px',
  top:'0px',
  zIndex:999,
  opacity:0.5
  }
  $(hoverDiv).css(hoverDivStyle);
  sContent.appendChild(hoverDiv);
  //鼠标在小图片上移动时,hoverDiv的位置发生变化,大图片的位置也发生变化;
  $(sContent).mousemove(function(e){
    var x = e.pageX;
 var y = e.pageY;
 var sx = x - sLeft - hoverDivWidth/2;
 if(sx<0){
   sx = 0;
 }else if(sx>(sWidth-hoverDivWidth)){
   sx = sWidth-hoverDivWidth;
 }
 var sy = y - sTop - hoverDivHeight/2;
 if(sy<0){
   sy = 0;
 }else if(sy>(sHeight-hoverDivHeight)){
   sy = sHeight-hoverDivHeight;
 }
 $(hoverDiv).css('visibility','visible');
 //hoverDiv
 
 $(hoverDiv).css('left', sx+'px');
 $(hoverDiv).css('top', sy+'px');
 //大图片
 $('#bImg').css('visibility','visible');
 var bx = -sx/sWidth*bWidth;
 var by = -sy/sHeight*bHeight;
 $('#bImg').css('left',bx+'px');
 $('#bImg').css('top',by+'px'); 
  })
  $(sContent).mouseout(function(){
    $(hoverDiv).css('visibility','hidden');
 $('#bImg').css('visibility','hidden')
  })
}

//调用放大镜方法
$(function(){
var sImg = $('#mediumImg');
showBigImg(sImg);
})

</script>
</html>

你可能感兴趣的:(jquery)