javascript加入网页几种方法（前端系列教程-JavaScript在网页动画中的使用）

在前面两篇文章，学习了Javascript中、相关基础知识后，今天我们将结合前面所学内容，利用DOM操作实现常见的网页动画效果；结合知识点有相关案例效果演示，另外本文所设计的源码和配套素材可在文末获取；

• offset的属性与作用
• client的属性与作用
• scroll的属性与作用
• 封装简单动画函数
• 网页轮播图

获得元素距离带有定位父元素的位置

获得元素自身的width和height

思路：盒子内的坐标可以通过鼠标事件的e.pageX获取到页面坐标再减去element.offsetLeft来得到；

var box = document.querySelector('.box'); box.addEventListener('click',function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; console.log('x:' x ',y:' y); })案例：模态框拖拽

需求：

（1）点击弹出层，会淡出模块框，并且显示灰色半透明的遮挡层；

（2）点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层；

（3）鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动；

（4）鼠标松开，可以停止拖动模态框移动；

分析：

（1）拖拽事件，鼠标是按着的状态，故mousemove和mouseup须卸载mousedown事件里面；

（2）在拖拽的过程中，鼠标的位置相对于组件的坐标是不变的，因此为了改变组件的位置，需要将页面坐标减去相对组件坐标来获取；

var link = document.querySelector('#link'); var login_window = document.querySelector('#login'); var close_button = document.querySelector('#closeBtn'); var bg = document.querySelector('#bg'); link.addEventListener('click',function(){ login_window.style.display = 'block'; bg.style.display = 'block'; }) close_button.addEventListener('click',function(){ login_window.style.display = 'none'; bg.style.display = 'none'; }) // 拖动事件三个过程：mousedown、mousemove、mouseup var title = document.querySelector('#title'); title.addEventListener('mousedown',function(e){ var x = e.pageX - login_window.offsetLeft; var y = e.pageY - login_window.offsetTop; document.addEventListener('mousemove',move); function move(e){ login_window.style.left = e.pageX - x 'px'; login_window.style.top = e.pageY -y 'px'; } document.addEventListener('mouseup',function (e) { document.removeEventListener('mousemove',move); }); });

分析：

（1）mask界面与big界面可以通过鼠标事件设置dispaly属性即可；mouseover显示mask，mouseleave隐藏mask、mousemove移动mask

（2）mask的left与top的值可以通过鼠标在prew_img中的位置来获取；

（3）为了让mask界面中央跟着鼠标指针走，则需要减去mask尺寸一半的偏移量；

（4）防止mask页面跑出prew_img，需要对偏移量进行判断；

（5）大图片移动距离怎么计算？mask移动距离/mask最大移动距离 = 大图片移动距离/大图片最大移动距离；所以大图片移动距离 = mask移动距离 * 大图片移动最大距离 / 遮挡层最大移动距离；

window.addEventListener('load',function(){ var prew_img = document.querySelector('.preview_img'); var mask = document.querySelector('.mask'); var big = document.querySelector('.big'); prew_img.addEventListener('mouseover',function(){ mask.style.display = 'block'; big.style.display = 'block'; }) prew_img.addEventListener('mousemove',function(e){ // 获取鼠标在prew_img元素内的坐标 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // 防止mask页面跑出prew_img盒子 var maskX = x - mask.offsetWidth / 2; // 遮挡层的最大移动距离maskMax var maskMax = this.offsetWidth - mask.offsetWidth; if(maskX <= 0){ maskX = 0; }else if(maskX >= maskMax){ maskX = maskMax; } var maskY = y - mask.offsetHeight / 2; if(maskY <= 0){ maskY = 0; }else if(maskY >= maskMax){ maskY = maskMax; } // 让mask界面中央跟着鼠标指针走 mask.style.left = maskX 'px'; mask.style.top = maskY 'px'; // 让big界面内容跟着mask位置移动， // 大图片移动距离 = mask移动距离 * 大图片移动最大距离 / mask最大移动距离 var big_img = document.querySelector('.bigImg'); var bigMax = big_img.offsetWidth - big.offsetWidth; // 大图片移动距离 var bigMoveX = maskX * bigMax / maskMax; var bigMoveY = maskY * bigMax / maskMax; big_img.style.left = -bigMoveX 'px'; big_img.style.top = -bigMoveY 'px'; }); prew_img.addEventListener('mouseleave',function(){ mask.style.display = 'none'; big.style.display = 'none'; }); });II、元素的可视区

不需要调用，立马能自己执行的函数;

// 写法一： (function(){})() // 写法二： (function(){}())

立即执行函数也可以传递参数：

(function(a,b){ console.log(a b); })(1,2)

立即执行函数的作用是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况；

使用scroll系列相关属性可以动态得到元素的大小、滚动距离；

scroll系列属性 作用 备注 element.scrollTop 返回被卷去的上侧距离 返回的数值不带单位 element.scrollLeft 返回被卷去的左侧距离 返回的数值不带单位 element.scrollWidth 返回自身的实际宽度，不含边框 返回的数值不带单位 element.scrollHeight 返回自身的实际高度，不含边框 返回的数值不带单位

• 1.原先侧边栏是绝对定位
• 2.当页面滚动到一定的位置，侧边栏改为固定定位
• 3.页面继续滚动，会让顶部显示出来

页面被卷去的头部可以通过：window.pageYOffset来获得

// 1.获取元素 var sliderBar = document.querySelector('.slider-bar'); var topBar = document.querySelector('.header'); var banner = document.querySelector('.banner'); var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var barHeight = banner.offsetTop; var sliderBarTop = sliderBar.offsetTop; var fixTop = sliderBarTop - barHeight; var mainTop = main.offsetTop; // 2.页面滚动事件 document.addEventListener('scroll',function(){ if(window.pageYOffset >= barHeight){ sliderBar.style.position = 'fixed'; sliderBar.style.top = fixTop 'px'; }else{ sliderBar.style.position = 'absolute'; sliderBar.style.top = sliderBarTop 'px'; } if(window.pageYOffset >= mainTop){ goBack.style.display = 'block'; }else{ goBack.style.display = 'none'; } })

当鼠标移动到元素上时就会触发mouseenter事件，类似mouseenter

两者的区别是：mouseover鼠标经过自身盒子会触发、经过子盒子也会触发；而mouseenter只有经过自身盒子才会触发；

原因是mouseenter不会冒泡；跟mouseenter搭配的通常是mouseleave

通过定时器setInterval()不断移动盒子位置；

实现步骤：

• 获得盒子当前位置
• 让盒子在当前位置加上一个移动距离
• 加上一个结束定时器的条件
• 盒子需要添加定位，才能使用element.style.left

//利用setInterval设置一个box元素从左向右移动400像素的动画 var box = document.querySelector('.box'); var timer = setInterval(function(){ if(box.offsetLeft > 200){ // 停止动画，本质上是清除定时器 clearInterval(timer); } box.style.left = box.offsetLeft 5 'px'; },50);2.动画函数的封装

将动画函数封装起来，利用JS是动态语言的特性，通过设置对象的方式，给每个不同的元素指定不同的定时器；

// 简单动画函数的封装,目标对象obj,目标位置target function animate(obj,target){ // 如果设置一个按钮启动动画，会存在一个bug,只要不断点击按钮，动画会越走越快； // 原因是启动了太多定时器，解决方案是，让元素只有一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function(){ if(obj.offsetLeft > target){ // 停止动画，本质上是清除定时器 clearInterval(obj.timer); } obj.style.left = obj.offsetLeft 5 'px'; },50); } //利用setInterval设置动画 var btn = document.querySelector('button'); var box1 = document.querySelector('.box1'); btn.addEventListener('click',function(){ animate(box1,400); });3.缓动动画原理

缓动动画就是让元素运动速度有所变换，最常见的就是让速度慢慢停下来；

思路：让盒子每次移动的距离慢慢变小；

核心算法：每次移动的步长 = (目标值-现在的位置)/10这里的10是份数可以是9也可以是8；

停止的条件是：当前盒子的位置等于目标位置就停止定时器；

// 缓动动画 function animate(obj,target){ // 清除定时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 每次运行定时器都要重新计算步长值，所以步长值写在定时器里面 var step = (target - obj.offsetLeft)/10; // 如果step是正值则往大取整，如果step是负值则往小取整 step = step >= 0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == target){ clearInterval(obj.timer); } // 缓动动画核心算法：前进步长=（目标-当前）/ 10 obj.style.left = obj.offsetLeft step 'px'; },50); }

回调函数原理：函数可以作为一个参数，将这个函数作为参数传入到另一个函数里面，当这个函数执行完成后，再执行传进去的这个函数，这个过程叫做回调。

回调函数位置：写到定时器结束的位置

// 缓动动画 function animate(obj,target,callback){ // 清除定时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 每次运行定时器都要重新计算步长值，所以步长值写在定时器里面 var step = (target - obj.offsetLeft)/10; // 如果step是正值则往大取整，如果step是负值则往小取整 step = step >= 0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == target){ clearInterval(obj.timer); if(callback){ // 调用函数 callback(); } } // 缓动动画核心算法：前进步长=（目标-当前）/ 10 obj.style.left = obj.offsetLeft step 'px'; },50); }将动画函数封装到单独的JS文件

在head里引入JS文件

<script src="animate.js"></script>

实际调用过程中可以直接调用JS中定义的函数

var sliderbar = document.querySelector('.sliderbar'); var con = document.querySelector('.con'); sliderbar.addEventListener('mouseenter',function(){ animate(con,-160,function () { // 动画执行完毕，将左箭头转为右箭头 sliderbar.children[1].innerHTML = '→'; }); }) sliderbar.addEventListener('mouseleave',function(){ animate(con,0,function () { sliderbar.children[1].innerHTML = '←'; }); })案例：网页轮播图

功能需求：

• 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；
• 鼠标点击右侧按钮一次，图片往左播放一张，以此内推，左侧按钮同理；
• 图标播放的同时，下面小圆圈模块跟随一起变化；
• 点击小圆圈，可以播放相应图片；
• 鼠标不经过轮播图，轮播图也会自动播放图片；
• 鼠标经过，轮播图模块，自动播放停止

window.addEventListener('load', function () { // === 0.定义变量，获取元素 var focus = document.querySelector('.focus'); var arrowL = document.querySelector('.arrow-l'); var arrowR = document.querySelector('.arrow-r'); // === 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；===== focus.addEventListener('mouseenter', function () { arrowL.style.display = 'block'; arrowR.style.display = 'block'; clearInterval(timer); timer = null; }); focus.addEventListener('mouseleave', function () { arrowL.style.display = 'none'; arrowR.style.display = 'none'; timer = window.setInterval(function () { arrowR.click(); }, 3000); }); // === 2.根据轮播图的数量自动生成小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); var pictureWidth = focus.offsetWidth; // 获取到轮播图图片的数量length var length = ul.children.length; // 显示当前图片的索引 var circle = 0; // 显示当前图片的索引 var num = 0; // 创建元素插入到ol中 for (var i = 0; i < length; i ) { var li = document.createElement('li'); // 给没一个小圆圈添加一个index属性，方便点击事件的ul移动长度的确定 li.setAttribute('index', i); // 给每一个小圆圈添加点击事件 li.addEventListener('click', function () { // 移除其他小圆圈的选中属性 for (var i = 0; i < length; i ) { ol.children[i].className = ''; } // 设置当前选中小圆圈的选中属性 this.className = 'current'; // 定义选中的小圆圈的索引 var index = this.getAttribute('index'); num = index; circle = index; animate(ul, -pictureWidth * index); }); ol.appendChild(li); } ol.children[0].className = 'current'; // === 3.鼠标点击右侧按钮一次，图片往左播放一张，以此内推，左侧按钮同理；== // 为了实现无缝滚动，需要将第一张图添加到最后一张图中 var lastLi = ul.children[0].cloneNode(true); ul.appendChild(lastLi); // 设置一个节流阀，防止按钮在短时间内点击过多 var flag = true; arrowR.addEventListener('click', function () { if (flag) { flag = false; if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num ; animate(ul, -pictureWidth * num, function () { flag = true; }); circle ; if (circle == ol.children.length) { circle = 0; } activateCircle(circle); } }); arrowL.addEventListener('click', function () { if (flag) { flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * pictureWidth 'px'; } num--; animate(ul, -num * pictureWidth, function () { flag = true; }); if (circle == 0) { circle = ol.children.length; } circle--; activateCircle(circle); } }); // 排他法思想点亮小圆圈 function activateCircle(index) { for (var i = 0; i < ol.children.length; i ) { ol.children[i].className = ''; } ol.children[index].className = 'current'; } // 实现轮播图自动播放 var timer = window.setInterval(function () { arrowR.click(); }, 3000); });

显示效果：

轮播图自动播放的原理是：设置一个定时器使用click（）函数模拟按钮点击事件；

轮播图实现无缝滚动的原理是：将第一个图动态加在最后一张图上，当切到最后一张图时，重新设置元素布局距离，再执行滑动动画。

防止同一个按钮在短时间内点击次数过多，可以设置一个节流阀，将启动节流阀的操作写在动画回调函数里，这样只有当动画执行完毕后才才可以重新恢复按钮的点击功能；

页面滚动动画可以使用函数：window.scroll(x,y)可以滚动至页面的指定坐标位置；

最后：

本文配套源码与素材获取：https://gitee.com/yushengtan/jscode

关于JavaScript在网页动画中的使用就介绍到这里，下一节我们将继续深入介绍JavaScript的异步调用相关知识的学习~