前端系列教程-JavaScript在网页动画中的使用

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

JavaScript网页特效

学习目标

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

I、元素偏移量

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

获得元素自身的width和height

1.offset常用的属性

2.offset与style的区别

案例：获取鼠标在盒子内的坐标

思路：盒子内的坐标可以通过鼠标事件的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)

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

III、元素滚动scroll

使用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';
    }
})

IV、鼠标事件

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

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

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

V、动画函数

1.动画实现的原理：

通过定时器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的异步调用相关知识的学习~

html,css入门后，js也是一门必学的网页语言，js全名javascript是一种编程语言，也是一门是一门面向对象的动态语言(这里的面向"对象"不是面向结婚的对象)能使网页内容变成动态的内容，告诉网页要怎么展示数据,比如页面上的图片轮播,是用html来展示图片,然后用js来告诉html展示什么图片,怎么轮播。

如图:

上面图片可以自动切换，或者点击向左，向右的符号切换图片显示。就是使用了js语言。

说到底,网页上那些看起来很漂亮的特效大部分都是通过js来处理的。js是由浏览器解释执行的，因为浏览器能看懂js。通常JavaScript是通过嵌入在HTML中来实现自身的功能的，有跨平台特性，js依赖浏览器本身，与操作系统无关，在绝大多数浏览器的支持下，可以在多种平台下运行（如、、Mac 、Android、iOS等）。前提是用浏览器才能执行。主要用途是对浏览器事件做出响应。读写。在数据被提交到服务器之前验证数据。为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。检测访客的浏览器信息，控制，包括创建和修改等，基于Node.js技术进行服务器端编程等。

JavaScript的语法定义不是很严格，这是和其他语言相比较(如果只会html,css可忽略比较)，一个简单说明，其他语言每个语句结束必须得加分号才行，不然就会报错，而js可加可不加（但是这里强烈要求大家每个语句结束加上分号）。javaScript的摆放位置：<script> 与 </script> 中间，这个script标签可以放在head和body之间，也可以body中或者head中。

javascript有三种引入方式，也是入门的基础代码：

1.外部引用：把另外一个js文件引入到这个html文件中

demo.js文件中写javascript代码。

2.嵌入方式：

Js代码

</script>

行内引用：

单常用的DOM操作

Table 对象集合(行与列从0开始计数)

cells[] 返回包含表格中所有单元格的一个数组。

rows[] 返回包含表格中所有行的一个数组。

tBodies[] 返回包含表格中所有tbody 的一个数组

针对<table>元素(行与列从0开始计数)

caption 指向<caption>元素(如果存在)

tBodies 指向<tbody>元素的集合

tFoot 指向<tfoot>元素(如果存在)

tHead 指向<thead>元素(如果存在)

rows 表格中所有行的集合

deleteRow(position) 删除指定位置上的行

insertRow(position) 在rows集合中的指定位置插入一个新行

createCaption() 创建<caption>元素并将其放入表格中;//括号内不需要插入值

deleteCaption() 删除<caption>元素 //括号内不需要插入值

针对<tbody>元素(手册上没有)

rows <tbody>中所有行的集合

deleteRows(position) 删除指定位置上的行浏览器已不支持

insertRows(position) 在rows集合中的指定位置插入一个新行浏览器已不支持

针对<tr>元素

cells <tr>中所有单元格的集合

deleteCell(position) 删除给定位置上的单元格

insertCell(position) 在cells集合的给定位置上插入一个新的单元格

注意：是否使用tBodies[0]属性, 将会影响所操作的行与列

而浏览器已经删除了deleteRows(position)、insertRows(position)方法, 统一使用deleteRow()、insertRow()方法

获取表格的数据:

实例1:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
alert(oTab.tBodies[0].rows.length); //返回值为:5 因为<tbody></tbody>标记内有5行
alert(oTab.rows.length); //tBodies[0]可以省略, 但返回值为:6 因为<thead></thead>标记有1行, <tbody></tbody>标记内有5行

};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead> <!-- 尽管没有<tr>标记, 但浏览器也认定算是一行 -->
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>

动态添加表格:

<script language="javascript">
window.onload=function(){
var oTr = document.getElementById("member").insertRow(2); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("Nov 5th");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
</script>

修改单元格内容:

当表格建立了以后,可以通过HTML DOM属性直接对单元格进行引用,相比getElementById()、getElementsByTagName()等方法一个个寻找要方便得多;

oTable.rows[i].cells[j]

<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("member");
oTable.rows[3].cells[4].innerHTML = "lost"; //修改单元格内容
}
</script>

动态删除表格:

<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("member");
oTable.deleteRow(2); //删除一行，后面的行号自动补齐
oTable.rows[2].deleteCell(1); //删除一个单元格，后面的也自动补齐
}
</script>

动态删除表格的行

<script language="javascript">
function myDelete(){
var oTable = document.getElementById("member"); //经过测试,这是多余的语句
//删除该行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
window.onload=function(){
var oTable = document.getElementById("member");
var oTd;
//动态添加delete链接
for(var i=1;i<oTable.rows.length;i++){
oTd = oTable.rows[i].insertCell(5);
oTd.innerHTML = "<a href='#'>delete</a>";
oTd.firstChild.onclick = myDelete; //添加删除事件
}
}
</script>

删除表格的列(自定义函数)

在线咨询

上一篇：学html的时候，网页宽度还记得960px吗，为什么？
下一篇：制作PPT的全过程，详细，说不定哪天就用到了，看看吧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商