美文网首页
2017-3-14 JS学习笔记

2017-3-14 JS学习笔记

作者: GodlinE | 来源:发表于2017-03-16 14:31 被阅读0次

    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);
    }
    

    相关文章

      网友评论

          本文标题:2017-3-14 JS学习笔记

          本文链接:https://www.haomeiwen.com/subject/xfqjnttx.html