网页特效学习笔记——01

offsetWidth、offsetHeight、offsetLeft、offsetTop

offsetWidth、offsetHeight：对象的宽度和高度
offsetLeft：返回距离上级盒子（最近的带有定位）左边的位置，从父级的padding开始算，不算border
offsetTop：如果父级都没有定位则以body 为准

不存在offsetRight||offsetBottom!

EXAMPLE:筋斗云

<script>
    var cloud  = document.getElementById("cloud"); //背景 
    var nav = document.getElementById("nav");
    var list = nav.children[1].children;
    var current = 0; // 使用current暂时存贮
    for(var i=0;i<list.length;i++){
        list[i].onmousemove = function(){
            target = this.offsetLeft;
        }
        list[i].onmouseout = function(){
            target =current;
        }
        list[i].onclick = function(){
        current = this.offsetLeft;
        }
    }

    //缓动公式
    var leader = 0,target = 0;
    setInterval(function(){
        leader = leader + (target-leader)/10;
        cloud.style.left = leader+"px";
    },30);
</script>

offsetParent

如果父亲没有定位，可以返回爷爷、增爷爷balabala,知道返回有定位的节点，而parentNode就是亲爹

offsetTop和style.top 的区别

• 最大区别：offsetLeft可以返回没有定位盒子的距离左侧的位置； style.top 不可以。只有定位的盒子 才有 left top right
• offsetTop 返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。
  style.left = 300px parseInt（300px） 结果 300 parseInt（style.left） +parseInt（style.left）
• offsetTop可读不可改，style.top可以改
• 如果没有给HTML元素指定过 top 样式，则style.top 返回空字符串。
• 最重要的区别：style.left只能得到行内样式

---

事件对象

普通浏览器支持event 、ie 678 支持 window.event;兼容性写法如下：

  document.onclick = function(event){  
        var event = event || window.event;   // 兼容性写法
        console.log(event.clientY);
    }

---

event 常见属性

属性	作用
data	返回拖拽对象的URL字符串（dragDrop）
width	该窗口或框架的高度
height	该窗口或框架的高度
pageX	光标相对于该网页的水平位置（ie无）
pageY	光标相对于该网页的垂直位置（ie无）
screenX	光标相对于该屏幕的水平位置
screenY	光标相对于该屏幕的垂直位置
target	该事件被传送到的对象
type	事件的类型
clientX	光标相对于该网页的水平位置 （当前可见区域）
clientY	光标相对于该网页的水平位置

---

pageX clientX screenX 区别

screenX screenY：以电脑屏幕为基准点
clientX clientY：以文档为基准点 pageX
pageY：以可视区域为基准点

---

拖拽的原理

bar.onmousedown = function(event) {
    document.onmousemove = function(event) {
    }
    document.onmouseup = function() {
        document.onmousemove = null;   // 弹起鼠标不做任何操作
    }
}

---

防止选择拖动

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();