2017-3-14 JS学习笔记

document 获取网页基本结构

• document 可以把一些东西写在网页中

document.write('123');

• 写入网页的基本结构

document.write(document.body + '<br>');
document.write(document.documnetElement + '<br>');
document.write(document.html + '<br>');

星海特效的一些关键点

//获取浏览器的高度和宽度
var screenW = document.documentElement.clientWidth;
var screenY = document.documentElement.clientHeight;
// body 中添加节点
document.body.appendChild(starSpan);
//随机数生成 （0~1）
Math.random();
//设置动画延迟
starSpan.style.animationDelay = ratoDelay + 's';

照片墙练习中的注意点

• 因为当添加节点后会改变节点数，在添加节点前后获取的值可能发生变化，所以我们要在添加节点之后获取浏览器的宽度和高度
• 主要应用思想逻辑
  排他思想，随机数

事件对象

• 事件对象一般通过参数 event 传进函数内部
• IE 浏览器无法识别 event 所以用兼容写法

var event = event || window.event;
//获取点击的浏览器中的位置，始终是以浏览器的左上角作为参考点，就是坐标原点
event.clientX;
//获取点击的点在屏幕中的位置，是以屏幕的左上角为原点的
event.screenX;
//获取点击的点相对于文档的位置，是以文档作为参考点的
event.pageX;
//在只有一屏显示的时候
event.clientX = event.pageX;

放大镜案例中的一些注意点

//当移动到小的盒子上的时候让对应的大盒子以及 span 出现
smallBox.onmouseover = function(){
        mask.style.display = 'block';
        bigBos.style.display = 'block';
//进入小盒子之后，鼠标在其中移动时，设置 span 的位置以及设置大盒子中的图片移动
        smallBox.onmousemove = function(event){
                var event = event || window.event;
//移动公式
//移动的距离 = 当前移动的坐标的位置 - 小的盒子的offsetParent距离左边的间距 - mask的实体宽度的一半
                var moveX = event.clientX -smallBox.offsetParent.offsetLeft - mask.offsetWidth*0.5
//当左边的小的 span 移动的时候，让大的盒子中的图片移动起来
//移动公式：小盒子移动的距离/大盒子中图片移动的距离 = 小盒子的宽度/大盒子的宽度
                var bigX = - moveX/(smallBox.offsetWidth/bigBox.offsetWidth)
        }
}

进度条展示中的注意点

//获取点击鼠标的点，距离 mask 的间距以及盒子举例浏览器的左侧距离
var event = event || window.event;
var distanceX = event.clientX - mask.offsetLeft;
document.onmousemove = function(event){
//获取移动的距离
        var event = event || window.event;
//移动公式：移动的距离 = 当前移动的位置 - distanceX
        var moveX = event.clientX -distanceX;
//事件中最后返回 false  ,可以清空事件的一些默认行为
//这里清空的是动作条的来回滑动黏连         
}

闭包的基本认识

 window.onload = function(){
        /*1.获取按钮*/
        var btns = document.getElementsByTagName('button');
        /*2.点击按钮弹出对应的索引值
        在for循环中有延迟操作，i都获取不到
        但是我们需要获取i值，我们可以采用扩展属性或者闭包
        小闭包：()()，匿名函数自调
        匿名函数：没有名称的函数
        (匿名函数的定义)(函数调用)
        //闭包可以记录变量的值
        * */
        for(var i = 0;i < btns.length;i++){
//            btns[i].onclick = function(){
//                alert();
//            }
            (function (b) {
                btns[b].onclick = function(){
                    alert(b);
                }
            })(i);
        }
    }

放大镜特效实现的闭包修改

for(var i = 0;i < listImages.length;i ++){
         (function(a){
                listImages[a].onmouseover  = function(){
               /*4.1移动上去的时候切换图片*/
                smallBox.children[1].src = 'images/pic00'+(a+1)+'.jpg';
                big_img.src =  'images/pic0'+(a+1)+'.jpg'
            }
      })(i);
}