2. 程式人生 > >JS 放大鏡（淘寶商品放大鏡）的實現

JS 放大鏡（淘寶商品放大鏡）的實現

阿新 • • 發佈：2019-02-11 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{

                margin: 100px;
                border
 
: 1px solid #fff;
                position: relative;
            }
            .small{
                position: relative;
                width: 350px;
                height: 350px;
            }
            .mask{
                width: 175px;
                height: 175px;
                background
 
: rgba(255, 255, 0, 0.4);
                position: absolute;
                left: 0;
                top: 0;
                display: none;
                cursor: move;
            }
            .big{
                width: 400px;
                height: 400px;
                border: 1px solid #fff;
                position
 
: absolute;
                top: 0;
                left: 360px;
                overflow: hidden;
                display: none;
            }
        </style>
        <script type="text/javascript" src="js/animate.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                var box = document.getElementsByClassName("box")[0];
                var small = box.children[0];
                var big = box.children[1];
                var bigImg = big.children[0];
                var mask = small.children[1];

                //big和mask在滑鼠移入small時顯示，移出時隱藏
                small.onmouseenter = function(){
                    big.style.display = "block";
                    mask.style.display = "block";
                };
                small.onmouseleave = function(){
                    big.style.display = "none";
                    mask.style.display = "none";
                };

                small.onmousemove = function(event){
                    event = event || window.event;
                    //mask跟隨滑鼠移動，且不會超出small範圍
                    //x作為mask的left值，y作mask的top值。
                    var pagex = event.pageX || scroll().left + event.clientX;
                    var pagey = event.pageY || scroll().top + event.clientY;

                    //減去mask寬高的一半，讓滑鼠在mask的中間
                    var x = pagex - box.offsetLeft - mask.offsetWidth/2;
                    var y = pagey - box.offsetTop - mask.offsetHeight/2;

                    //不讓mask超出small
                    if(x < 0){
                        x=0;
                    }
                    if(x > small.offsetWidth - mask.offsetWidth){
                        x = small.offsetWidth - mask.offsetWidth;
                    }
                    if(y < 0){
                        y=0;
                    }
                    if(y > small.offsetHeight - mask.offsetHeight){
                        y = small.offsetHeight - mask.offsetHeight;
                    }

                    mask.style.left = x + "px";
                    mask.style.top = y + "px";

                    //bigImg隨著mask的移動移動
                    //比例 = 大圖移動的距離/mask移動的距離 = 大圖/小圖
                    var scale = bigImg.offsetWidth / small.offsetWidth;

                    bigImg.style.marginLeft = -scale * x +"px";
                    bigImg.style.marginTop = -scale * y +"px";
                }
            };
        </script>

    </head>
    <body>
        <div class="box">
            <div class="small">
                <img src="img/IMG_2840(1.jpg"/>
                <div class="mask"></div>
            </div>
            <div class="big">
                <img src="img/IMG_2840.JPG"/>
            </div>
        </div>
    </body>
</html>

效果：
這裡寫圖片描述

相關推薦

JS 放大鏡（淘寶商品放大鏡）的實現

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

仿淘寶商品放大鏡效果

效果圖：     原始碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

Python資料分析與挖掘學習筆記（4）淘寶商品資料探索與清洗實戰

一、相關理論： 資料探索的核心： （1）資料質量分析（跟資料清洗密切聯絡） （2）資料特徵分析（分佈、對比、週期性、相關性、常見統計量等） 資料清洗的步驟： （1）缺失值處理（通過describe與len直接發現、通過0資料發現） （2）異常值處理（通過散點圖發現

vue實現星級評價及上傳多張圖片等功能（類似淘寶商品評價頁面）

最近在寫一個關於vue的商城專案，然後整合在移動端中，開發需求中有一介面，類似淘寶商城評價介面！實現效果圖如下所示： 評價頁 點選看大圖，且可左右滑動 功能需求分析 預設為5顆星，為非常滿意，4顆滿意，根據不同星級顯示不同滿意程度。 2.評價內容，最

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

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

抓取淘寶商品資訊並製作商品資訊比價表（以口紅為例）

快速抓取淘寶上口紅資訊 import requests import re import os def getHtmlText(url): try: r=reques

仿淘寶商品詳情頁，上拉檢視更多詳情demo（Activity和Fragment）。2種應用場景

最近專案中有個功能，在課程播放頁，有個講師詳情頁：上面展示文字資訊，下面展示一個webView，但是webView，要通過上拉才出現。網上找的一個開源的demo。對裡面進行了一定的修改，以符合專案要求： https://github.com/cnbleu/

仿淘寶商品詳情頁中（繼續拖動到圖文詳情）

核心view 有2個 一個是自定義的ViewGroup 一個是自定義的ScrollView 首先是自定義的ScrollView public class MyScrollView extends ScrollView { public My

【Android開發—電商系列】（二）：仿淘寶商品屬性標籤頁

一睹為快 　　　　　　 需求 1.動態載入屬性，如尺碼，顏色，款式等 　　由於每件商品的屬性是不確定的，有的商品的屬性是顏色和尺碼，有的是口味，有的是大小，所以這些屬性不能直接寫死到頁面上。 2.動態載入屬性下的標籤

js放大鏡，淘寶效果

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

淘寶之放大鏡

chan cli doc 網頁 需求 height nim ask itl <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <titl

介面taobao.tbk.sc.order.get（淘寶客訂單查詢）避坑指南

發現了訂單查詢介面的幾個東西 ： 1、貌似不用什麼渠道ID，直接可以拿賬號的session去查訂單。 按之前官方的文件，是要配合渠道介面用的，現在獨立出來了。 2、Node.js版的SDK有個bug。 如圖，同一個response資料，一個是raw_body欄位的字串格式資料，一

手機端rem佈局詳解（淘寶無限適配）

這是淘寶的github網址，裡面有適配所需的js還有說明文件 地址：https://github.com/amfe/lib-flexible 1. 問題的引出 最近閱讀白樹的博文《移動web資源整理》時，他在博文中有一段指出，如果html5要適應各種解析度的移動裝置，應該使用rem這樣的尺寸

cnpm（淘寶映象）安裝和使用

為什麼要用cnpm？因為在國內cnpm比npm的安裝速度更快 安裝前置條件：已安裝node.js 開啟dos命令列視窗 執行npm install -g cnpm --registry=https://registry.npm.taobao.org安裝映象 使用c

Android面試彙總（百度+360+Tencent+淘寶+Qualcomm+HTC）

彙總筆者經歷了一些來自百度，360，淘寶，騰訊，高通中國，htc上海的電話面試及現場面試，還有筆試相關題目 百度：百度在北京中關村上地七街奎科科技大廈，不大但是很安靜的一個辦公地點。 百度技術面試分為兩輪，第一輪基礎技術面試，一般為專案負責人，主要考察基本知識及知識廣度，第二輪面試一般為部門負責 人，主要考察

rem 手機端rem佈局 （淘寶）

淘寶就是使用了rem佈局，並且免費給我使用，使用步驟很簡單，安裝引入就ok，十分強大與方便安裝npm i -S amfe-flexible引入<meta name="viewport" content="width=device-width, initial-scale

（淘寶無限適配）手機端rem佈局詳解

從網易與淘寶的font-size思考前端設計稿與工作流 本文結合自己對網易與淘寶移動端首頁html元素上的font-size這個屬性的思考與學習，討論html5設計稿尺寸以及前端與設計之間協作流程的問題，內容較多，但對你的技術和工作一定有價值，歡迎閱讀和點評：）。

（淘寶無限適配）手機端rem佈局詳解（轉載非原創）

從網易與淘寶的font-size思考前端設計稿與工作流 本文結合自己對網易與淘寶移動端首頁html元素上的font-size這個屬性的思考與學習，討論html5設計稿尺寸以及前端與設計之間協作流程的問題，內容較多，但對你的技術和工作一定有價值，歡迎閱讀和點評：）。 這是淘

手機適配（淘寶）

(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size func

Vue 自定義彈出框元件（類似淘寶選擇規格）

  底部選擇 實現效果 1.彈出效果新增動畫 2.直接呼叫元件，呼叫方法為： <select-rules ref="colorSelect" :price="price" :mainPic="mianUrl" @getCartNum="getC