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秒这样