2. 程式人生 > >js實現淘寶放大鏡效果

js實現淘寶放大鏡效果

阿新 • • 發佈：2019-01-14
//獲取要操作的元素 var smallbox = $('.small-box .mask'); var smallimg = $('.small-box img'); var square = $('.square'); var bigbox = $('.big-box'); var bigimg = $('.big-box img'); var imgs = $all('.img-list img'); //滑鼠經過圖片列表顯示被選中，實現圖片切換 for
(var i = 0; i < imgs.length; i++){ imgs[i].onmouseover = function(){ for(var j = 0; j < imgs.length; j++){ imgs[j].className = ''; } this.className = 'active'; //改變對應的圖片連結 smallimg.src = this
.getAttribute('data-small'); bigimg.src = this.getAttribute('data-big'); }; } //滑鼠移入放大器顯示並設定選中框的大小 smallbox.onmouseover = function(){ square.style.display = 'block'; bigbox.style.display = 'block'; //位置w/smallimg.w = bigbox.w/bigimg.w
square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + 'px'; square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + 'px'; }; //滑鼠移出放大器隱藏 smallbox.onmouseout = function(){ square.style.display = 'none'; bigbox.style.display = 'none'; }; //放大器移動 //獲取滑鼠的位置 smallbox.onmousemove = function(ev){ var oEvent = ev || event; var x = oEvent.offsetX - square.offsetWidth/2; var y = oEvent.offsetY - square.offsetHeight/2; if(x < 0){ x = 0; } if(x > smallbox.offsetWidth - square.offsetWidth){ x = smallbox.offsetWidth - square.offsetWidth; } if(y < 0){ y = 0; } if(y > smallbox.offsetHeight - square.offsetHeight){ y = smallbox.offsetHeight - square.offsetHeight; } //給選中框定位 square.style.left = x + 'px'; square.style.top = y + 'px'; //給放大器定位 x/? = smallimg.w/bigimg.w bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + 'px'; bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + 'px'; }; //通過名稱查詢某個元素 function $(name){ return document.querySelector(name); } //通過名稱查詢相同的一組資料 function $all(name){ return document.querySelectorAll(name); }

相關推薦

js實現淘寶放大鏡效果

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

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

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

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

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

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

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

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

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

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

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

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

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

淘寶放大鏡例子（js）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

js實現京東購物放大鏡和選項卡效果

購物網站點選商品後，都會有一個檢視物品圖片，並且可以放大仔細觀察物品的功能。這個功能看起來複雜，其實實現起來非常簡單。下面我們來一起做這個小效果吧！ 首先，我們看一下頁面的佈局： 1.小圖片顯示區，上面有一個方形遮罩層 2.縮圖橫向列表 3.大圖顯

js——input框實現淘寶一樣的點選後商品數量的增加和減少

 <script>               //商品數量的增加                 function number(){                 var Input0=document.getElementById('input0');                 va

vue實現結算淘寶購物車效果

-a -c each ack borde 模型 == clear 合計 實現單選時的價格，全選時價格 單選效果圖 全選效果圖 html <template> <!-- 淘寶結算購物車 --> <div class="set

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

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

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

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

JS實現ul,li排序效果

for char 列表 clas pre oct btn code elements <!DOCTYPE html> <html> <head> <title>js列表排序</title> <

js實現div吸頂效果

src ons posit 全局變量 mar document padding addclass type <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script

vue實現淘寶商品詳情頁屬性選擇功能

line pan func sel eth AD 圖片 [1] urn 方法一是自己想出來的，方法二來自忘記哪裏看到的了 不知道是不是你要的效果： 方法一：利用input[type="radio"] css代碼： 1 input { 2

PYTHON 爬蟲筆記十:利用selenium+PyQuery實現淘寶美食數據搜集並保存至MongeDB（實戰項目三）

pre pager 淘寶 NPU group color 存在 pan rgs 利用selenium+PyQuery實現淘寶美食數據搜集並保存至MongeDB 目標站點分析 流程框架 爬蟲實戰 spider詳情頁 import pymongo im

通過雲伺服器實現淘寶京東搶拍器

馬上就要雙十一了，想在淘寶上幫女朋友搶一些禮物，網上下載了幾個搶拍器，普遍都有問題，最終還是決定自己製作一個搶拍器。由於秒殺也受到網路和系統環境的影響，這裡打算使用高速穩定點的雲主機來協助實現。 在雲主機的選擇上，必須是能直接連線主幹網路的雲主機，否則網路延遲和在家裡上網區別不大。（開始以為阿里雲秒殺會更快

通過雲服務器實現淘寶京東搶拍器

__file__ odin 家裏 png bdr 模擬瀏覽器 pro 按鈕 baidu 馬上就要雙十一了，想在淘寶上幫女朋友搶一些禮物，網上下載了幾個搶拍器，普遍都有問題，最終還是決定自己制作一個搶拍器。由於秒殺也受到網絡和系統環境的影響，這裏打算使用高速穩定點的雲主機來協

JS實現雪花飄落特效效果

1、概述： 以任意圖片作為背景，在背景上新增雪花下落的特效效果，此處使用隨機顏色、隨機大小的彩色雪花實現。 2、效果實現功能： （1）雪花隨機出現並隨機消失； （2）雪花出現時大小隨機； （3）雪花顏色隨機； （4）雪花顏色逐漸變淡並消失； （5）雪花消失後刪除其物件