网页特效

网页特效的一些常用的标签

offset & style

如果只想要获取元素的大小位置，用offset；如果想要给元素更改值，则style更合适

京东鼠标移动图片放大案例

			var box = document.querySelector('#box');
			box.addEventListener('mousemove',function(e){
				var x = e.pageX - this.offsetLeft;
				var y = e.pageY - this.offsetTop;
				this.innerHTML = 'x的坐标是' + x +'y的坐标是' + y;
			})

鼠标的坐标减去盒子距离页面的距离，就是鼠标在盒子的位置

鼠标移动登录框案例

1、当鼠标按下时候，获得鼠标在盒子内的坐标位置

2、移动鼠标时，鼠标到页面的距离 减去 鼠标到盒子边框的距离，就是盒子离窗口的距离

3、鼠标弹起时候，自动溢出移动事件。

client

clientTop/Left

翻译过来客户端，返回元素上边框、左边框

clientWidth/Height（记这个）

返回包括自身padding 、内容区宽度/高度，不包含边框，返回的值不带单位

立刻执行函数

不需要调用就可以立刻执行函数

好处：独立创建了一个作用与，所有变量都是局部变量，不会有命名冲突

(function() {})() 或者 (function(){}())

(function(){
	console.log('1')		//不需要调用就可以可以执行
})()	//括号里面可以带形参或者实参

mouseover & mouseenter

mouseenter只有经过自身的子盒子才会触发【不冒泡】同样 mouseleave（鼠标离开）同样也不会冒泡

mouseover 经过父盒子也会触发，因为会产生事件冒泡

动画原理

通过计时器不断移动盒子的位置

1、获得当前盒子的位置

2、让盒子在房前的位置加上1 个移动距离

3、利用定时器不断重复操作

4、加上一个结束器条件

5、元素添加定位才能使用 element.style.left

		<style type="text/css">
			#box{
				height: 200px;
				width: 200px;
				background-color: #00FFFF;
				position: absolute;	   /* 动画一定要加定位,否则不生效 */
			}
		</style>
		<div id="box"></div>
		<script type="text/javascript">
			function animate(obj,target){		//传入两个参数  所以要移动的元素   +   移动的距离
                clearInterval(obj.timer);//清除以前的定时器，只保留当前的定时器
				var timer = setInterval(function(){	//设置定时器
					if(obj.offsetLeft >= target){	//
						clearInterval(timer);	//如果刚好到达就清除定时机器
					}else{
						obj.style.left = obj.offsetLeft + 1 +'px';	//每次加1单位
					}
				},1);
			}
			var div = document.querySelector('#box');
			animate(div,300);
		</script>

提高效率的写法

var timer = setInterval(function(){}）

上面一条语句中，每一次调用函数都要开辟一个定时器，因此占用内存

所以我直接给对象添加一个定时器

obj.timer = setInterval(function(){}）

所产生的效果一样

缓动动画【重点】

核心算法：（目标值-当前的位置）/10 作为每次移动的不长啊

		<style type="text/css">
			#box{
				height: 200px;
				width: 200px;
				background-color: #00FFFF;
				position: absolute;	   /* 动画一定要加定位,否则不生效 */
			}
		</style>
		<button type="button" id="btn1">前进500</button>
		<button type="button" id="btn2">前进800</button>
		<div id="box"></div>
		<script type="text/javascript">
			//callback  回调函数作为传入的参数
			function animate(obj,target,callback){		//传入两个参数  所以要移动的元素   +   移动的距离
				obj.timer = setInterval(function(){	//设置定时器
				//步长值的核心算法写到定时器里面
				//把步长值改为整数，不要出现小数的问题
				
					var step = (target - obj.offsetLeft) / 10;
					//math.ceil函数是  小数向上取整，要前进，不要后退
					//如果是后退的负值时候，就往小取整
					step = step > 0 ? Math.ceil(step) : Math.floor(step);	//重点理解
					if(obj.offsetLeft == target){	//当步长值等于移动距离时候  执行  如果大于的话可以后退  精妙之处
						clearInterval(obj.timer);	//如果刚好到达就清除定时机器
						//定时器结束时 调用 回调函数callback
						if(callback){
							callback();
						}
					}else{
						obj.style.left = obj.offsetLeft + step +'px';	//每次加1单位
						
					}
				},15);
			}
			var div = document.querySelector('#box');
			
			var btn1 = document.querySelector('#btn1');
			var btn2 = document.querySelector('#btn2');
			btn1.addEventListener('click',function(){
				animate(div,500,function(){
					console.log("到500拉");
				});
			});
			btn2.addEventListener('click',function(){	//函数作为参数传进函数里面
				animate(div,800,function(){
					div.style.background = 'red';
				});
			});
		</script>

轮播图

自动轮播

增加一个定时器，然后通过调用，手动调用事件。

var timer = setInterval(function(){
	element(函数).click();		//就可以实现手动调用事件。
},2000);   		//每2秒调用一次

节流阀

目的：上一个动画播放完毕后才执行下一个动画的播放

开始设置一个变量 var flag = true;

if(flag){flag = false;do something} //关闭水龙头

nction(){
element(函数).click(); //就可以实现手动调用事件。
},2000); //每2秒调用一次

##### 节流阀

目的：上一个动画播放完毕后才执行下一个动画的播放

> 开始设置一个变量  var flag = true;
>
> if(flag){flag = false;do something}  //关闭水龙头
>
> 利用回调函数 动画执行完毕时 ， flag=true  打开水龙头