放大镜

放大镜,效果图

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];
}

posted on 2019-03-09 14:29 风往南阅读(112) 评论(0) 编辑收藏举报