拖拽放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 10000px;
}
.zoom {
border: 1px solid #ccc;
width: 350px;
height: 350px;
position: absolute;
top: 345px;
left: 116px;
}
.zoom .small {
width: 100%;
height: 100%;
}
.zoom .small img {
width: 100%;
height: 100%;
}
.zoom .small .glass {
position: absolute;
top: 0;
left: 0;
width: 153px;
height: 153px;
background-color: rgba(36, 201, 98, .5);
}
.big {
position: absolute;
left: 110%;
top: 0;
width: 350px;
height: 350px;
overflow: hidden;
border: 1px solid #ccc;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="zoom" class="zoom">
<div class="small" id="small">
<img src="./images/111.bmp">
<div class="glass" id="glass"></div>
</div>
<div class="big" id="big">
<img id="bigImg" src="./images/222.bmp">
</div>
</div>
<script>
// 获取元素
var glass = document.getElementById("glass");
var small = document.getElementById("small");
var bigImg = document.getElementById("bigImg");
var r = 350 / 800;
// 鼠标按下事件
glass.onmousedown = function (e) {
// 获取元素现在的 定位值
var left = glass.offsetLeft;
var top = glass.offsetTop;
// 鼠标位置
var mouseX = e.clientX;
var mouseY = e.clientY;
// 添加鼠标移动事件
document.onmousemove = function (e) {
// 获取鼠标移动后的位置
var movedX = e.clientX;
var movedY = e.clientY;
var resultX = movedX - mouseX + left;
var resultY = movedY - mouseY + top;
if (resultX < 0) {
resultX = 0;
} else if (resultX > small.offsetWidth - glass.offsetWidth) {
resultX = small.offsetWidth - glass.offsetWidth;
}
if (resultY < 0) {
resultY = 0;
} else if (resultY > small.offsetHeight - glass.offsetHeight) {
resultY = small.offsetHeight - glass.offsetHeight
}
glass.style.left = resultX + "px";
glass.style.top = resultY + "px";
bigImg.style.left = -resultX / r + 'px'
bigImg.style.top = -resultY / r + 'px'
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
document.onselectstart = function () {
return false;
}
// H5中新增的事件
document.ondragstart = function() {
return false;
}
</script>
</body>
</html>
淘宝放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 10000px;
}
.zoom {
border: 1px solid #ccc;
width: 350px;
height: 350px;
position: absolute;
top: 345px;
left: 116px;
}
.zoom .small {
width: 100%;
height: 100%;
}
.zoom .small img {
width: 100%;
height: 100%;
}
.zoom .small .glass {
position: absolute;
top: 10px;
left: 10px;
width: 153px;
height: 153px;
background-color: rgba(36, 201, 98, .5);
}
.big {
position: absolute;
left: 110%;
top: 0;
width: 350px;
height: 350px;
overflow: hidden;
border: 1px solid #ccc;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="zoom" class="zoom">
<div class="small" id="small">
<img src="./images/111.bmp">
<div class="glass" id="glass"></div>
</div>
<div class="big" id="big">
<img id="bigImg" src="./images/222.bmp">
</div>
</div>
<script src="blueBag.js"></script>
<script>
// 获取元素
var glass = document.getElementById("glass");
var small = document.getElementById("small");
var bigImg = document.getElementById("bigImg");
var r = 350 / 800;
var big = document.getElementById("big")
//获取对象
var obj = blueBag.offset(small); // {left: 100, top: 200}
// big隐藏
big.style.display = "none";
// glass隐藏
glass.style.display = "none"
small.onmouseenter = function () {
big.style.display = "block";
glass.style.display = "block"
}
small.onmouseleave = function () {
big.style.display = "none";
glass.style.display = "none"
}
small.onmousemove = function (e) {
// 获取鼠标在页面中的位置
var pageX = e.pageX;
var pageY = e.pageY;
var x = pageX - obj.left - glass.clientWidth / 2;
var y = pageY - obj.top - glass.clientHeight / 2;
if (x < 0) {
x = 0;
} else if (x >= small.clientWidth - glass.clientWidth) {
x = small.clientWidth - glass.clientWidth;
}
if (y < 0) {
y = 0;
} else if (y >= small.clientHeight - glass.clientHeight) {
y = small.clientHeight - glass.clientHeight;
}
glass.style.left = x + "px";
glass.style.top = y + "px";
bigImg.style.left = -x / r + 'px'
bigImg.style.top = -y / r + 'px'
}
</script>
</body>
</html>
blueBag js文件
var blueBag = {
// 求随机整数 [start - end]
rand: function (start, end) {
return parseInt(Math.random() * (end - start + 1)) + start;
},
// 求m的n次方
pow: function (m, n) {
var shuzi = 1;
for (var i = 0; i < n; i++) {
shuzi *= m;
}
return shuzi
},
// 求num的阶乘
jc: function (num) {
if (num === 1) {
return 1;
}
return num * jc(num - 1);
},
// 获取计算后样式
getCss: function (dom, cssProperty) {
if (window.getComputedStyle) {
var cssObj = getComputedStyle(dom);
return cssObj[cssProperty]
} else {
var cssObj = dom.currentStyle;
return cssObj[cssProperty]
}
},
bindEvent: function (dom, type, fun) {
if (dom.addEventListener) {
dom.addEventListener(type, fun, false);
} else if (dom.attachEvent) {
dom.attachEvent("on" + type, fun);
} else {
dom["on" + type] = fun
}
},
offset: function(dom) {
// 定义一个对象
var obj = {
left: dom.offsetLeft,
top: dom.offsetTop
}
dom = dom.offsetParent;
// 循环
while (dom != document.body) {
obj.left += dom.offsetLeft +dom.clientLeft;
obj.top += dom.offsetTop + dom.clientTop;
dom = dom.offsetParent;
}
return obj;
}
}