目录
- 图片跟着鼠标飞案例----最终版本---兼容代码的封装
- 拖拽案例----
- 滚动条案例---
- 放大镜的案例---
案例：图片跟着鼠标飞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
height: 10000px;
}
img{
position: absolute;
}
</style>
</head>
<body>
<img id="im" src="images/01.jpg" alt="">
<script src="js/common.js"></script>
<script>
document.onmousemove = function(e) {
// my$('im').style.left = e.clientX + "px";
// my$('im').style.top = e.clientY + "px";
// 最终的代码
my$('im').style.left = evt.getPageX(e) + "px";
my$('im').style.top = evt.getPageY(e) + "px";
};
</script>
<script type="text/javascript">
// 把代码封装在一个函数中
var evt = {
// window.event和事件参数对象e的兼容
getEvent: function(evt) {
return window.event || evt;
},
// 可视区域的横坐标的兼容代码
getClientX: function(evt) {
return this.getEvent(evt).clientX;
},
// 可视区域纵坐标的兼容代码
getClientY: function(evt) {
return this.getEvent(evt).clientY;
},
// 页面向左卷曲出去的横坐标
getScrollLeft: function() {
return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
},
// 页面向上卷曲出去的纵坐标
getScrollTop: function() {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
},
// 相当于页面的横坐标(pageX或者是clientX+scrollLeft）)
getPageX: function(evt) {
return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft();
},
getPageY: function(evt) {
return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
}
}
</script>
</body>
</html>
案例：拖拽的对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
padding: 0px;
margin: 0px;
}
.login {
width: 512px;
position: absolute;
border: #ebebeb solid 1px;
height: 280px;
left: 50%;
right: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
margin-left: -250px;
margin-top: 140px;
display: none;
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
display: none;
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!--登录框-->
<div id="bg" class="login-bg"></div>
<!--遮挡层-->
<script src="js/common.js"></script>
<script type="text/javascript">
// 获取超链接.注册点击事件,显示登录框和遮罩层
my$('link').onclick = function() {
my$('login').style.display = "block";
my$('bg').style.display = "block";
}
// 获取关闭,注册点击事件,隐藏登录框和遮罩层
my$('closeBtn').onclick = function() {
my$('login').style.display = "none";
my$('bg').style.display = "none";
};
// 按下鼠标,移动鼠标,移动登录框
my$('title').onmousedown = function(e) {
//获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
var spaceX = e.clientX - my$("login").offsetLeft;
var spaceY = e.clientY - my$("login").offsetTop;
//移动的事件
document.onmousemove = function(e) {
//新的可视区域的横坐标-spaceX=====>新的 值----登录框的left属性
var x = e.clientX - spaceX + 250;
var y = e.clientY - spaceY - 140;
my$('login').style.left = x + "px";
my$('login').style.top = y + "px";
};
document.onmouseup = function() {
document.onmousemove = null;
};
};
</script>
</body>
</html>
案例：组织超链接跳转
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com" id="ak">百度</a>
<script src="js/common.js"></script>
<script type="text/javascript">
my$('ak').onclick = function() {
alert("被点击了");
// return false;
window.event.preventDefault(); //阻止浏览器的默认事件
}
</script>
</body>
</html>
div的滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div>
啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了啦啦啦啦安安静静加加加安监局明晚妈妈妈妈妈妈 拉了我来了了,...
</div>
</body>
</html>
案例：自定义滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿
</div>
<!--文字内容-->
<div id="scroll" class="scroll">
<!--装滚动条的层-->
<div class="bar" id="bar"></div>
<!--滚动条-->
</div>
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
// 最外面的div
var box = my$('box');
// 文字div
var content = my$('content');
// 装滚动条的div ----容器
var scroll = my$('scroll');
//滚动条
var bar = my$('bar');
// 设置滚动条的高度
// 滚动条的高/装滚动条的div的高=box的高/文字div的高;
// 滚动条的高=装滚动条的div的高*box的高/文字div的高;
var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
bar.style.height = height + "px";
// 移动滚动条
bar.onmousedown = function(e) {
var spaceY = e.clientY - bar.offsetTop;
document.onmousemove = function(e) {
//移动事件
var y = e.clientY - spaceY;
y = y < 0 ? 0 : y;
y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;
bar.style.top = y + "px";
// 设置鼠标移动的时候,文字不被选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// 滚动条的移动距离/文字div的移动距离=滚动条最大的移动距离/文字div的最大移动距离
// 文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离
var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);
// 设置文字div的移动距离
content.style.marginTop = -moveY + "px";
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
</script>
</body>
</html>
元素隐藏的不同方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn" />
<div id="dv"></div>哈哈
<script src="js/common.js"></script>
<script type="text/javascript">
my$('btn').onclick = function() {
// 隐藏div
// 不占位
// my$('dv').style.display = "none";
//占位
// my$('dv').style.visibility="hidden";
// 占位
// my$('dv').style.opacity=0;
// 占位
my$('dv').style.height = "0px";
my$('dv').style.border = "0px solid red";
};
</script>
</body>
</html>
案例：表格隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
cursor: pointer;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
1
</td>
<td>柳岩</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>苍老师</td>
<td>日语</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>凤姐</td>
<td>营销学</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>芙蓉姐姐</td>
<td>数学</td>
<td>10</td>
</tr>
<tr>
<td>
5
</td>
<td>佐助</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>卡卡西</td>
<td>体育</td>
<td>100</td>
</tr>
<tr>
<td>
7
</td>
<td>乔峰</td>
<td>体育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
// 先获取所有的行
var trs = my$('j_tb').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
console.log(i)
trs[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
// 鼠标进入
trs[i].onmouseover = mouseoverHandle;
// 鼠标离开
trs[i].onmouseout = mouseoutHandle;
}
// 当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开后再回复
var lastColor = "";
function mouseoverHandle() {
lastColor = this.style.backgroundColor;
this.style.backgroundColor = "green";
};
function mouseoutHandle() {
this.style.backgroundColor = lastColor;
};
</script>
</body>
</html>
案例：tab切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="http://www.baidu.com">首页</a>
</li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相册</a></li>
<li><a href="javascript:void(0)">关于</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
</ul>
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
// 获取所有li的标签
var liObjs = my$('list').getElementsByTagName('li');
// 遍历,找到每个li中的a注册点击事件
for (var i = 0; i < liObjs.length; i++) {
// 每个li中的a
var aObj = getFirstElement(liObjs[i]);
aObj.onclick = function() {
for (var j = 0; j < liObjs.length; j++) {
console.log(liObjs[i])
// 把这个a所在的li的所有的兄弟元素的类样式全部移除
liObjs[j].removeAttribute('class');
}
// 当前点击的a的父级元素li(点击的这个a所在的父级元素li）),设置背景颜色
this.parentNode.className = "current";
// 组织超链接跳转
return false;
}
}
</script>
</body>
</html>
案例：大量字符串拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="拼接吧" id="btn" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<script src="js/common.js"></script>
<script type="text/javascript">
// 字符串特效:不可比性
// document.getElementById('btn').onclick = function() {
// var str = "";
// var inputs = document.getElementsByTagName('input');
// // 每个文本框的属性值
// for (var i = 0; i < inputs.length - 1; i++) {
// if (inputs[i].type != "button") {
// str += inputs[i].value + "|";
// }
// }
// my$('btn').value = str += inputs[inputs.length - 1].value
// console.log(str += inputs[inputs.length - 1].value);
// };
// 推荐使用 数组的方式拼接大量字符串
document.getElementById('btn').onclick = function() {
var str = [];
var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type != "button") {
str.push(inputs[i].value);
}
}
console.log(str.join("|"));
};
</script>
</body>
</html>
案例：无刷新评论
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table id="tb" border="1">
<tbody id="tbd">
<tr>
<td>猪猪:</td>
<td>我喜欢吃肉</td>
</tr>
</tbody>
</table>
<div>
昵称:<input type="text" value="" id="userName" /><br />
<textarea name="" id="tt" cols="30" rows="10"></textarea><br />
<input type="button" value="评论一下" id="btn" /><br />
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
my$('btn').onclick = function() {
// 获取昵称的元素
var userName = my$('userName');
// 获取评论的元素
var tt = my$('tt');
// 创建行
var tr = document.createElement('tr');
// 行加到tbody中
my$('tbd').appendChild(tr);
// 创建列
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML = userName.value;
// 创建列
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.innerHTML = tt.value;
// 清空
userName.value = "";
tt.value = "";
}
</script>
</body>
</html>
相关js：
/**
* 获取父级元素中的第一个子元素
* @param element 父级元素
* @returns {*} 父级元素中的子级元素
*/
function getFirstElement(element) {
if (element.firstElementChild) {
return element.firstElementChild;
} else {
var node = element.firstChild;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
案例：放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<!--小层-->
<img src="images/small.png" width="350" alt="" />
<div class="mask"></div>
<!--遮挡层-->
</div>
<!--小图-->
<div class="big">
<!--大层-->
<img src="images/big.jpg" width="800" alt="" />
<!--大图-->
</div>
<!--大图-->
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
var box = my$('box');
// 获取小图的div
var small = box.children[0];
// 遮罩层
var mask = small.children[1];
// 获取大图的div
var big = box.children[1];
//获取大图
var bigImg = big.children[0];
// 鼠标进入显示遮罩层和大图的div
box.onmouseover = function() {
mask.style.display = "block";
big.style.display = "block";
};
// 鼠标离开时 隐藏遮罩层和大图的div
box.onmouseout = function() {
mask.style.display = "none";
big.style.display = "none";
};
// 鼠标移动事件---鼠标是在小层上移动
small.onmousemove = function(e) {
// 鼠标此时的可视区域的横坐标和纵坐标
// 主要是设置鼠标在遮罩层的中间显示
var x = e.clientX - mask.offsetWidth / 2;
var y = e.clientY - mask.offsetHeight / 2;
//主要是margin的100px的问题
x = x - 100;
y = y - 100;
// 横坐标的最小值
x = x < 0 ? 0 : x;
// 纵坐标的最小值
y = y < 0 ? 0 : y;
// 横坐标的最大值
x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
// 纵坐标的最大值
y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
// 为遮罩层的left和top赋值
mask.style.left = x + "px";
mask.style.top = y + "px";
//遮罩层的移动距离/大图的移动距离=遮罩层的最大移动距离/大图的最大移动距离
// 大图的移动距离=遮罩层的移动距离*大图的最大移动距离/遮罩层的最大移动距离
// 大图的横向最大移动距离
var maxX = bigImg.offsetWidth - big.offsetWidth;
// 大图的纵坐标的最大的移动距离
var maxY = bigImg.offsetHeight - big.offsetHeight;
// 大图的横向移动的坐标
var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);
// 设置图片移动
bigImg.style.marginLeft = -bigImgMoveX + "px";
bigImg.style.marginTop = -bigImgMoveY + "px";
};
</script>
</body>
</html>
网友评论