jquery_jqueryに基づいて虫眼鏡効果を実装する-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:44:33

オリジナル

1228 人が閲覧しました

主要モールの詳細ページの商品写真の特殊効果表示。小さい画像の上にマウスをスライドすると、中央の画像が表示されます。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 に基づいています。気に入っていただければ幸いです。