前端基本功--网页特效1 11.11

一、offset家族

1. offset （自己的）
   js中有一套方便获取元素尺寸的方法：offset。

2. 图片1.png

3. offsetWidth offsetHeight
   得到对象的宽度和高度。
   offsetWidth = width + border + padding
   div.style.width 只能得到行内（body中的css样式，行内/嵌入/外链）的数值。

4. offsetLeft offsetTop
   返回距离上级盒子（最近的带有定位）左边/上边的位置。
   如果父级都没有定位则以body 为准，这里的父级指的是所有上一级，不仅仅指的是父亲，还可以是 爷爷 曾爷爷。。
   从父级的padding开始算的，border不算， 就是子盒子到定位的父盒子边框到边框的距离

• 筋斗云

   var cloud = document.getElementById("cloud");
    var nav = document.getElementById("nav");
    var lis = nav.children[1].children;
    var current = 0;
    for(i = 0 ;i < lis.length; i++){
        lis[i].onmouseover = function(){
           target = this.offsetLeft;
        }
        lis[i].onmouseout = function(){
            target = current;
        }
        lis[i].onclick = function(){
            current = this.offsetLeft;
        }
    }//error：写成i<=
    var leader = 0 ,target = 0;
    setInterval(function(){
        leader = leader +( target - leader)/10;
        cloud.style.left = leader + "px"; 
    },30);

5. offsetParent
   返回对象的父亲 （带有定位的、 不一定是亲的）
   parentNode：返回父亲（亲的）
   如果当前元素的父级元素没有进行CSS定位（position relative），offsetParent为body。
   如果当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。
6. offsetTop style.top 的区别
   （1）、最大区别是offsetLeft 可以返回没有定位盒子的距离左侧的位置， 而 style.top 不可以 只有定位的盒子 才有 left top right。
   （2）、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
   style.left = 300px parseInt（300px）想要相加就用parseInt。
   （3）、offsetTop 只读，而 style.top 可读写（可以更改值）。
   （4）、如果没有给 HTML元素指定过 top样式，则 style.top 返回的是空字符串。
   （5）、最重要的区别style.left 只能得到行内样式，offsetLeft 不需要。

二、事件对象

1. onmouseover onmouseout onclick .....等都是事件。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
   体会

 document.onclick = function(event){  // 文档中点击
        // console.log(window.event.clientX);  ie 678
        /*console.log(event.clientX);
        console.log(event.clientY);*/
        var event = event || window.event;   // 兼容性写法
        console.log(event.clientY);// 页面
        console.log(event.pageY);//页面+滚动条
        console.log(event.screenY);//电脑屏幕

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

2. pageX clientX screenX 区别
   screen X screenY， 是以我们的电脑屏幕 为基准点
   pageX pageY，以我们的文档 （绝对定位） 的基准点 对齐（加上滚动条之间隐藏区域） ie678 不认识
   clientX clientY，以 可视区域 为基准点 类似于固定定位
3. 鼠标点击对象移动
   document.onclick :点击dom中的对象，实现图的移动

    var image = document.getElementById("image"); 
    document.onclick = function(event){
        var event = event || window.event; //error忘记这个dom中的事件对象了
        targetX = event.clientX - image.offsetWidth/2;
        targetY = event.clientY - image.offsetHeight/2;//error 忘记除2 是减号
    }
    var leaderX = 0, targetX = 0, leaderY = 0, targetY = 0;
    setInterval(function(){
        leaderX = leaderX + (targetX - leaderX ) / 10;
        leaderY = leaderY + (targetY - leaderY ) / 10;
        image.style.left = leaderX + "px";
        image.style.top = leaderY + "px";
    },8);

三、常用事件

1. 常用事件
   onclick
   onmouseover 鼠标经过
   onmouseout 鼠标离开
   onmousedown 鼠标按下
   onmouseup 鼠标弹起
   onmousemove 当鼠标移动的时候 就是说，鼠标移动一像素就会执行的事件。

• div.onmouseover 和 div.onmousemove 区别
  他们相同点 都是 经过 div 才会触发
  div.onmouseover 经过只触发一次。
  div.onmousemove 每移动一像素，就会触发一次 。

2. 放大镜
   思路总结：
   css定位很重要，放大镜定位在小图片中，大图片定位在大盒子中，大图片和放大镜隐藏，移动时出现，首先设置放大镜在小图片中的移动位置限制，再设置右边盒子的移动大小。

    function $(id) {
        return document.getElementById(id);
    } 
    var small = $("box").children[0];
    var big  = $("box").children[1];
    var yellow = small.children[1];
    var bigimage = big.children[0];
    small.onmouseover = function(){
        big.style.display = "block";
        yellow.style.display = "block";
    }
    small.onmouseout = function(){
        big.style.display = "none";
        yellow.style.display = "none";
    }
    small.onmousemove = function(event){
        var event = event || window.event;
        //鼠标移动黄色块在小盒子里面的变化，需要计算
        var x = event.clientX - this.offsetParent.offsetLeft - yellow.offsetWidth/2;
        var y = event.clientY - this.offsetParent.offsetTop - yellow.offsetHeight/2;
        if(x<0){
            x = 0 +"px";
        }
        else if(x>this.offsetWidth - yellow.offsetWidth) {
            x = this.offsetWidth - yellow.offsetWidth;
        }
        if(y<0) {
            y = 0 +"px";
        }
        else if(y>this.offsetHeight - yellow.offsetHeight) {
            y = this.offsetHeight - yellow.offsetHeight;
        }
        yellow.style.left = x+"px";
        yellow.style.top = y+"px";//鼠标在小盒子里面移动，改变的是黄色的位置。
        //大盒子里图片的移动是小盒子的倍数（大盒子/ 小盒子的倍数）
        bigimage.style.left = -x*big.offsetWidth/small.offsetWidth+"px";
        bigimage.style.top = -y*big.offsetHeight/small.offsetHeight+"px";
    }

防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

4. 滚动条
   思路：鼠标按下之后拖动，用鼠标位置减去小盒子的左边位置得出大盒子距离左侧位置，在用鼠标位置减去大盒子距离左边位置，鼠标事件触发后移动。

    function $(id) {
        return document.getElementById(id);
    } 
    var two = $("one").children[0];
    two.onmousedown = function(event){
        var event = event || window.event;
        var lefta = event.clientX - this.offsetLeft;
        var that = this;
        document.onmousemove = function(event){ //document写成two
         var event = event || window.event;
         that.style.left = event.clientX - lefta+"px";//忘记加px
         var val = parseInt(that.style.left);
         // alert(val);
         if (val < 0) {
            that.style.left = "0px";
         }
         else if (val > 490) {
            that.style.left = "490px";
         }
         $("three").style.width = that.style.left;
         $("span").innerHTML = "已经走了"+parseInt(parseInt(that.style.left)/($("one").offsetWidth-$("two").offsetWidth) * 100)+"%";
         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        }
        document.onmouseup = function(event){
            document.onmousemove = null;
        }
    }