jquery_jqueryに基づいて虫眼鏡効果を実装する

主要モールの詳細ページの商品写真の特殊効果表示。小さい画像の上にマウスをスライドすると、中央の画像が表示されます。jquery の虫眼鏡効果の画像です。ユーザー エクスペリエンス デザインを向上させるための画像拡大鏡表示に似ています。jquery 画像拡大鏡効果は、典型的な画像特殊効果表示です。

レンダリングは次のとおりです:

額縁の初期スタイル:

 <div class="goods-imginfo-bimg-box" style="background-image: url(http://www.od.my/images/201507/thumb_img/142_thumb_P_1435792664520.jpg); position: relative;"></div>

拡大領域枠と拡大効果枠を追加します

picBox=$('.goods-imginfo-bimg-box');
picBox.css('position','relative');
picBox.append('<div class="mag-sbox"></div>');
picBox.append('<div class="mag-box"></div>');

スタイルシートを追加

$("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">');

スタイル

@CHARSET "UTF-";
 .mag-sbox{position: absolute;border: px solid #fff;background-color: rgba(,,,.);cursor: crosshair;z-index: ;display: none;}
 .mag-box{position: absolute;left: %;top:;margin-left: px;border:px solid #ccc;width: %;height:%;
 background-size: cover;background-color: #fff;z-index: ;display: none;
 }
js
 /*
 * 放大镜效果 
 * 不改变前面的代码
 * 添加放大镜效果
 * 给 goods-imginfo-bimg-box；
 * */
 $("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">');
 picBox=$('.goods-imginfo-bimg-box');
 picBox.css('position','relative');
 picBox.append('<div class="mag-sbox"></div>');
 picBox.append('<div class="mag-box"></div>');
 msBox=$('.mag-sbox');
 mBox=$('.mag-box');
 bs=; //倍数
 msBox.css({width:picBox.width()/+'px',height:picBox.height()/+'px'});
 mBox.css({'backgroundSize':bs*+'%'});
 picBox.mousemove(function(e){
  mBox.css('backgroundImage',$(this).css('backgroundImage')); //给大图背景
  if(msBox.css('display')!='block'){ //鼠标放上去，出现范围框和效果框
  msBox.show();
  }
  if(mBox.css('display')!='block'){
  mBox.show();
  }
  /* 鼠标移动 */
  xleft=e.pageX-picBox.offset().left-msBox.width()/;
  if(xleft<){
  xleft=;
  }else if(xleft>picBox.width()-msBox.width()){
  xleft=picBox.width()-msBox.width();
  }
  xtop=e.pageY-picBox.offset().top-msBox.height()/;
  if(xtop<){
  xtop=;
  }else if(xtop>picBox.height()-msBox.height()){
  xtop=picBox.height()-msBox.height();
  }
  msBox.css({'left': xleft+'px','top': xtop+'px'});
  mBox.css({'backgroundPosition':-bs*xleft+'px '+-bs*xtop+'px'});
 });
 picBox.mouseout(function(){
  msBox.hide();
  mBox.hide();
 });

上記のコードは、虫眼鏡効果を実現するために jquery に基づいています。気に入っていただければ幸いです。