主頁(yè) > 知識(shí)庫(kù) > 用JS實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果

用JS實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果

熱門(mén)標(biāo)簽:地圖標(biāo)注市場(chǎng)怎么樣 聊城智能電銷(xiāo)機(jī)器人外呼 企業(yè)怎么在聯(lián)通申請(qǐng)400電話 泰州泰興400電話 怎么申請(qǐng) 百度地圖添加標(biāo)注圖標(biāo)樣式 南京新思維電話機(jī)器人 如何用中國(guó)地圖標(biāo)注數(shù)字點(diǎn) 好操作的電話機(jī)器人廠家 南昌市地圖標(biāo)注app

放大鏡效果就是把鼠標(biāo)移到圖片上的時(shí)候,旁邊會(huì)有另外一張大的圖片展示,放大鏡效果,那這樣的效果怎樣實(shí)現(xiàn)的呢,我把代碼發(fā)給大家,請(qǐng)大家參考。

!DOCTYPE html>
html lang="en">
head>
 meta charset="UTF-8">
 title>放大鏡/title>
 style>
 *{margin:0;padding: 0;}
 #warp{width: 1184px;height:500px;margin:50px auto 0;background-color: #ccc;overflow: hidden;padding: 10px;position: relative;}
 #warp #minbox{width: 350px;height: 350px;float: left;position: relative;}
 #maxbox{width: 400px;height: 400px;position: absolute;left: 380px;overflow: hidden;display: none;}
 #maxbox img{width: 800px;height: 800px;position: absolute;}
 #con{float: left;margin-left: 20px;}
 #meng{width: 175px;height: 175px;position: absolute;background-color:yellow;opacity:0.4;filter:alpha(opacity=40);left: 0;top: 0;display: none;}
 /style>
/head>
body>
 div id="warp">
 div id="minbox">
  img src="images/min.jpg" alt="">
  p id="meng">/p>
 /div>
 div id="maxbox">
  img src="images/max.jpg" alt="">
 /div>
 div id="con">
  img src="images/msg.png" alt="">
 /div>
 /div>
 script>
 var minbox=document.getElementById('minbox');
 var meng=document.getElementById('meng');
 var maxbox=document.getElementById('maxbox');
 var maximg=maxbox.getElementsByTagName('img')[0];
 var minimg=minbox.getElementsByTagName('img')[0];
 function offsetTL(obj){
  var ofL=0,ofT=0;
  while(obj){
  ofL+=obj.offsetLeft+obj.clientLeft;
  ofT+=obj.offsetTop+obj.clientTop;
  obj=obj.offsetParent;
  }
  return{left:ofL,top:ofT};
 }
 minbox.onmousemove=function(e){
  var e=e||window.event;
  meng.style.display='block';
  maxbox.style.display='block';
  var niubi1=e.clientX-offsetTL(minbox).left-meng.clientWidth/2;//蒙板的X坐標(biāo)
  var niubi2=e.clientY-offsetTL(minbox).top-meng.clientHeight/2;//蒙板的Y坐標(biāo)
  var bili=maximg.clientWidth/minimg.clientWidth;
  if (niubi1=0) {
  niubi1=0;
  }else if (niubi1>=minbox.clientWidth-meng.clientWidth) {
  niubi1=minbox.clientWidth-meng.clientWidth;
  }
  if (niubi2=0) {
  niubi2=0;
  }else if (niubi2>=minbox.clientHeight-meng.clientHeight) {
  niubi2=minbox.clientHeight-meng.clientHeight;
  }
  console.log(niubi1);
  console.log(niubi2);
  meng.style.left=niubi1+'px';
  meng.style.top=niubi2+'px';
  maximg.style.left=-parseInt(meng.style.left)*bili+'px';
  maximg.style.top=-parseInt(meng.style.top)*bili+'px';
 }
 minbox.onmouseout=function(){
  meng.style.display='none';
  maxbox.style.display='none';
 }
 /script>
/body>
/html>

效果如下:

希望本文所述對(duì)大家javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:
  • js實(shí)現(xiàn)淘寶瀏覽商品放大鏡功能
  • JS實(shí)現(xiàn)電商商品展示放大鏡特效
  • javascript實(shí)現(xiàn)商品圖片放大鏡
  • 純js仿淘寶京東商品放大鏡功能
  • 原生js仿淘寶網(wǎng)商品放大鏡效果
  • 原生js實(shí)現(xiàn)商品放大鏡效果
  • 基于JavaScript實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果
  • js放大鏡放大圖片效果
  • 用js實(shí)現(xiàn)放大鏡的效果的簡(jiǎn)單實(shí)例
  • js實(shí)現(xiàn)購(gòu)物網(wǎng)站放大鏡功能

標(biāo)簽:臨汾 開(kāi)封 銅川 自貢 白銀 烏蘭察布 山南 吉林

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《用JS實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果》,本文關(guān)鍵詞  用,實(shí)現(xiàn),購(gòu)物網(wǎng)站,商品,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《用JS實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于用JS實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章