JS06(offset家族、offsetParent、事件对象、点击跟随鼠标、在一个盒子内的坐标、放大镜、拖动水平条)
offset家族
offsetWidth offsetHeight得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width + border + padding
div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width 因为东西 只能得到行内的数值
offsetLeft offsetTop
返回距离上级盒子（最近的带有定位）左边的位置
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离
offsetParent
返回改对象的父级 （带有定位） 不一定是亲的爸爸
前面学过一个返回父亲(亲的) parentNode 有所区别
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
事件对象
var event = event || window.event; // 兼容性写法
console.log(event.clientY); 网页窗口
console.log(event.pageY);
console.log(event.screenY); 电脑屏幕
点击跟随鼠标
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #image { width: 99px; position: absolute; top:0; //默认0 left: 0; } </style> </head> <body> <img src="img.jpg" alt="" id="image"/> </body> </html> <script> var image = document.getElementById("image"); document.onclick = function(event) { var event = event || window.event; targetX = event.clientX - image.offsetWidth /2; targetY = event.clientY - image.offsetHeight /2; } // 缓动 var leaderX = 0, leaderY= 0, targetX = 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"; },10) </script>
在一个盒子内的坐标
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0; padding:0;} .demo { width: 400px; height: 400px; background-color: pink; margin: 100px; } </style> </head> <body> <div class="demo"></div> </body> </html> <script> var div = document.getElementsByTagName("div")[0]; div.onmousemove = function(event) { var event = event || window.event; var x = event.clientX - this.offsetLeft; var y = event.clientY - this.offsetTop; this.innerHTML = x + "px" + y + "px"; } </script>
放大镜
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin: 0;padding: 0;} img { vertical-align: top; } .box { width: 350px; height: 350px; margin:100px; border: 1px solid #ccc; position: relative; } .big { width: 450px; height: 450px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 100px; height: 100px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } .big img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box" id="fdj"> <!--小盒子--> <div class="small"> <img src="images/001.jpg" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="images/0001.jpg" alt=""/> </div> </div> </body> </html> <script> var fdj = document.getElementById("fdj"); // 获得最大的盒子 var small = fdj.children[0]; // 获得small 小图片 350盒子 var big = fdj.children[1]; // 获得 大图片 800 盒子 var mask = small.children[1]; // 小的黄色盒子 var bigImage = big.children[0]; // 大盒子里面的图片 small.onmouseover = function() { // 鼠标经过显示出他们 mask.style.display = "block"; big.style.display = "block"; } small.onmouseout = function() { mask.style.display = "none"; big.style.display = "none"; } // 鼠标在small 内移动 var x = 0; var y = 0; small.onmousemove = function(event) { var event = event || window.event; x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标 //alert(this.offsetLeft); y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2; if(x < 0) { x = 0; } else if(x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth; // 小盒子 减去 覆盖物 } if(y<0) { y = 0; } else if(y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px"; /*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 4个馒头 问 夫子今天吃了 3个馒头 娇子应该吃几个？ */ /*计算出他们的倍数 4 / 2 2倍 3 * 2 == 6个 */ /* 大图盒子 / 小图盒子 倍数 我们 再小图移动的距离 * 倍数 == 大图的位置*/ bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px"; bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px"; } </script>
拖动水平条
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin:0;padding:0;} .scroll { width: 400px; height: 8px; background-color: #ccc; margin: 100px; position: relative; } .bar { width: 10px; height: 22px; background-color: #369; position: absolute; top: -7px; left: 0; cursor: pointer; } .mask { width: 0; height: 100%; background-color: #369; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="scroll" id="scrollBar"> <div class="bar"></div> <div class="mask"></div> </div> <div id="demo"></div> </body> </html> <script> var scrollBar = document.getElementById("scrollBar"); var bar = scrollBar.children[0]; var mask = scrollBar.children[1]; var demo = document.getElementById("demo"); /* document.onmousedown = function() { alert(11); }*/ bar.onmousedown = function(event) { var event = event || window.event; var leftVal = event.clientX - this.offsetLeft; // alert(11); // 拖动一定写到 down 里面才可以 var that = this; document.onmousemove = function(event) { var event = event || window.event; that.style.left = event.clientX - leftVal + 'px'; //alert(that.style.left); var val = parseInt(that.style.left); if(val < 0) { that.style.left = 0; } else if(val > 390) { that.style.left = "390px"; } mask.style.width = that.style.left; // 遮罩盒子的宽度 //计算百分比 demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%"; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } document.onmouseup = function() { document.onmousemove = null; // 弹起鼠标不做任何操作 } } </script>
