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);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • offset家族三大家族和一个事件对象三大家族(offset/scroll/client)事件对象/event ...
    Yuann阅读 983评论 0 5
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 817评论 0 0
  • 三大家族属性 client/scroll/offset clientLeft 表示当前标签距离左侧的 border...
    GodlinE阅读 306评论 0 2
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • 最近在准备CPA考试,而且又新入驻简书,没有多余的时间和精力去搜集准备其他类型的文章,因此就把会计这一门课程的一些...
    尼酱的大杂烩阅读 1,088评论 0 2