前端JS電商放大鏡效果_ZenDei技術網路在線

前端JS電商放大鏡效果

-Advertisement-

前端JS電商放大鏡效果： ...

前端JS電商放大鏡效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-電商放大鏡</title>
    <style type="text/css">
        
    *{
        padding: 0;
        margin: 0;
    }
    #left{
      padding: 0;
    margin: 0;
        width: 400px;
        height: 400px;
        border: 2px solid blue;
        background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;
        float: left;
        cursor: crosshair;
        position: relative;
    box-sizing: border-box;
    }
    #box{
        width: 200px;
        height: 200px;
        background: white;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    box-sizing: border-box;
    }
    #cover{
        width: 400px;
        height: 400px;
        background: red;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    box-sizing: border-box;
    }
    #right{
        width: 400px;
        height: 400px;
        border: 2px solid black;
        overflow: hidden;
        position: relative;
        display: none;
    box-sizing: border-box;
    }
    #rpic{
        position: absolute;
    }
    </style>

    <script type="text/javascript">
        
    window.onload = function(){
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var rpic = document.getElementById("rpic");
        var box = document.getElementById("box");
        var cover = document.getElementById("cover");

        // 給左側加滑鼠移動事件
        cover.onmousemove = function(){

            //獲得事件對象
            var ev = window.event;
            var mouse_left = ev.offsetX || ev.layerX;
            var mouse_top = ev.offsetY || ev.layerY;
            // document.title = mouse_left + '|' +  mouse_top;

            //計算色塊的位置
            var box_left = mouse_left - 100;
            var box_top = mouse_top - 100;

            // 判斷是否超出
            if (box_left < 0) {
                box_left = 0;
            }
            if (box_left > 200) {
                box_left = 200;
            }
            if (box_top < 0) {
                box_top = 0;
            }
            if (box_top > 200) {
                box_top = 200;
            }

            // 讓色塊移動
            box.style.left = box_left + 'px';
            box.style.top = box_top + 'px';

            //計算右側圖片位置
            var rpic_left = box_left*-2;
            var rpic_top = box_top*-2;

            // 讓右側移動
            rpic.style.left = rpic_left + 'px';
            rpic.style.top = rpic_top + 'px';

        }

            //給左側加滑鼠移入事件
            cover.onmouseover = function(){
                // 讓左側色塊和右側隱藏
                box.style.display = 'block';
                right.style.display = 'block';
            }

            // 給左側加滑鼠移出事件
            cover.onmouseout = function(){
                // 讓左側色塊和右側隱藏
                box.style.display = 'none';
                right.style.display = 'none';
            }
    }

    </script>
</head>
<body>
    <div id="left">
        <div id="box"></div>
        <div id="cover"></div>
    </div>
    <div id="right">
        <img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic">
    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JSON創建鍵值對（key是中文或者數字）方式詳解

JSON創建鍵值對（key是中文或者數字）方式詳解先準備好一個空的json對象 1. 最原始的方法 2. 使用json[key]的方式(這邊key即使是中文也沒事) 3.使用json['key']的方式 "JSON取值方式（key為數字或者字元串）詳解" ...
async簡單使用

node的非同步io雖然好用，但是控制非同步流程確實一個比較麻煩的事情，比如在爬蟲中控制併發數量，避免併發過大導致網站宕機或被加入黑名單。因此需要一個工具來控制併發，這個工具可以自己寫或者使用async(官方文檔點擊這裡)。代碼基於node 8.x，如版本過低可能會出現錯誤。說明 async本身有七十 ...
npm 的作用

接觸 npm 也有一個多月的時間了，一直只是將他作為當著 webstorm + node.js 環境中的一個插件來用（甚至說把她當著命令來用）。畢竟大部分的時間，他是輸入的命令行中的一部分（別笑，小新人真的會存在這個問題）。這幾天決定好好整理一下關於 npm ，收藏在這了。 1、安裝現在 npm ...
ajax提交漢字到後臺保存時亂碼問題！

前端（轉換）： var param = XXXXXXXXXXXXXXXXXX; param = decodeURIComponent(param,true); param = encodeURI(param, "UTF-8"); $.post('<%=request.getContextPath() ...
css3 選擇器權重問題（第二部分）

這篇博文有關css的權重問題，我個人認為這是css知識中很重要的一個知識點。因為在開發的過程能中我們會經常遇到這種問題，特別是如果你使用框架的時候，有些框架的某些標簽有一些預設的樣式。所以我們可以通過增加權重的方式來使我們所寫的樣式有效。既然說到權重那就必然要說起權重的等級以及權重值。 css的權重 ...
jQuery學習(一)——jQuery入門

1、jQuery基礎 Jquery它是一個庫(框架)，要想使用它，必須先引入！ jquery-1.8.3.js：一般用於學習階段。 jquery-1.8.3.min.js：用於項目使用階段官網下載後，複製到當前WEB項目的js文件夾下，如下：引入代碼：<script type="text/jav ...
canvas圖形處理和進階用法

[1]圖形變換 [2]矩陣變換 [3]全局陰影 [4]全局透明 [5]圖形合成 [6]裁剪區域 [7]圖像繪製 [8]使用圖像數據 [9]模式 [10]非零環繞 [11]交互 ...
Node.js之使用Buffer類處理二進位數據

Node.js之使用Buffer類處理二進位數據 Buffer類可以在處理TCP流或文件流時處理二進位數據，該類用來創建一個專門存放二進位數據的緩存區。 1. 創建Buffer對象 1.1 直接創建： bur = new BUffer(123) //123 為bur緩存區長度 1.2 初始化緩存區內 ...