<!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>
