学习过程中发现和遇到的问题
2017-04-01 10:38
274 查看
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秒这样
相关文章推荐
- [项目过程中所遇到的各种问题记录]学习篇——对工作以来的学习过的开源项目进行总结—动软代码生成工具
- ExtJS学习过程中遇到的问题笔记
- Extj4 学习过程中遇到的问题
- C++ 学习拾遗 —— 点滴记录C++学习过程中遇到的问题以及整理
- Makefile学习过程中遇到的问题
- 学习AJAX过程中遇到的一些问题
- jsp 菜鸟学习过程中遇到的页面逻辑,解耦等问题
- 在学习过程中遇到的问题
- grails 学习过程中遇到的一些问题
- Fragment的使用与学习及使用过程中遇到的问题
- hibernate 开发学习过程中遇到的问题:
- Android学习过程中遇到的问题及解决方法
- SSH AOP 学习过程中遇到的问题...
- PHP学习笔记(9)mongodb在wamp环境下的安装过程与遇到的问题排查
- 学习Spring过程中发现的一个怪问题
- [项目过程中所遇到的各种问题记录]学习篇——对工作以来的学习过的开源项目进行总结—DiscuzNt
- 学习HTK过程中遇到的问题
- 从今天起,我要记录学习过程中遇到的所有问题
- 第一篇博文 完全用来记录自己学习过程中遇到的问题
- Web开发敏捷之道-应用Rails进行敏捷Web开发-第三版 在用rails3.2学习过程中遇到的问题及解决方法