純js仿淘寶京東商品放大鏡功能

更新時間：2017年03月02日 14:51:18 作者：fff_vow

本文主要介紹了純js仿淘寶京東商品放大鏡功能的實例。具有很好的參考價值，下面跟著小編一起來看下吧

效果圖：

代碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>無標題</title>
 <style>
 *{
  margin: 0px;
  padding: 0px;
 }
 .imgContent{
  width: 420px;
  height: 300px;
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
 }
 .imgContent>img{
  width: 420px;
  height: 300px;
 }
 </style>
</head>
<body>
 <div class="imgcontent" id="imgContent1">
 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488436622116&di=e3c2b2a5c847d6051d8daaec9a9a2131&imgtype=0&src=http%3A%2F%2F2a.zol-img.com.cn%2Fproduct%2F174_1200x900%2F888%2FceeY9tJ1QRFLk.jpg" alt="iphone7">
 </div>
</body>
<script>
 /*大致功能的思路：(完全按照自己的想法去實現(xiàn)的功能，肯定有很多地方優(yōu)化，希望大家一起討論)
 1、有一個放原始圖片的盒子
 2、當鼠標移入這個盒子，在右側(cè)創(chuàng)建一個相同大小的鏡像盒子，鏡像盒子里創(chuàng)建一個放大4倍的鏡像圖片，同時也在原始盒子里創(chuàng)建一個放大鏡（若存在就display:block，若不存在就創(chuàng)建，鏡像盒子同理）
 3、當鼠標移動時，原始盒子里的放大鏡跟隨鼠標移動（類似拖拽功能），鏡像盒子里的圖片的top和left值是原始盒子里放大鏡的top和left值的-4倍
 4、當鼠標移出原始盒子時,隱藏鏡像盒子和放大鏡*/
 function Scaler(id){
 var me = this
 var originalDiv = document.querySelector("#"+id)
 var mirrorDiv = null
 var mirrorImg = null
 var scaler = null
 var real_left = originalDiv.offsetLeft
 var real_right = originalDiv.offsetWidth+originalDiv.offsetLeft
 var real_top = originalDiv.offsetTop
 var real_bottom = originalDiv.offsetHeight+originalDiv.offsetTop
 //創(chuàng)建鏡像盒子
 this.createMirror = function(){
  var originalStyle = getComputedStyle(originalDiv)
  mirrorDiv = document.createElement("div")
  mirrorDiv.style.cssText = 'width:'+originalStyle.width+
      ';height:'+originalStyle.height+
      ';position:absolute;left:'+originalStyle.width+
      ';top:0px;margin-left:10px;overflow:hidden;';
  //創(chuàng)建鏡像圖片
  mirrorImg = document.createElement("img")
  mirrorImg.style.cssText = 'width:'+(originalDiv.offsetWidth*4)+
      'px;height:'+originalDiv.offsetHeight*4+'px;position:absolute;top:0px;left:0px;'
  mirrorImg.src = document.querySelector("#"+id+" img").src
  mirrorDiv.appendChild(mirrorImg)
  originalDiv.appendChild(mirrorDiv)
 }
 //創(chuàng)建放大鏡
 this.createScaler = function(left,top){
  scaler = document.createElement("div")
  scaler.style.cssText = 'width:100px;height:100px;background-color:yellow;opacity:0.4;position:absolute;'
  scaler.style.top = top;
  scaler.style.left = left; 
  originalDiv.appendChild(scaler)
 }
 //設(shè)置鏡像圖片位置
 this.setImgPosition = function(left,top){
  mirrorImg.style.left = '-'+left+'px'
  mirrorImg.style.top = '-'+top+'px'
 }
 //鼠標移入事件
 this.e_mouseover = function(){
  originalDiv.style.cursor = "move"
  if (!mirrorDiv) {
  me.createMirror()
  }else{
  mirrorDiv.style.display = "block"
  };
  if (!scaler) {
  me.createScaler(0,0)
  }else{
  scaler.style.display = "block"
  };
 }
 //鼠標移出事件
 this.e_mouseleave = function(){
  mirrorDiv.style.display = "none"
  scaler.style.display = "none"
 }
 //鼠標移動事件(關(guān)鍵代碼)
 this.e_mousemove = function(e){
  // 判斷鼠標是否移出原始盒子
  if (e.clientX > real_right || e.clientX < real_left || e.clientY > real_bottom || e.clientY < real_top ) {
  me.e_mouseleave()
  return false
  };
  // 鼠標到原始盒子頂部的距離
  var padTop = e.clientY-real_top
  // 鼠標到原始盒子左側(cè)的距離
  var padLeft = e.clientX-real_left
  //放大鏡跟隨鼠標移動(-50是因為讓鼠標在放大鏡的中心)
  scaler.style.top = padTop-50;
  scaler.style.left = padLeft-50;
  //因為鏡像圖片放大了4倍，所以跟隨移動的時候是4倍
  me.setImgPosition((padLeft-50)*4,(padTop-50)*4)
 }
 //注冊事件監(jiān)聽
 originalDiv.onmouseover = me.e_mouseover
 originalDiv.onmouseleave = me.e_mouseleave
 originalDiv.onmousemove = function(e){
  me.e_mousemove(e)
 }
 }
 // 創(chuàng)建圖片放大功能對象,參數(shù)為原始盒子id即可(放大鏡大小，鏡像圖片放大倍數(shù)都可設(shè)為參數(shù)傳遞)
 new Scaler("imgContent1")
</script>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: