一、offset家族
-
offset （自己的）
js中有一套方便获取元素尺寸的方法：offset。 -
图片1.png
-
offsetWidth offsetHeight
得到对象的宽度和高度。
offsetWidth = width + border + padding
div.style.width 只能得到行内（body中的css样式，行内/嵌入/外链）的数值。 -
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);
- offsetParent
返回对象的父亲 （带有定位的、 不一定是亲的）
parentNode：返回父亲（亲的）
如果当前元素的父级元素没有进行CSS定位（position relative），offsetParent为body。
如果当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。 - 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 不需要。
二、事件对象
- 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 光标相对于该网页的水平位置
- pageX clientX screenX 区别
screen X screenY， 是以我们的电脑屏幕 为基准点
pageX pageY，以我们的文档 （绝对定位） 的基准点 对齐（加上滚动条之间隐藏区域） ie678 不认识
clientX clientY，以 可视区域 为基准点 类似于固定定位 - 鼠标点击对象移动
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);
三、常用事件
- 常用事件
onclick
onmouseover 鼠标经过
onmouseout 鼠标离开
onmousedown 鼠标按下
onmouseup 鼠标弹起
onmousemove 当鼠标移动的时候 就是说，鼠标移动一像素就会执行的事件。
-
div.onmouseover 和 div.onmousemove 区别
他们相同点 都是 经过 div 才会触发
div.onmouseover 经过只触发一次。
div.onmousemove 每移动一像素，就会触发一次 。
- 放大镜
思路总结：
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();
- 滚动条
思路：鼠标按下之后拖动，用鼠标位置减去小盒子的左边位置得出大盒子距离左侧位置，在用鼠标位置减去大盒子距离左边位置，鼠标事件触发后移动。
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;
}
}
网友评论