<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day6</title>
<style>
* {
margin: 0;
padding: 0;
}
.dv {
width: 200px;
height: 200px;
border: 1px solid blueviolet;
/*overflow:scroll;*/
margin: 5px;
padding: 10px;
}
#btn1 {
position: absolute;
left: 250px;
top: 350px;
}
.top {
height: 100px;
background-color: #30ff8d;
}
.title {
height: 100px;
width: 100%;
display: block;
background-color: royalblue;
position: relative;
z-index: 99999;
}
#dv2 {
width: 100px;
height: 100px;
background-color: greenyellow;
position: relative;
}
#dv3 {
width: 100px;
height: 100px;
background-color: #ff97d8;
position: relative;
}
#dv4 {
position: relative;
width: 600px;
height: 50px;
background-color: #7daeff;
z-index: 0;
}
#dv5 {
position: relative;
width: 100px;
height: 100px;
background-color: #2bff6c;
}
#dv6 {
position: relative;
width: 100px;
height: 100px;
background-color: #ecff28;
}
#dv4 span {
display: inline-block;
width: 100px;
height: 50px;
position: absolute;
background: url(images/cloud.gif) no-repeat;
z-index: -1;
}
#uu {
width: 600px;
height: 50px;
}
#uu li {
width: 100px;
height: 50px;
display: inline-block;
float: left;
list-style: none;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 2;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="title">随动模块</div>
<div class="dv">
卷曲测试
</div>
<input type="button" value="按钮" id="btn1">
<br>
<br>
<div id="dv2"></div>
<input type="button" value="移动到400" id="btn2">
<input type="button" value="移动到800" id="btn3">
<br>
<br>
<br>
<div id="dv3"></div>
<input type="button" value="移动到400" id="btn4">
<input type="button" value="移动到800" id="btn5">
<br>
<br>
<br>
<div id="dv4">
<span id="cloud"></span>
<ul id="uu">
<li>张全蛋</li>
<li>面筋哥</li>
<li>波澜哥</li>
<li>蓝蓝路</li>
<li>游泳教练</li>
<li>王司徒</li>
</ul>
</div>
<br>
<br>
<br>
<div id="dv5"></div>
<input type="button" value="往下400" id="btn6">
<input type="button" value="宽度增加" id="btn7">
<br>
<br>
<div id="dv6"></div>
<input type="button" value="改变多个属性" id="btn8">
<script>
/*卷曲
* 1.offsetHeight 和 offsetWidth 包括padding和border,但是不包括margin
* 2.scrollHeight 和 scrollWidth 包括padding不包括border更不包括margin，
* 在内容没有超出盒子时，scrollHeight 和scrollWidth获得的是盒子内部高度和宽度
* 内容超出盒子时获得的是内容实际应有的高度和宽度。
*
*3.scrollTop 和 scrollLeft
* 获得的是内容卷曲出去的高度和宽度，当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。
* 滚动条向右拉同理
* */
var dv = document.getElementsByClassName("dv")[0];
var btn = document.getElementsByTagName("input")[0];
console.log(dv.offsetHeight); //222,说明offsetHeight包括padding和border,但是不包括margin offsetWidth同理
console.log(dv.scrollHeight); //220，说明scrollHeight 包括padding不包括border，scrollWidth同理
btn.onclick = function () {
dv.style.overflow = "scroll";
dv.innerHTML = "时维九月</br>序属三秋</br>潦水尽而寒潭清，烟光凝而暮山紫</br>" +
"俨骖騑于上路，访风景于崇阿</br>临帝子之长洲，得天人之旧馆</br>" +
"层峦耸翠，上出重霄；飞阁流丹，下临无地。</br>。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。";
console.log(dv.scrollHeight); //293，内部overflow设置了scroll，内部有了滚动条占了一部分距离，但是还是超出了220，说明scrollHeight在超出时获得的是实际内容的高度
console.log(dv.scrollWidth); //203，内部overflow设置了scroll，内部有了滚动条占了一部分距离
};
dv.onscroll = function () { //onscroll事件，拖动滚动条事件
console.log(dv.scrollTop);//拖动滚动条之后可以看出数字变化
};
</script>
<script>
/*
* 获取浏览器向上卷曲出的距离：
* 根据浏览器兼容性分为三个方法：window.pageYOffset document.documentElement.scrollTop document.body.scrollTop
* 要写兼容代码
* */
function getScroll() {
// var Obj = {} //返回一个对象，里面的属性为向上卷曲的距离和向左卷曲的距离
// obj.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// obj.left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
// return obj;
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
}
}
//测试
var tit = document.getElementsByClassName("title")[0];
window.onscroll = function () {
console.log(getScroll().top);
if (getScroll().top > 100) {
tit.style.position = "fixed";
tit.style.top = 0;
} else {
tit.style.position = "relative"; //能正常归位
}
// if(getScroll().top>100){
// tit.style.top = getScroll().top - 100 +"px";
//
// }else{
// tit.style.top = 0; //能正常归位
// }
};
</script>
<script>
//移动的函数
function move(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var temp = 10;
temp = target > current ? temp : -temp;
current += temp;
if (Math.abs(target - current) > Math.abs(temp)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 10);
}
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var dv2 = document.getElementById("dv2");
btn2.onclick = function () {
move(dv2, 400);
}
btn3.onclick = function () {
move(dv2, 800);
}
</script>
<script>
/*
* 由快到慢的移动效果：让每次移动的距离 = 距离/10
* 如果是正数向上取整，如果是负数向下取整
* 当距离越来越近时，每次移动的距离就越来越小，直到每次移动1直到目标位置
*
*
*
* */
function slowMove(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var temp = (target - current) / 10; //设置每次走得距离
temp = target > current ? Math.ceil(temp) : Math.floor(temp); //Math.ceil向上取整 Math.floor向下取整
current += temp;
element.style.left = current + "px";
if (target == current) {
clearInterval(element.timeId);//到达清理定时器
//这种移动方式绝对会到达目标位置，所以不需要判断距离
}
//测试
//console.log("target" + target + " current" + current + " temp" + temp);
}, 30);
}
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
var dv3 = document.getElementById("dv3");
btn4.onclick = function () {
slowMove(dv3, 400);
}
btn5.onclick = function () {
slowMove(dv3, 800);
}
</script>
<script>
//筋斗云案例
var list = document.getElementById("uu").children;
var cloud = document.getElementById("cloud");
for (var i = 0; i < list.length; i++) {
//循环注册事件
//鼠标进入
list[i].onmouseover = mouseoverHandle;
//鼠标离开
list[i].onmouseout = mouseoutHandle;
//点击
list[i].onclick = mouseClick;
}
function mouseoverHandle() {
slowMove(cloud, this.offsetLeft);
}
function mouseoutHandle() {
slowMove(cloud, lastPosition);//每次离开回到上次的位置
}
var lastPosition = 0;
function mouseClick() {
lastPosition = this.offsetLeft; //点击时保存这次的位置
}
</script>
<script>
/*
* 获取元素所有的CSS样式：
* window.getComputedStyle(对象，null)返回一个对象，里面为对象的CSS样式 //谷歌火狐
* 对象.currentStyle返回一个对象，里面为对象的CSS样式 IE8
*
*可以用次方法获取任意对象的任意CSS属性，获取得到的对象只读，不可以用这个方法修改样式信息
* 兼容代码如下
* */
// console.log( window.getComputedStyle(dv3,null));
// console.log( dv3.currentStyle(dv3,null));
function getStyle(element, attribute) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute];
}
console.log(getStyle(dv3, "backgroundColor"));
</script>
<script>
/*
* 可以设置任意一个属性的函数
* */
function getStyle(element, attribute) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute];
}
function attrChange(element, attribute, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = parseInt(getStyle(element, attribute));//得到当前的属性值,并转化为数字类型
var temp = (target - current) / 10; //设置每次改变得距离
temp = target > current ? Math.ceil(temp) : Math.floor(temp); //Math.ceil向上取整 Math.floor向下取整
current += temp;
element.style[attribute] = current + "px";//设置属性
if (target == current) {
clearInterval(element.timeId);//到达清理定时器
//这种移动方式绝对会到达目标位置，所以不需要判断距离
}
//测试
//console.log("target" + target + " current" + current + " temp" + temp);
}, 30);
}
var btn6 = document.getElementById("btn6");
var btn7 = document.getElementById("btn7");
var dv5 = document.getElementById("dv5");
btn6.onclick = function () {
attrChange(dv5, "top", 400);
};
btn7.onclick = function () {
attrChange(dv5, "width", 800);
}
</script>
<script>
/*
* 可以设置任意多个属性值
* 设置一个属性需要传入一个属性以及目标值
* 设置多个属性则需要传入多个属性及对应的目标值
* 可以传入一个对象:对象里包含多个键值对
*
* */
function getStyle(element, attribute) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute];
}
function attrsChange(element, json) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//for in 遍历对象,将每个属性都移动到目标位置
var flag = true;//假设全部到达
for (attr in json) {
var current = parseInt(getStyle(element, attr));//得到当前的属性值,并转化为数字类型
var target = json[attr];//获得目标值
var temp = (target - current) / 10; //设置每次改变得距离
temp = target > current ? Math.ceil(temp) : Math.floor(temp); //Math.ceil向上取整 Math.floor向下取整
current += temp;
element.style[attr] = current + "px";//设置属性
// if (target == current) {
// clearInterval(element.timeId);//这里的清理定时器不能放在for in内部了，因为当一个属性完成的时候就会触发他
//而此时其他属性可能还没达到目标值
if (current != target) {//遍历过程中判断每个属性的current与target是否相等，只要存在一个不相等，就flag为false，
flag = false;
}
}
//完成遍历之后判断flag
if (flag) {
clearInterval(element.timeId);
}
//测试
//console.log("target" + target + " current" + current + " temp" + temp);
}, 30);
}
var btn8 = document.getElementById("btn8");
var dv6 = document.getElementById("dv6");
btn8.onclick = function () {
var json = {"width": 200, "height": 300, "top": 80, "left": 40};
attrsChange(dv6, json);
};
</script>
</body>
</html>
