<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Day5</title> <style> .box{ width: 500px; height: 500px; border: 2px dashed #000000; position: relative; } .dv1{ width: 300px; height: 300px; position: absolute; top: 50px; left: 60px ; background-color: #30ff8d; } .dv2{ width: 200px; height: 200px; position: absolute; right: 80px; background-color: #ff68ca; bottom: 40px; } #angel{ position: absolute; } </style> </head> <body> <div class = "box"> <div class="dv1"></div> <div class="dv2"></div> </div> <img src="images/tianshi.gif" alt="天使" id="angel"> <script> /* 利用定时器实现动画效果:通过每隔一点时间改变一次元素的一些样式属性，达到动画、渐变、过渡等效果 */ </script> <!-- 利用JS实现任意元素左右移动到任意位置元素移动的动画，并封装实现这一目的这个函数 见封装动画函数.html--> <!--轮播图案例--> <script> /* * 添加一个自定义属性：对象.setAttribute("属性名",属性值) * 获取自定义属性值：不能用.的方式,要用对象.getAttribute(属性名) * 克隆节点：节点.cloneNode(布尔值) 返回一个这个节点一样的节点，布尔值为true则克隆完整的节点，布尔值为false则只克隆外部，没有内容 * */ /* *用元素.style.属性只能获取标签内用style = "属性名：属性值;"里设置的属性，不能获取在头部的style标签中设置的属性 * 用DOM元素的一个方法可以获取任意方式设置的属性：对象.offsetLeft可以获取left属性值， * 注意：用style.属性可以获取，也可以修改属性值，但是用offset只能获取访问，不能修改属性值。 * 其他的还有offset方法 * element.offsetTop * 没有offsetRight和offsetBottom方法。 * element.offsetHeight * element.offsetWidth * */ var dv1 = document.getElementsByClassName("dv1")[0]; var dv2 = document.getElementsByClassName("dv2")[0]; console.log(dv1.style.top);//报错 console.log(dv1.offsetTop);//50 console.log(dv1.offsetLeft);//60 console.log(dv2.offsetLeft);//220 console.log(dv2.offsetTop);//260 console.log(dv1.offsetHeight);//300 console.log(dv1.offsetWidth);//300 /* * offsetLeft 和offsetTop: * 当目标元素没有定位时， * 获得的left和top包括：父元素的margin,border,padding,自身的margin。不包括自身的border和padding * *当目标元素使用定位，脱离文档流时： * 获得的left和top包括：自身定位的left、top和自身的margin * * */ //可以直接获取的DOM对象 document.body;//body document.title;//title document.documentElement;//获取html var mousePic = document.getElementById("angel"); console.log(mousePic); document.onmousemove = function (e) { var x = e.clientX; var y = e.clientY; console.log("x"+x); console.log("y"+y); //鼠标移动的事件函数参数中的clientX和clientY的值表示鼠标所在的可视范围的xy坐标 mousePic.style.left = x +"px"; mousePic.style.top = y + "px"; } </script> <script> </script> </body> </html>