学习过程中发现和遇到的问题

1.offsetTop style.top 的区别

（1）最大区别在于  offsetLeft  可以返回没有定位盒子的距离左侧的位置。 而style.top不可以  只有定位的盒子 才有left  top right  

（2）offsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。

 style.left = 300px      parseInt（300px）    结果  300

parseInt（style.left）+ parseInt（style.left）  

（3）offsetTop只读（可以用得到值，但是不能更改值），而style.top可读写。

    （4）如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

    （5）最重要的区别  style.left只能得到 行内样式     offsetLeft随便

2.滚动条

红色盒子高度计算公式： 容器的高度 /内容的高度 *容器的高度

（内容盒子高度-大盒子高度）/(大盒子高度-点击盒子的高度) *点击盒子移动的数值

3.

functionstartDrop(current,move){
    current.onmousedown=function(event){
        varevent=event||window.event;
        // alert(event.clientX);
        // alert(move.offsetLeft);
        // x，y是鼠标距离盒子的left，top值，因为在拖动过程中，鼠标到盒子的距离是不变的;
        varx=event.clientX-move.offsetLeft;
        vary=event.clientY-move.offsetTop;
        // alert(x);
        // alert(y);
        document.onmousemove=function(event){
            varevent=event||window.event;
            move.style.left=event.clientX-x+"px";
            move.style.top=event.clientY-y+"px";
            varnum_left=parseInt(move.style.left);
            varnum_top=parseInt(move.style.top);
            num_left<0?move.style.left=0:move.style.left=event.clientX-x+"px";
            num_top<0?move.style.top=0:move.style.top=event.clientY-y+"px";
            window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
        }
    }
    document.onmouseup=function(){
        document.onmousemove=null;
    }
}
startDrop(drop,box);

 

在学习拖拽案例的时候，对于这两行代码没有看懂，后来发现，原来x，y是鼠标距离盒子的left，top值，因为在拖动过程中，鼠标到盒子的距离是不变的。

var x=event.clientX-move.offsetLeft;
var y=event.clientY-move.offsetTop;

4.

vargone=parseInt(bars/parseInt(scroll.offsetWidth-that.offsetWidth+"px")*100);
if(gone<=0){
    gone=0;
}else if(gone>=100){
    gone=100;
}
demo.innerHTML="已经走了："+gone+"%";

在学习水平滚动条的时候，虽然限制了拉出滚动条，但是下面百分比超出，最后发现还是要给百分比限制值。

5.

functionanimate(obj,target){
    clearInterval(obj.timer);
    varspeed =obj.offsetLeft< target? 10: -10;
    obj.timer= setInterval(function(){
        // console.log(obj.offsetLeft);
        // console.log(target);
        obj.style.left= obj.offsetLeft+ speed+ "px";
        varresult =target -obj.offsetLeft;
        if(Math.abs(result)<= 10){
            clearInterval(obj.timer);
            obj.style.left= target+ "px";
        }
    },10)
}

 

timer= setInterval(autoplay,1000);
function autoplay(){
    key++;
    if(key> ul_lis.length- 1){
        ul.style.left= 0;
        key= 1;
    }
    animate(ul,-key* 500);
    square++;
    // console.log(ol_lis.length);  // 5?
    if(square> ol_lis.length- 1){
        square= 0;
    }
    for(vari =0;i <ol_lis.length;i++){
        ol_lis[i].className= "";
    }
    ol_lis[square].className= "current";
}

 

在学习把动画函数运用到轮播图里的时候，如果把函数里的设置为30，它也会停顿，但是很小，再设置40，就跟不上下面设置的1秒小方块的tempo了，除非设置30，那下面就要改成2秒这样