前端教程：在浏览器中启用JavaScript

有现代浏览器都使用了JavaScript的内置支持。很多时候，你可能需要启用或手动禁用此支持。

本教程将让您知道如何启用和禁用JavaScript支持，在您的浏览器：IE浏览器，Firefox和Opera。

JavaScript在InternetExplorer(IE)中：

下面是简单的步骤给打开或关闭JavaScript在您的InternetExplorer：

1、按照从菜单"工具"->"Internet选项"

2、从对话框中选择"安全"选项卡

3、点击"自定义级别"按钮

4、向下滚动，直到找到"脚本选项"

5、选择启用"活动脚本"单选按钮

6、最后点击"确定"，然后退出来

要禁用JavaScript支持在InternetExplorer，需要在“活动脚本”给选择“禁用”单选按钮。

JavaScript在Firefox：

下面是简单的步骤给打开或关闭JavaScript在Firefox：

1、从菜单按照"工具" ->"选项"

2、从对话框的“内容”选项

3、选择启用JavaScript的复选框

4、最后点击确定，然后退出来

要禁用Firefox的JavaScript支持，应该选择禁用JavaScript的复选框。

JavaScript在Opera:

下面是简单的步骤给打开或关闭JavaScript在Opera：

1、从菜单按照"工具"->"首选项"

选择对话框中的"高级"选项

2、从列出的项目选择"内容"选择启用JavaScript 复选框

3、最后点击"确定"，然后退出来

要禁用在Opera中支持JavaScript，那么不要选择启用JavaScript的复选框。

警告对非JavaScript的浏览器：

如果你有使用JavaScript做一些重要的事情，那么可以显示一条警告消息，使用<noscript>标签显示给用户。

可以在脚本块后，如下立即加入noscript noscript 块：

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>

<noscript>
  Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>

12345678910111213141516复制代码类型：[javascript]

现在，如果没有启用用户的浏览器不支持JavaScript或JavaScript，然后</noscript>会在屏幕上显示的消息。

开课吧广场-人才学习交流平台

前面两篇文章，学习了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的异步调用相关知识的学习~

avaScript最初诞生于1995年，开始是为了处理由服务端语言负责的一些输入验证操作，减少与服务器的数据交换。现在的JavaScript已经成为一门功能全面的编程语言，能够处理复杂的计算和交互，拥有了闭包、匿名(lamda)函数，甚至元编程等特性，已经成为Web的一个重要组成部分。

JavaScript从一个简单的输入验证器发展成为一门强大的编程语言，是完全出乎人们的意料。严格来说它既是一门非常简单的语言，又是一门非常复杂的语言。说它简单，是因为学会使用它只需片刻功夫;而说它复杂，是因为要真正掌握它则需要数年时间。要想全面理解和掌握JavaScript，关键在于弄清楚发展历史和本质。

1、JavaScript简史

在JavaScript诞生的时代，网络的速度还很慢，不像现在4G、5G这么普遍，百兆千兆宽带进入千家万户，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，因此当时走在技术革新最前沿的Netscape公司，决定着手开发一种客户端语言，用来处理这些简单的验证。

当时Netscape公司的布兰登·艾奇(Brendan Eich)，开始着手为计划于1995年2月发布的Netscape Navigator 2开发一种名为LiveScript的脚本语言，该语言将同时在浏览器和服务器中使用(它在服务器上的名字叫LiveWire)。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司建立了一个开发联盟。在Netscape Navigator 2正式发布前夕，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript。

由于JavaScript1.0获得了巨大成功，Netscape随即在Netscape Navigator3中又发布了JavaScript1.1。与此同时，微软决定向与Navigator竞争的自家产品Internet Explorer浏览器投入更多资源。Netscape Navigator3发布后不久，微软就在其Internet Explorer3中加入了名为JScript的JavaScript 实现。现在回头看，微软1996年8月为进入Web浏览器领域而实施的这个重大举措，是导致Netscape日后蒙羞的一个标志性事件。然而，这件事也标志着JavaScript作为一门语言，其开发向前迈进了一大步。

微软推出其JavaScript实现意味着有了两个不同的JavaScript版本，由于当时还没有标准规定JavaScript的语法和特性，两个不同版本并存的局面已经完全暴露了这个问题。随着业界担心的日益加剧，JavaScript的标准化问题被提上了议事日程。

1997年，以JavaScript 1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA)。该协会指定39号技术委员会(TC39) 负责“标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。他们经过数月的努力完成了 ECMA-262——定义一种名为 ECMAScript的新脚本语言的标准。自此以后，浏览器开发商就开始致力于将ECMAScript作为各自JavaScript实现的基础，也在不同程度上取得了成功。

2、JavaScript实现

一个完整的JavaScript实现应该由下列三个不同的部分组成

核心(ECMAScript)

ECMAScript与Web浏览器没有依赖关系，但是我们常用的Web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展——如DOM，则利用ECMAScript的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作。其他宿主环境如Node。

ECMA规定了一门语言的下列组成部分：

语法
类型
语句
关键字
保留字
操作符
对象

ECMAScript就是对实现该标准规定的各个方面内容的语言的描述。

文档对象模型(DOM)

文档对象模型(DOM，Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API，Application Programming Interface)。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

DOM1级(DOM Level 1)于 1998年10月成为W3C的推荐标准。DOM1级由两个模块组成:DOM核心(DOM Core)和 DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML 模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

浏览器对象模型(BOM)

开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。而 BOM 真正与众不同的地方(也是经常会导致问题的地方)，还是它作为 JavaScript 实现的一部分但却没有相关的标准。这个问题在 HTML5 中得到了解决，HTML5 致力于把很多 BOM 功能写入正式规范。HTML5 发布后，很多关于 BOM 的困惑烟消云散。

从根本上讲，BOM只处理浏览器窗口和框架;但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分。下面就是一些这样的扩展:

弹出新浏览器窗口的功能;
移动、缩放和关闭浏览器窗口的功能;
提供浏览器详细信息的 navigator 对象;
提供浏览器所加载页面的详细信息的 location 对象;
提供用户显示器分辨率详细信息的 screen 对象;
对cookies的支持;
像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

由于没有BOM标准可以遵循，因此每个浏览器都有自己的实现。虽然也存在一些事实标准，例如要有window对象和navigator对象等，但每个浏览器都会为这两个对象乃至其他对象定义自己的属性和方法。

3、JavaScript版本

作为Netscape“继承人”的Mozilla公司，是目前唯一还在沿用最初的JavaScript版本编号序列的浏览器开发商。在Netscape将源代码提交给开源的Mozilla项目的时候，JavaScript在浏览器中的最后一个版本号是1.3。后来，随着Mozilla基金会继续开发JavaScript，添加新的特性、关键字和语法，JavaScript的版本号继续递增。下表列出了JavaScript版本号对应各浏览器的递增过程:

4、小结

JavaScript是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成:

ECMAScript，由ECMA-262定义，提供核心语言功能;
文档对象模型(DOM)，提供访问和操作网页内容的方法和接口;
浏览器对象模型(BOM)，提供与浏览器交互的方法和接口。

JavaScript的这三个组成部分，在当前五个主要浏览器(IE、Firefox、Chrome、Safari和Opera)中都得到了不同程度的支持。

在线咨询

上一篇：把HTML网页下载为单文件，可离线访问
下一篇：从0学爬虫-页面解析的几种方法

您的项目需求

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

整合营销服务商