放大鏡

時間 2019-11-18

標籤放大鏡简体版

原文原文鏈接

放大鏡,效果圖

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 350px;
        height: 350px;
        border: 1px solid #000;
        margin: 200px;
        position: relative;
    }

    #big {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 360px;
        display: none;
    }

    #mask {
        width: 175px;
        height: 175px;
        background: paleturquoise;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.3;
        display: none;
        cursor: move;
    }

    #small {
        position: relative;
    }

    #bigImg {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <div id="box">
        <div id="small">
            <!--小圖區-->
            <img src="001.jpg" alt="" />
            <div id="mask"></div>
            <!--遮罩層-->
        </div>
        <div id="big">
            <!--大圖區-->
            <img src="0001.jpg" alt="" id="bigImg" />
        </div>
    </div>
</body>

</html>
<script src="common.js"> </script>
<script type="text/javascript">
    let $box = $('#box');
    let $small = $('#small');
    let $big = $('#big');
    let $mask = $('#mask');
    let $bigImg = $('#bigImg');

    $small.onmouseover = function () {
        $mask.style.display = "block";

    }
    $mask.onmousedown = function (e) {
        e = e || window.event;
        let x = e.offsetX;
        let y = e.offsetY;
        document.onmousemove = function (e) {
            e = e || window.event;
            l = e.pageX - $box.offsetLeft - x;
            t = e.pageY - $box.offsetTop - y;
            let maxX = $small.offsetWidth - $mask.offsetWidth;
            let maxY = $small.offsetHeight - $mask.offsetHeight;
            l = l < 0 ? 0 : (l > maxX ? maxX : l);
            t = t < 0 ? 0 : (t > maxY ? maxX : t);
            $mask.style.left = l + 'px';
            $mask.style.top = t + 'px';
            // return false;
            $big.style.display = "block";
            $bigImg.style.left = - parseInt((16/7) * l) + 'px';
            $bigImg.style.top = - parseInt((16/7) * t) + 'px';
        }
    }
    document.onmouseout = function () {
        document.onmousemove = null;
        $mask.style.display = "none";
        $big.style.display = "none";
    }
</script>

common.js

//  判斷數組是否還有這個元素
function include(arr, item) {
    for(var i = 0; i < arr.length; i++) {
       if(arr[i] === item) {
           return true;
       } 
    }
    return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return i;
        } 
     }
     return -1;
}

// 任意區間隨機整數
function getRandom(max, min) {
    min = min || 0;
    if(min > max) {
        var a = min;
        min = max;
        max = a;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

// 數組去重
function noRepeat(arr) {
    var __arr = [];
    for(var i = 0; i < arr.length; i++) {
        // 存在返回true, 不存在返回false
        var bool = __arr.indexOf(arr[i])
        if(bool == -1) {
            __arr.push(arr[i]);
        }
    }
    return __arr;
}

function $(ele) {
    return document.querySelector(ele);
}
function $A(ele) {
    return document.querySelectorAll(ele);
}

function getRandomColor() {
    var str = '0123456789abcdef';
    var color = '#';
    for(var i = 0; i < 6; i++) {
        color += str[getRandom(str.length - 1)];
    }
    return color;
}

// 格式化url, 獲取參數
function parseUrl(url) {
    var obj = {};
    url = url.split('?')[1].split('#')[0];
    url = url.split('&');
    url.forEach(function (x) {
        var arr = x.split('=');
        obj[arr[0]] = arr[1];
    })
    return obj;
}

// 獲取非行內樣式
function getStyle(ele, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr]
    }
    return ele.currentStyle[attr];
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。