pc端网页特效
offset系列概述
简介
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到元素的位移、大小等
- 获取元素距离带有父级元素的位置
- 获取元素自身大小（宽度高度）
- 注意：返回数值不带单位
offset系列相关属性
| offset系列属性 |
作用 |
| element.offsetParent |
返回作为该元素带有父级元素 如果父级都没有定位则返回body |
| element.offsetTop |
返回元素相对带有定位父元素的上方的位移 |
| element.offsetLeft |
返回元素相对带有定位父元素左边框的位移 |
| element.offsetWidth |
返回自身包括padding、边框、内容区的宽度，返回的数值不带有单位 |
| element.offsetHeigth |
返回自身包括padding、边框、内容区的高度，返回值不带单位 |
offset与style区别
- offset可以得到内部样式的宽度，高度属性，而style只能得到行内样式的宽度高度
- offset系列获得的数值没有单位，style返回的是带有单位的字符串
- offset返回的数值包括内边距、外边距，而style只返回内容宽高
- offset的属性只能读取，style的属性可读可写
- 所以offset获取大小比较好，style修改样式比较好
案例1：获取鼠标在盒子点击的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
height: 500px;
background-color: coral;
position: fixed;
left: 30%;
top: 30%;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.addEventListener('click', function(e) {
console.log(e.pageX-div.offsetLeft)
console.log(e.pageY-div.offsetTop)
})
</script>
</body>
</html>
案例2：鼠标拖动盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
border: 0;
margin: 0;
}
.link {
position: absolute;
left: 40%;
background-color: cyan;
}
#bg {
display: none;
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
}
.nav {
text-align: center;
line-height: 60px;
font-size: 20px;
width: 100%;
height: 60px;
border-bottom: 2px solid black;
/*background-color: red;*/
}
.login {
display: none;
background-color: white;
z-index: 5;
position: fixed;
border: 2px solid black;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
/*background-color: darkblue;*/
}
form > div {
width: 100%;
height: 25px;
font-size: 19px;
line-height: 25px;
margin-top: 40px;
text-align: center;
}
input {
outline: none;
padding: 0 4px;
font-size: 18px;
border: 1px solid;
border-color: darkgrey;
}
#submit {
position: relative;
}
#username {
padding-left: 9px;
}
#username > input {
width: 300px;
height: 35px;
}
#password > input {
width: 300px;
height: 35px;
}
#submit > input {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin: -15px 0 0 -100px;
}
</style>
</head>
<body>
<div class="link"><a href="#">点我，立即登录</a></div>
<div class="login">
<div class="nav">登录信息</div>
<form action="1111.html" method="get">
<div id="username">用户名: <input type="text" placeholder="请输入用户名" name="dd"></div>
<div id="password">登录密码: <input type="password" placeholder="请输入登录密码" name="ddd"></div>
<div id="submit"><input type="submit" value="登录信息"></div>
</form>
</div>
<!--覆盖层-->
<div id="bg"></div>
<script>
var link = document.querySelector('.link');
link.addEventListener('click', function () {
bg = document.querySelector('#bg')
login = document.querySelector('.login')
bg.style.display = 'block';
login.style.display = 'block';
})
var nav = document.querySelector('.nav')
nav.addEventListener('mousedown', function (e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
document.addEventListener('mousemove', move)
function move(e) {
nav.style.cursor = 'move'
login.style.left = (e.pageX - x + 250) + 'px';
login.style.top = (e.pageY - y + 150) + 'px';
}
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
nav.style.cursor = 'unset'
})
})
</script>
</body>
</html>
案例3：京东查看图片案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.yuan {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
}
.huang {
display: none;
z-index: 4;
position: absolute;
width: 400px;
height: 400px;
background-color: rgba(168, 187, 33, .5);
}
.yuan > img {
width: 100%;
height: 100%;
}
.bian > img {
position: absolute;
width: 1000px;
height: 1000px;
}
.bian {
position: relative;
overflow: hidden;
display: none;
float: left;
width: 700px;
height: 700px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="yuan">
<div class="huang"></div>
<img src="image/1.png" alt=""></div>
<div class="bian"><img src="image/1.png" alt="" id="d"></div>
<script>
var huang = document.querySelector('.huang')
var yuan = document.querySelector('.yuan')
var bian = document.querySelector('.bian')
var big = document.querySelector('#d')
yuan.addEventListener('mouseover', function () {
yuan.style.cursor = 'move'
huang.style.display = 'block'
bian.style.display = 'block'
})
yuan.addEventListener('mouseout', function () {
yuan.style.cursor = 'unset'
huang.style.display = 'none'
bian.style.display = 'none'
})
yuan.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var temp = 0;
if (x >= 400) {
temp = 400 - 200;
} else if (x <= 200) {
temp = 0 ;
} else {
temp = x - 200;
}
huang.style.left = temp+'px'
big.style.left = -1.5*temp+'px'
if (y >= 400) {
temp = 400 - 200 ;
} else if (y <= 200) {
temp = 0 ;
} else {
temp = y - 200;
}
huang.style.top = temp+'px'
big.style.top = -1.5*temp+'px'
})
</script>
</body>
</html>
元素可视区client系列
简介
- client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等
client相关属性
| client系列属性 |
作用 |
| element.clientTop |
返回元素上边框的大小 |
| element.clientLetf |
返回元素左边框的大小 |
| element.clientWidth |
返回自身包括padding,内容宽度,不含边框,返回数值不带单位 |
| element.clientHeigth |
返回自身包含padding,内容高度,不含边框,返回数值不带单位 |
立刻执行函数
写法
- (function(形参){})(实参);
- (function(形参){}(实参));
简介
- scroll翻译过来就是滚动,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等
| scroll系列属性 |
作用 |
| element.scrollTop |
返回被卷去的上侧距离,返回数值不带单位 |
| element.scrollLeft |
返回被卷去的左侧距离,返回数值不带单位 |
| element.scrollWidth |
返回自身实际的宽度,不含边框,返回数值不带单位 |
| element.scrollHeigth |
返回自身实际的身高,不含边框,返回数值不带单位 |
