淘宝放大镜：
分析：
有三个元素， 左边的元素内部有一张小的背景图片， 内部有一个镜片元素， 与其相对应的右边有一个存放大图片的盒子。
交互：
首先让镜片和大盒子天生隐藏，
当鼠标进去小图片元素的时候， 要让镜片和大图片元素出现。
移动鼠标时候，让镜片元素跟随移动。
鼠标位置和镜片的关系是什么？
鼠标位置- 镜片的宽度/高度的一半，可以让鼠标位于镜片的中点位置。
获取鼠标的位置也就获取了镜片定位值。
赋值给镜片元素定位值。
进行镜片元素的边界限定。
根据镜片元素移动的位置，按照比例移动大图片的背景定位值即可。
1. 简易放大镜
没有淘宝放大镜的一些交互功能，比如刚开始只有小图一张，鼠标移入小图产生镜片和放大的大图，可以在小图中随意动，大图跟随小图的位置进行放大操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
width: 400px;
height: 400px;
top: 200px;
left: 100px;
border: 1px solid red;
background-image: url("images/small.jpg");
background-size: cover;
}
#glass {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
background-color: rgba(0, 0, 200, .4);
}
#box1 {
position: absolute;
left: 550px;
top: 200px;
width: 400px;
height: 400px;
background-image: url("images/big.jpg");
}
</style>
</head>
<body>
<div id="box">
<div id="glass"></div>
</div>
<div id="box1"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");
var glass = document.getElementById("glass");
var box1 = document.getElementById("box1");
// 添加事件
glass.onmousedown = function(e) {
// 获取鼠标的按下的位置
var mouse_x = e.clientX;
var mouse_y = e.clientY;
// 获取glass的定位值
var left = glass.offsetLeft;
var top = glass.offsetTop;
// 添加鼠标移动事件
document.onmousemove = function(e) {
// 获取鼠标移动后的距离
var m_x = e.clientX;
var m_y = e.clientY;
// 进行边界限定
var resultX = m_x - mouse_x + left;
var resultY = m_y - mouse_y + top
// 左右距离判定
if (resultX < 0) {
resultX = 0
} else if (resultX > box.clientWidth - glass.clientWidth) {
resultX = box.clientWidth - glass.clientWidth
}
// 上下距离判定
if (resultY < 0) {
resultY = 0
} else if (resultY > box.clientHeight - glass.clientHeight) {
resultY = box.clientHeight - glass.clientHeight
}
// 改变元素的定位值
glass.style.left = resultX + "px";
glass.style.top = resultY + "px";
// 改变大图片背景定位值
box1.style.backgroundPosition = - 2 * resultX + "px " + - 2 * resultY + "px";
}
}
// 取消鼠标移动事件
document.onmouseup = function() {
document.onmousemove = null;
}
</script>
</body>
</html>2. 淘宝放大镜
刚开始只有小图一张，鼠标移入小图产生镜片和放大的大图，可以在小图中随意动，大图跟随小图的位置进行放大操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
width: 400px;
height: 400px;
top: 200px;
left: 100px;
border: 1px solid red;
background-image: url("images/small.jpg");
background-size: cover;
}
#glass {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
background-color: rgba(0, 0, 200, .4);
display: none;
}
#box1 {
position: absolute;
left: 550px;
top: 200px;
width: 400px;
height: 400px;
background-image: url("images/big.jpg");
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="glass"></div>
</div>
<div id="box1"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");
var glass = document.getElementById("glass");
var box1 = document.getElementById("box1");
// 当鼠标进入小图片的时候，要让镜片和大图片出现
box.onmouseenter = function() {
glass.style.display = "block";
box1.style.display = "block";
}
// 当鼠标进入小图片的时候，要让镜片和大图片消失
box.onmouseleave = function() {
glass.style.display = "none";
box1.style.display = "none";
}
// 获取元素到页面的距离
var box_style = offset(box);
var box_left = box_style.left;
var box_top = box_style.top;
// 在box里面鼠标移动，要让镜片跟随鼠标移动
box.onmousemove = function(e) {
// 获取鼠标到页面的距离
var p_x = e.pageX;
var p_y = e.pageY;
// 获取鼠标移动的位置
var x = p_x - box_left;
var y = p_y - box_top;
// 定义移动距离
var resultX = x - glass.clientWidth / 2;
var resultY = y - glass.clientHeight / 2;
// 判定边界
if (resultX < 0) {
resultX = 0
} else if (resultX > box.clientWidth - glass.clientWidth) {
resultX = box.clientWidth - glass.clientWidth
}
// 边界判定
if (resultY < 0) {
resultY = 0
} else if (resultY > box.clientHeight - glass.clientHeight) {
resultY = box.clientHeight - glass.clientHeight
}
// 暂时定义元素的定位值
glass.style.left = resultX + "px";
glass.style.top = resultY + "px";
// 改变大图片的背景定位值
box1.style.backgroundPosition = - 2 * resultX + "px " + - 2 * resultY + "px";
}
function offset(dom) {
// 定义信号量
var isIE8 = false;
// 定义浏览器信息
var str = window.navigator.userAgent;
// 检测浏览器
if (str.indexOf("MSIE 8.0") === -1) {
// console.log("不是IE8")
isIE8 = false;
} else {
// console.log("是IE8")
isIE8 = true;
}
// for (; dom != document.body; dom = offsetParent)
// 定义对象
var result = {
left: dom.offsetLeft,
top: dom.offsetTop
}
// 使用while循环
while (dom != document.body) {
// 获取定位父元素
dom = dom.offsetParent;
// 判定
if (isIE8) {
// 说明是IE8 不需要额外加上 外边框
result.left += dom.offsetLeft;
result.top += dom.offsetTop;
} else {
// 不是IE8 所以要加上边框的值
result.left += dom.offsetLeft + dom.clientLeft;
result.top += dom.offsetTop + dom.clientTop;
}
}
// 返回对象
return result;
}
</script>
</body>
</html>3. 兼容IE的淘宝放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
width: 400px;
height: 400px;
top: 200px;
left: 100px;
border: 1px solid red;
background-image: url("images/small.jpg");
background-size: cover;
}
#glass {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
background: rgb(0, 0, 200);
filter: alpha(opacity=50);
background-color: rgba(0, 0, 200, .4);
display: none;
}
#box1 {
position: absolute;
left: 550px;
top: 200px;
width: 400px;
height: 400px;
background-image: url("images/big.jpg");
display: none;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="box">
<img src="images/small.jpg "alt="">
<div id="glass"></div>
</div>
<div id="box1"></div>
<script type="text/javascript" src="js/offset.js"></script>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");
var glass = document.getElementById("glass");
var box1 = document.getElementById("box1");
// 当鼠标进入小图片的时候，要让镜片和大图片出现
box.onmouseenter = function() {
glass.style.display = "block";
box1.style.display = "block";
}
// 当鼠标进入小图片的时候，要让镜片和大图片消失
box.onmouseleave = function() {
glass.style.display = "none";
box1.style.display = "none";
}
// 获取元素到页面的距离
var box_style = offset(box);
var box_left = box_style.left;
var box_top = box_style.top;
// 在box里面鼠标移动，要让镜片跟随鼠标移动
box.onmousemove = function(e) {
// 兼容IE
var e = e || window.event;
// 获取鼠标到页面的距离
var p_x = e.clientX;
var p_y = e.clientY + document.documentElement.scrollTop;
// 获取鼠标移动的位置
var x = p_x - box_left;
var y = p_y - box_top;
// 定义移动距离
var resultX = x - glass.clientWidth / 2;
var resultY = y - glass.clientHeight / 2;
// 判定边界
if (resultX < 0) {
resultX = 0
} else if (resultX > box.clientWidth - glass.clientWidth) {
resultX = box.clientWidth - glass.clientWidth
}
// 边界判定
if (resultY < 0) {
resultY = 0
} else if (resultY > box.clientHeight - glass.clientHeight) {
resultY = box.clientHeight - glass.clientHeight
}
// 暂时定义元素的定位值
glass.style.left = resultX + "px";
glass.style.top = resultY + "px";
// 改变大图片的背景定位值
box1.style.backgroundPosition = - 2 * resultX + "px " + - 2 * resultY + "px";
} function offset(dom) {
// 定义信号量
var isIE8 = false;
// 定义浏览器信息
var str = window.navigator.userAgent;
// 检测浏览器
if (str.indexOf("MSIE 8.0") === -1) {
// console.log("不是IE8")
isIE8 = false;
} else {
// console.log("是IE8")
isIE8 = true;
}
// for (; dom != document.body; dom = offsetParent)
// 定义对象
var result = {
left: dom.offsetLeft,
top: dom.offsetTop
}
// 使用while循环
while (dom != document.body) {
// 获取定位父元素
dom = dom.offsetParent;
// 判定
if (isIE8) {
// 说明是IE8 不需要额外加上 外边框
result.left += dom.offsetLeft;
result.top += dom.offsetTop;
} else {
// 不是IE8 所以要加上边框的值
result.left += dom.offsetLeft + dom.clientLeft;
result.top += dom.offsetTop + dom.clientTop;
}
}
// 返回对象
return result;
}IE兼容性：
获取body、html:
dom中 document.body 获取的是body
dom中 document.documentElement 获取的是html
页面卷动值:
document.documentElement.scrollTop 火狐、IE新版本的chrome 都支持
document.body.scrollTop 其他浏览器和旧版本的chrome支持
IE中的透明度：
filter: alpha(opacity=[0-100])
高级浏览器中的透明度：
opacity:[0-1]
1826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
