1.图片跟着鼠标飞
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a1ccfdda0aa9510d7f94559adf4213eb.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
img{
position: absolute;
}
</style>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />
<script src="common.js"></script>
<script>
//图片跟着鼠标飞,可以在任何的浏览器中实现
//window.event和事件参数对象e的兼容
//clientX和clientY单独的使用的兼容代码
//scrollLeft和scrollTop的兼容代码
//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop
//把代码封装在一个函数
//把代码放在一个对象中
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();
},
//相对于页面的纵坐标(pageY或者是clientY+scrollTop)
getPageY:function (evt) {
return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
};
//最终的代码
document.onmousemove=function (e) {
my$("im").style.left=evt.getPageX(e)+"px";
my$("im").style.top=evt.getPageY(e)+"px";
};
// var obj={
// sayHi:function () {
// console.log("考尼奇瓦");
// this.eat();//this就是obj这个对象
// },
// eat:function () {
// console.log("饭以ok,下来密西吧");
// }
//
// };
// //调用sayHi方法的同时,调用eat方法,是否可以在一个方法中调用另一个方法?
// //在对象的方法中调用另一个方法如何调用?
//
// obj.sayHi();
</script>
</body>
</html>
2.拖拽的对话框
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/618f037a67ef6612feefcc5d211186d9.gif)
<!DOCTYPE html>
<html>
<head lang="en">
<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="common.js"></script>
<script>
//获取超链接,注册点击事件,显示登录框和遮挡层
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>
<script>
//点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框
// my$("link").onclick=function (e) {
// my$("login").style.display="block";
// //return false;
// //e.preventDefault();
// //上面的两个是阻止默认事件的
// //下面的两个是阻止事件冒泡的
// //window.event.cancelBubble=true;
// e.stopPropagation();
// };
// document.onclick=function () {
// my$("login").style.display="none";
// console.log("隐藏了");
// };
</script>
</body>
</html>
3.放大镜
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/77cacd43dab30b3e03814981337ef90f.gif)
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>
//获取需要的元素
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>
4.滚动条的案例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a3151735c1e8b489aff682a5608cfbe0.gif)
<!DOCTYPE html>
<html>
<head lang="en">
<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="common.js"></script>
<script>
//获取需要的元素
//最外面的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>
5.元素隐藏的不同方式
//隐藏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";