目录
立即执行函数
不需要调用，立马执行。创建的函数内部是独立的作用域。
声明方式
主要作用：创建一个独立的作用域，避免命名冲突。
//声明方式1
(function(){
console.log('hello...');
}());
//声明方式2 立即执行函数的传参
(function(a){
console.log(a);
})(1)offset系列-元素偏移量
作用：使用offset系列相关属性可以动态获取元素的位置(偏移量)，大小等。
offset系列常用属性
| offset系列属性 | 作用 |
| offsetParent(注意大小写) | 返回调用元素的父元素，如果无父元素，则返回body |
| offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| offsetWidth | 返回自身宽度(包括自身内容宽度，padding，border) |
| offsetHight | 返回自身高度(包括自身内容高度，padding，border) |
offset属性使用
需要注意的是：使用padding或者border时，计算宽度或高度计算的是两边的，也就是说，计算两边的border、padding。
<div id="father" style="position:relative">
<div id="son" style="width: 20px ;height :20px ;padding: 5px;" ></div>
</div>
<script>
//offsetParent
var div = document.querySelector('#son');
//判断该元素带有定位的父类
console.log(div.offsetParent); //div#father
//距离带有定位的父元素的上边距和左边距
console.log(div.offsetTop); //0
console.log(div.offsetLeft);//0
//返回宽度（包括自身宽度，border，padding）
console.log(div.offsetWidth);// 宽度:20 padding:5 输出30
console.log(div.offsetHeight);//输出30
</script>案例：鼠标移动，同步获取鼠标当前所在盒子中的坐标
效果
核心代码
<div id="block"></div>
<script>
var div = document.querySelector('#block');
div.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'X坐标为:' + x +' '+ 'Y坐标为:' + y;
});
</script>e.pagex：获取当前指针(鼠标点)距离页面左侧的距离。
this.offsetLeft：获取当前盒子左边框距离左边页面的距离。
案例：模态框的拖拽
效果说明：
点击文字，弹出登录的模态框，模态框可拖动。
HTML代码
<div id="topText" class="top_text"><a>点击,弹出登录框</a></div>
<div id="login" class="login">
<div id="login_top" class="top">
登录会员
<div id="aa"><a id="closebtn" href="javascript:;">关闭</a></div>
</div>
<div id="login_content" class="content">
<div id="uname" class="name">
用户名：<input type="text" placeholder="请输入登录密码" >
</div>
<div id="password" class="pass">
登录密码： <input type="text" placeholder="请输入用户名">
</div>
</div>
<div id="login_button" class="bottom">
<button><a>登录会员</a></button>
</div>
</div>
<div id="bkcolor" class="bkcolor"></div>
JS核心代码
<script>
var topclick = document.querySelector('.top_text');
var login = document.querySelector('.login');
var bkcolor = document.querySelector('.bkcolor');
var closebtn = document.querySelector('#closebtn');
topclick.addEventListener('click', function(e){
bkcolor.style.display = 'block';
login.style.display = 'block';
// topclick.style.display = 'none'
});
closebtn.addEventListener('click',function(e){
bkcolor.style.display = 'none';
login.style.display = 'none';
// topclick.style.display = 'block'
});
//拖动模态框
var mousedown = document.querySelector('.top');
//mousedown:点击鼠标任意按钮触发
mousedown.addEventListener('mousedown', function(e){
//获取鼠标在盒子内的距离
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
document.addEventListener('mousemove',move)
function move(e){
//获取盒子该移动的距离
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
//只要鼠标松开，就无法移动模态框
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
</script>client系列-元素可视区
使用client系列相关属性，可以获取元素可视区信息（动态获取边框大小，元素大小等）
Client常见属性
| client系列属性 | 作用 |
| clientTop | 返回元素上边框的大小 |
| clientLeft | 返回元素左边框的大小 |
| clientWidth | 返回自身宽度（包括padding） |
| clientHeight | 返回自身高度（包括padding） |
区别于offset，client高宽不包含边框，可以单独获取边框。
scroll系列-元素滚动
使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。
scroll系列常见属性
| scroll系列属性 | 作用 |
| scrollTop | 返回上边被卷去的距离 |
| scrollLeft | 返回左边被卷去的距离 |
| scrollWidth | 返回自身实际宽度 |
| scrollHeight | 返回自身实际高度 |
client和scroll区别
scroll和client一样，不包含盒子大小，包含padding大小，但是scroll元素内容很多时，scroll可以算出内容总高度，而client依然计算盒子高度。
pageYOffset—pageXOfset区别于scrollTop-scrollLeft
window.pageYOffset：页面上方被卷去的距离
scrollTop：元素上方被卷去内容的距离。
动画
动画原理
使用定时器(setInterval)，每过一段时间，就让盒子移动一些距离。这样就达到了”动”的效果。
但是这样的”动”，每一次移动的距离都一样，效果像是一帧一帧的移动，达不到我们想要的流畅动画效果。那如何做到流畅效果呢？就要提出：”缓动“效果。
缓动动画原理
核心算法：每一次移动距离距上一次移动距离减少10%，直到停止。
既：迭代：移动距离 =（目标位置-当前当前）/10；
简易动画函数的封装
左右移动的动画封装
//封装动画函数，参数：传入需要动画的对象和移动位置
function animate(obj,maxD){
//防止叠加，先清除定时器
clearInterval(obj.interval);
//设置定时器
obj.interval = setInterval(function(){
//缓动效果公式：（目标 - 当前）/ 10
var step_size = ( maxD - obj.offsetLeft) / 10 ;
//判断是否大于0，选择向上或向下取整（大于0向下取整 9.9取9）
step_size = step_size > 0 ? Math.ceil(step_size) :Math.floor(step_size);
//到达指定位置，清除定时器
if(obj.offsetLeft == maxD){
clearInterval(obj.interval);
}else{
obj.style.left = obj.offsetLeft + step_size + 'px';
}
},15);
}上下移动的动画封装
//上下滑动动画
function animate(obj,maxD,callback){
clearInterval(obj.interval);
obj.interval = setInterval(function(){
//缓动效果公式：（目标 - 当前）/ 10
var step_size = ( maxD - window.pageYOffset) / 10 ;
step_size = step_size > 0 ? Math.ceil(step_size) :Math.floor(step_size);
if(window.pageYOffset == maxD){
clearInterval(obj.interval);
if(callback){
callback();
}
}else{
// obj.style.left = obj.offsetLeft + step_size + 'px';
window.scroll(0,window.pageYOffset + step_size)
}
},15);
};使用封装的动画函数演示
效果：
使用封装的动画函数，完成案例，点击按钮使盒子移动到指定位置。
核心代码
****HTML代码****
<div id="block1"></div>
<button class="btn">返回起点</button>
<button class="btn300">到300px</button>
<button class="btn500">到500px</button>
<script>
var block = document.querySelector('#block1');
var btn = document.querySelector('.btn');
var btn300 = document.querySelector('.btn300');
var btn500 = document.querySelector('.btn500');
btn.addEventListener('click',function(){
animate(block,0)
})
btn300.addEventListener('click',function(){
animate(block,300);
});
btn500.addEventListener('click',function(){
animate(block,500)
});
</script>案例： 侧面栏触碰滑出案例
效果：
触碰后向左滑出
——-触碰后———–>
核心代码
****HTML代码****
<div id="block">
<span><</span>
<div class="slider">问题反馈</div>
</div>
<script>
var block = document.querySelector('#block');
var slider = document.querySelector('.slider');
var span = document.querySelector('span');
//鼠标经过事件
block.addEventListener('mouseenter',function(){
//参数(对象，偏移量，回调函数)
animate(slider,-100,function(){
span.innerHTML = '>';
})
});
//鼠标离开事件
block.addEventListener('mouseleave',function(){
animate(slider,20,function(){
span.innerHTML = '<';
})
});
</script>案例：缓动画形式返回顶部
效果：
如下布局，当页面顶部滑到main区域时，出现返回顶部，点击后，以缓动画的形式返回顶部。
滑到main区域，出现”home”，点击后返回顶部(缓动画形式)
核心代码
点击后缓缓回到顶部，并不是直接定位到顶部。
//导入如上封装的上下移动的动画函数
<script src="animate_Top.js"></script>
//使用导入的动画函数
span.addEventListener('click',function(){
animate(window,0)
})完整JS和HTML代码：
<div class="slider"><span class="span"><a href="javascript:;">home</a></span></div>
<div class="top" id="top"> top</div>
<div class="banner"> banner</div>
<div class="main">main</div>
<script>
var slider = document.querySelector('.slider');
var banner = document.querySelector('.banner');
var main = document.querySelector('.main');
var span = document.querySelector('.span');
var ban_top = banner.offsetTop;
var sli_top = slider.offsetTop;
var sli_rela_top = sli_top - ban_top;
var main_top = main.offsetTop;
document.addEventListener('scroll',function(){
if(window.pageYOffset >= ban_top){
slider.style.position = 'fixed';
slider.style.top = sli_rela_top + 'px';
}else{
slider.style.position = 'absolute';
slider.style.top = '350px';
}
if(window.pageYOffset >= main_top ){
span.style.display = 'block';
}else{
span.style.display = 'none';
}
});
span.addEventListener('click',function(){
animate(window,0)
})
</script>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154562.html
