原生js實現淘寶圖片放大功能

阿新 • • 發佈：2019-01-15

目錄結構：

HTML:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圖片放大</title>
  <link rel="stylesheet" href="./css/main.css">
  <script src="./js/main.js" defer async></script>
</head>
<body>
  <div id="container">
    <div class="leftView">
      <div class="mask"></div>
      <img class="small" src="./img/img.jpg">
    </div>
    <div class="rightView">
      <img class="big" src="./img/img.jpg">
    </div>
  </div>
</body>
</html>

CSS:

@charset "utf-8";

html, body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#container {
  position: relative;
  top: 60px;
  left: 200px;
}
#container .leftView {
  width: 400px;
  height: 400px;
}
#container .leftView .mask {
  width: 160px;
  height: 160px;
  position: absolute;
  display: none;
  cursor: move;
  top: 0;
  left: 0;
  background: rgba(50, 153, 248, 0.4);
}
#container .leftView .small {
  width: 100%;
  height: 100%;
}
#container .rightView {
  width: 400px;
  height: 400px;
  display: none;
  position: absolute;
  top: 0;
  left: 450px;
  overflow: hidden;
}
#container .rightView .big {
  position: absolute;
  top: 0;
  left: 0;
}

JS:

((function() {
  'use strict'
  // 選擇器
  function $(el) {
    return document.querySelector(el)
  }
  // 獲取元素
  let container = $('#container')
  let leftView = $('.leftView')
  let mask = $('.mask')
  let smallImg = $('.small')
  let rightView = $('.rightView')
  let bigImg = $('.big')
  // 顯示放大遮罩與放大的圖片容器
  leftView.addEventListener('mouseover', function() {
    mask.style.display = 'block'
    rightView.style.display = 'block'
  }, false)
  // 隱藏放大遮罩與放大的圖片容器
  leftView.addEventListener('mouseout', function() {
    mask.style.display = 'none'
    rightView.style.display = 'none'
  })
  // 放大遮罩移動放大圖片
  leftView.addEventListener('mousemove', function(evt){
    evt = evt || window.event
    // 獲取當前滑鼠的位置
    let currentMouseX = evt.pageX
    let currentMouseY = evt.pageY
    // 獲取要放大圖片左側與頂部的偏移距離
    let offsetLeft = container.offsetLeft
    let offsetTop = container.offsetTop
    // 獲取放大遮罩的大小
    let maskWidth = mask.offsetWidth
    let maskHeight = mask.offsetHeight
    // 計算滑鼠移動後放大遮罩的位置 位置 = 當前滑鼠的位置 - 偏移距離 - 放大遮罩大小/2
    let zoomMaskX = currentMouseX - offsetLeft - maskWidth / 2
    let zoomMaskY = currentMouseY - offsetTop - maskHeight / 2
    // 限制滑鼠上側與左側的範圍
    if (zoomMaskX <= 0) {
      zoomMaskX = 0
    }
    if (zoomMaskY <= 0) {
      zoomMaskY = 0
    }
    // 限制滑鼠右側與下側的範圍
    let maxScopeX = leftView.offsetWidth - maskWidth
    if (zoomMaskX >= maxScopeX) {
      zoomMaskX = maxScopeX
    }
    let maxkScopeY = leftView.offsetHeight - maskHeight
    if (zoomMaskY >= maxkScopeY) {
      zoomMaskY = maxkScopeY
    }
    mask.style.left = zoomMaskX + 'px'
    mask.style.top = zoomMaskY + 'px'
    // 計算圖片放大比例 比例= (大圖長度 - 大圖父容器長度) / (小圖父容器長度 - 放大遮罩長度)
    let zommProportion = (bigImg.offsetWidth - rightView.offsetWidth) / (leftView.offsetWidth - maskWidth)
    bigImg.style.left = -zommProportion * zoomMaskX + 'px'
    bigImg.style.top = -zommProportion * zoomMaskY + 'px'
  }, false)
})())

效果如下: 點選檢視

原生js實現淘寶圖片放大功能

目錄結構：HTML:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

用原生js實現淘寶詳情頁圖片放大鏡效果

這個功能是我在模仿淘寶詳情頁的時候做出來的，最初版本對於非1:1比例的圖片沒有做處理，後續對程式進行了完善和邏輯上修改，形成了當前的程式。廢話不多說，直接進入正題了，先上個效果圖先放上這段功能的html程式碼<div id="full-pic"> <

原生js實現淘寶輪播圖，支援左右和跳轉（滑鼠點多快都不會亂）。

用transform是因為這個比left的效能好。這個是演示網址（不要直接存下來哦）：https://shalltears.github.io/test-sowing-map/ 。這個是完整程式碼下載地址，覺得還行的下載支援一下：https://download.csdn.ne

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

原生JS實現百度搜索功能

pos pan elements font button stat post :hover ack 　　今天呢給大家分享一下自己用原生JS做的一個百度搜索功能，下面上代碼： <!DOCTYPE html> <html> <head&g

原生js實現點擊復制功能

原生js實現點擊復制功能代碼： <input type="text"> <button>復制</button> <script> var input = document.getElementsByTagName(‘input‘)[0] var button =

原生js實現tab選項卡切換功能

本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s

手把手教小白如何用css+js實現頁面中圖片放大展示效果

1.前言很多童鞋會在專案中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎麼辦？想看就看呀，來來來，我

JS實現淘寶產品放大鏡效果

JS實現淘寶產品放大鏡效果要點： 1、滑鼠往左移，大圖片相當於大圖片盒子往右移 2、滑鼠移動時小圖與大圖的位置關係根據圖片所示的關係應是left / objSmall.offsetWidth-objFloat.offsetWidth=大圖移動的位置 / 整個大圖圖片的offset.o

js實現淘寶放大鏡效果

//獲取要操作的元素 var smallbox = $('.small-box .mask'); var smallimg = $('.small-box img'); var square = $('.square'); va

原生JS實現滑鼠懸停圖片顯示文字效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

js中flexible.js實現淘寶彈性佈局方案

本文的內容就是介紹淘寶彈性佈局方案lib-flexible實踐，分享給大家供大家參考，具體內容如下引入flexible.js 這一步其實非常簡單，只要把flexible.js的內容複製出來，在本地新建一個flexible.js的檔案，開啟貼上進去就

仿淘寶實現滑鼠移入圖片，圖片放大功能

<!doctype html><html><head><meta charset="utf-8"><title>無標題文件</title><style> *{margin: 0;paddin

使用原生js實現仿淘寶放大鏡效果

放大鏡實現步驟 1.獲取元素 2.實現滑鼠移上時顯示小方塊和大圖 3.再新增中圖的移動事件獲取滑鼠的座標付給小方塊注意必須座標還要減去小方塊的寬高的一半讓游標在中間顯示 4.實現大圖同比例的顯示原理:游標移動的座標/大圖移動的座標=中圖的寬度/大圖的寬度求的是大圖

用原生JS實現圖片輪播切換功能

效果如圖：程式碼如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title

純js實現類似淘寶星級評分功能

window.onload=function(){ var div=document.getElementById('d4').getElementsByTagName('div'); var dd=document.getElementById('d4'); var pf=docu

用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能之前臺頁面

group -a com 現在中間數據 bottom margin -m 首先來看一下我已經實現的效果圖：消費者頁面：（本篇隨筆）（1）會顯示店主的頭像（2）當前用戶發送信息顯示在右側，接受的信息，顯示在左側店主或客服頁面：（下一篇隨筆）（1）在左側有一個列

用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能之後臺頁面

聯系人 http esc hold 聊天內容 12px onclick onf pda 在上一篇隨筆中，我們已經看了如何實現前臺的對話功能；前臺我限定了店主只有一人，店鋪只有一個，所有比較單一，但後臺就不一樣了，而後臺更像是我們常見的聊天軟件；當然，前臺也應該實現這種效果，

原生JS實現圖片放大鏡插件

spa ont 範圍 display 離開寬度部分 gin es2017 前言　　我們大家經常逛各種電商類的網站，商品的細節就需要用到放大鏡，這個大家一定不陌生，今天我們就做一個圖片放大鏡的插件，來看看圖片是如何被放大的……

原生js實現購物車相關功能

parse ole child number ble doctype oat gin button <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

原生js實現淘寶圖片放大功能

HTML:

CSS:

JS:

相關推薦