基于jquery實現(xiàn)放大鏡效果

更新時間：2015年08月17日 17:36:31 投稿：mrr

大家在逛淘寶的時候，把鼠標(biāo)放在寶貝上就會放大，奇怪這種效果怎么實現(xiàn)的，下面小編就給大家分享基于jquery實現(xiàn)放大鏡效果，有需要的朋友可以參考下

各大商城詳細(xì)頁面產(chǎn)品圖片特效展示，鼠標(biāo)滑過小圖顯示中圖，鼠標(biāo)滑過中圖顯示大圖展示，jquery放大鏡效果圖片類似圖片放大鏡展示，提高用戶體驗設(shè)計，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>

添加放大區(qū)域框和放大效果框

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=; //倍數(shù)
 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'){ //鼠標(biāo)放上去，出現(xiàn)范圍框和效果框
  msBox.show();
  }
  if(mBox.css('display')!='block'){
  mBox.show();
  }
  /* 鼠標(biāo)移動 */
  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實現(xiàn)放大鏡效果，希望大家喜歡。

您可能感興趣的文章: