JS-BOM 网页特效&动画

目录

立即执行函数

 offset系列-元素偏移量

 offset系列常用属性

offset属性使用

 案例：鼠标移动，同步获取鼠标当前所在盒子中的坐标

案例：模态框的拖拽 

client系列-元素可视区

Client常见属性 

scroll系列-元素滚动

 scroll系列常见属性

动画

动画原理

 缓动缓动原理

 简易动画函数的封装

左右移动的动画封装

上下移动的动画封装

案例： 侧面栏触碰滑出案例

案例：缓动画形式返回顶部

---

立即执行函数

不需要调用，立马执行。创建的函数内部是独立的作用域。

 声明方式 

主要作用：创建一个独立的作用域，避免命名冲突。 

//声明方式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>