Offset家族: offsetWidth和 offsetHight 以及 offsetLeft和 offsetTop以及 offsetParent共同组成了offset家族
offsetWidth和offsetHight,能够获取元素节点的宽和高
offset宽/高 = 盒子自身的宽/高 + padding +border
(1)offsetWidth = width+padding+border
(2)offsetHeight = Height+padding+borderoffsetLeft和offsetTop(检测距离父盒子有定位的左/上面的距离)
(1)如果父级都没有定位则以body为准
(2)offsetLeft 从父亲的padding 开始算,父亲的border 不算
(3)在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
3.offsetParent:检测父系盒子中.带有定位.的父盒子节点
(1)返回改对象的父级:如果当前元素的父级元素没有进行CSS定位 (position为absolute或relative,fixed),offsetParent为body
(2)如果当前元素的父级元素中有CSS定位(position为absolute或relative,fixed),offsetParent取最近的那个父级元素。
4.定时器
btn.onclick = function () {
setInterval(function () {
console.log(parseInt(div.style.left));
div.style.left = div.offsetLeft + 10 + "px";
},10);
}
5.动画的封装
(1)清除定时器
btnArr[0].onclick = function () {
timer = setInterval(function () {
box2.style.left = box2.offsetLeft + 2 +"px";
if(box2.offsetLeft === 200){
clearInterval(timer)
}
},100);
}
(2)简单封装
function animate(target){
//要用定时器,先清除定时器
clearInterval(timer);
//我们要求盒子既能向前又能向后,那么我们的步长就得有正有负
//目标值如果大于当前值取正,目标值如果小于当前值取负
var speed = target>box2.offsetLeft?10:-10;
timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - box2.offsetLeft;
box2.style.left = box2.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长,那么就不能在前进了
//因为步长有正有负,所有转换成绝对值来比较
if(Math.abs(val)<Math.abs(speed)){
box2.style.left = target + "px";
clearInterval(timer);
}
},30)
}
(3)可多个节点调用
function animate(ele,target){
//要用定时器,先清除定时器
//一个盒子只能有一个定时器,这样儿的话,不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后,那么我们的步长就得有正有负
//目标值如果大于当前值取正,目标值如果小于当前值取负
var speed = target>ele.offsetLeft?10:-10;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长,那么就不能在前进了
//因为步长有正有负,所有转换成绝对值来比较
if(Math.abs(val)<Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30)
}
6.滑动焦点图–轮播图
<div class="inner" id="inner">
<ul>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
<li><img src="images/03.jpg" alt=""/></li>
<li><img src="images/04.jpg" alt=""/></li>
<li><img src="images/05.jpg" alt=""/></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
ul {
left: -100px;
width: 500%;
list-style: none;
position: absolute;
left: 0;
}
li {
float: left;
}
7.
.next #right {
right: 5px;
left: auto;
}
8.透明的:opacity:0.3;
9.鼠标小手:cursor:pointer;
10.兼容性问题
//1.获取事件源及相关元素。(老三步)
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children;
11.轮播图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单焦点图</title>
<style>
*{ padding:0; margin:0; list-style:none; border:0;}
.box {
width: 500px;
height: 200px;
margin: 100px auto;
padding: 5px;
border: 1px solid #cccccc;
position: relative;
}
.inner {
width: 500px;
height: 200px;
overflow:hidden;
position: absolute;
}
ol {
float: left;
position: absolute;
right: 10px;
bottom:10px;
line-height:20px;
text-align:center;
}
ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer;
}
li.current {
background:yellow;
}
.inner ul {
position: absolute;
left: 0;
width: 600%;
height: 200px;
list-style: none;
}
.inner ul li {
float: left;
}
.next {
display: none;
}
.next span {
top:50%;
left:5px;
margin-top: -20px;
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
font-family:'黑体';
font-size:30px;
font-weight:bold;
color:#fff;
opacity:0.3;
border:1px solid #fff;
cursor:pointer;
background:#000;
}
.next #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<ul>
<li><img src="images/temp/1.jpg" width="500" height="200" /></li>
<li><img src="images/temp/2.jpg" width="500" height="200" /></li>
<li><img src="images/temp/3.jpg" width="500" height="200" /></li>
<li><img src="images/temp/4.jpg" width="500" height="200" /></li>
<li><img src="images/temp/5.jpg" width="500" height="200" /></li>
</ul>
</div>
<ol class="point">
</ol>
<div class="next">
<span><</span>
<span id="right">></span>
</div>
</div>
<script>
//1.获取事件源和相关元素
var box = document.getElementsByClassName("box")[0];
var screen = box.firstElementChild || box.firstChild;
//获取显示宽度
var imgWidth = screen.offsetWidth ;
var ul = screen.firstElementChild || screen.firstChild;
var ol = box.children[1];
var next = box.lastElementChild || box.lastChild;
//左右按钮数组
var nextArr = next.children;
//2.复制第一张图片所在的li,添加到ul的最后面
var newImgLi = ul.children[0].cloneNode(true);
ul.appendChild(newImgLi);
//3.动态添加指示器
for(var i =0 ;i<ul.children.length-1;i++){
//创建一个节点
var olNewLi = document.createElement("li");
olNewLi.innerHTML = i+1;
ol.appendChild(olNewLi);
}
//指示器数组
var olLiArr = ol.children;
//默认第一个
olLiArr[0].className = "current";
//4.放在指示器上切换图片,为每一个定义事件
for(var i = 0 ; i < olLiArr.length; i ++){
//自定义属性,把属性值绑定到元素的index属性上,方便使用
olLiArr[i].index = i ;
olLiArr[i].onmouseover = function () {
//清除其他指示器上的属性
for(var j = 0 ; j < olLiArr.length; j ++){
olLiArr[j].className = "";
}
this.className = "current";
animate(ul,-this.index*imgWidth);
}
}
//5.添加计时器
var timer = setInterval(autoPlay,2000);
var point = 0 ; //指示器下标
var key = 0 ; //图片下标
//向右移动图片
function autoPlay() {
point ++ ;
if(point>olLiArr.length-1){
point = 0 ;
}
//清除其他计时器中的样式
for(var z=0; z<olLiArr.length;z++){
olLiArr[z].className = "";
}
olLiArr[point].className = "current";
key++;
if(key>olLiArr.length){
//立即跳到第一张
//图片已经滑动到最后一张,接下来,跳转到第一张,然后在滑动到第二张
ul.style.left = 0;
key = 1;
}
animate(ul,-key*imgWidth);
}
//7.鼠标放上去清楚定时器,显示左右按钮,移开后开启定时器
box.onmouseover = function () {
next.style.display = "block";
clearInterval(timer);
}
box.onmouseout = function () {
next.style.display = "none";
timer = setInterval(autoPlay,1000);
}
//8. 左右按钮滑动
//向左
nextArr[0].onclick = function () {
point -- ;
if(point<0){
point = 4 ;
}
//清除其他计时器中的样式
for(var z=0; z<olLiArr.length;z++){
olLiArr[z].className = "";
}
olLiArr[point].className = "current";
//通过控制key的自增来模拟图片的索引值,然后移动ul
key--;
if(key<0){
//立即跳到最后一张,而不是慢慢滑动到
//先移动到最后一张,然后key的值取之前一张的索引值,然后在向前移动
ul.style.left = - olLiArr.length * imgWidth + "px";
key = olLiArr.length-1;
}
animate(ul,-key*imgWidth);
}
//先右
nextArr[1].onclick = function () {
//右侧的和定时器一模一样
autoPlay();
}
//切换图片 target : 目标值位置
function animate(ele, target) {
//清除定时器
clearInterval(ele.timer);
//定义速度
var speed = target>ele.offsetLeft?10:-10;
//定义定时器
ele.timer = setInterval(function () {
//当前距离与目标值之差
var val = target - ele.offsetLeft;
//当前left加上速度
ele.style.left = ele.offsetLeft + speed + "px";
//停止条件 当前距离与目标值之差
if(Math.abs(val)<Math.abs(speed)){
//直接跳转到目标值
ele.style.left = target + "px"; //最终一步跳到目标值
//完成清楚定时器
clearInterval(ele.timer);
}
}, 10)
}
</script>
</body>
</html>
二.缓动动画
1.三个函数
(1)Math.ceil() 向上取整
(2)Math.floor() 向下取整
(3)Math.round(); 四舍五入
2.缓动动画原理
//盒子位置 = 盒子本身位置+(目标位置-盒子本身位置)/ 10;
leader=leader+(target-leader)/10;
3.缓动动画
btn.onclick = function () {
setInterval(function () {
//步长是目标位置和盒子自身位置的十分之一
//动画原理:盒子未来的位置 = 盒子当前的位置+步长
//越来越快到越来越慢
div.style.left = div.offsetLeft + (400-div.offsetLeft)/10 + "px";
},30);
}
4.缓动动画简单封装
btn.onclick = function () {
//要用定时器,先清定时器
clearInterval(timer);
timer = setInterval(function () {
var target = 0;
//缓动。如何缓动呢?步长越来越小....
// 步长用目标位置和盒子自身位置的十分之一
//最后10像素的时候都是1像素1像素的向目标位置移动,就能够到达指定位置。
var step = (target - div.offsetLeft)/10;
//每次获取步长都向上取整,这种情况就包含step<0.4的情况
//拓展:差值大于0的时候,向上取整,小于0的时候向下取整。
// step = Math.ceil(step);
step = step>0?Math.ceil(step):Math.floor(step);
// step = target>div.offsetLeft?Math.ceil(step):Math.floor(step);
//动画原理:盒子未来的位置 = 盒子当前的位置+步长
div.style.left = div.offsetLeft + step + "px";
//跳出条件:目标位置-当前位置的绝对值,小于步长
console.log(1);
if(Math.abs(0-div.offsetLeft)<Math.abs(step)){
div.style.left = 0+"px";
clearInterval(timer);
}
},30);
}
5.offsetLeft和style.left的值的获取问题
(1)offsetLeft : 获取盒子距离左侧具有定位的父盒子的距离(没有的body),四舍五入取整
(2)Style.left : 获取的是具体值。 (赋值的时候也是直接赋值)
6.缓动动画封装
//缓动动画封装
function animate(ele,target) {
//要用定时器,先清定时器
//一个萝卜一个坑儿,一个元素对应一个定时器
clearInterval(ele.timer);
//定义定时器
ele.timer = setInterval(function () {
//获取步长
//步长应该是越来越小的,缓动的算法。
var step = (target-ele.offsetLeft)/10;
//对步长进行二次加工(大于0向上取整,小于0项下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理: 目标位置 = 当前位置 + 步长
ele.style.left = ele.offsetLeft + step + "px";
//检测缓动动画有没有停止
console.log(1);
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
//处理小数赋值
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
7.筋斗云demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: rgba(0, 0, 0, 0.8);
}
.box {
width: 800px;
height: 42px;
background: #fff url("images/wifi.png") right center no-repeat;
margin: 200px auto;
border-radius: 8px;
position: relative;
}
ul {
list-style: none;
position: relative;
}
li {
float: left;
width: 83px;
height: 42px;
text-align: center;
font: 500 16px/42px "simsun";
cursor: pointer;
}
span {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: url("images/cloud.gif") no-repeat;
}
</style>
<script>
window.onload = function () {
//需求1:鼠标放到哪个li上面,span对应移动到该li上。移开后,回到原位置。
//需求2:鼠标点击那个li记录该li标签,移开的时候span回到该记录的li标签上。
//步骤:
//1.老三步
//2.计数器
//需求1:鼠标放到哪个li上面,span对应移动到该li上。移开后,回到原位置。
//1.老三步
//获取事件源 ,一次移动的宽度单位
var liArr = document.getElementsByTagName("li");
var liWidth = liArr[0].offsetWidth;
var span = document.getElementsByTagName("span")[0];
//计数器
var count = 0; //记录点击的位置
//for循环绑定事件 //绑定事件,为每个li绑定事件
for(var i=0;i<liArr.length;i++){
//自定义属性,然后绑定index属性为索引值 方便后面使用 this.index
liArr[i].index = i;
//鼠标进入事件
liArr[i].onmouseover = function () {
//让span运动到该li的索引值位置
//图片运动需要封装的方法
animate(span,this.index*liWidth);
}
//鼠标移开
liArr[i].onmouseout = function () {
//让span运动到该li的索引值位置
//图片运动需要封装的方法
animate(span,count*liWidth);
}
//点击事件,记录功能
liArr[i].onclick = function () {
//需要一个计数器,每次点击以后把所以只记录下来
//因为onmouseout事件要用到这个计数器,所以应该是一个全局变量
count = this.index;
animate(span,count*liWidth);
}
}
//缓动动画封装
function animate(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//步长
var step = (target-ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
//直接跳到目标值
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},18);
}
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>活动策划</li>
<li>师资力量</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
</body>
</html>
二.Scroll家族组成
1.ScrollWidth和scrollHeight(不包括border)
(1)检测盒子的宽高。(调用者:节点元素。属性。)
(2)盒子内容的宽高。(如果有内容超出了,显示内容的高度)
(3)scrollWidth和scrollHeight不包括border和margin
(4)scrollWidth = width + padding;
2.滑动窗口
window.onscroll = function () {
console.log(1);
}
3.scrollTop和scrollLeft
(1)网页,被浏览器遮挡的头部和左边部分
(2)兼容写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
4.获取title、body、head、html标签
(1)document.title — 文档标题;
(2)document.head — 文档的头标签
(3)document.body — 文档的body标签
(4)document.documentElement — 这个很重要
它表示文档的html标签, 也就是说,
基本结构当中的html标签并不是通过document.html 去访问的,而是document.documentElement
5.封装一个兼容的scroll().返回值是json,用scroll().top获取scrollTop
封装一个兼容的scroll().返回值是json,用scroll().left获取scrollLeft
function scroll(){
//如果这个属性存在,那么返回值应该是0-无穷大
//如果没有返回值是undefined;
//只要判断不是undefined就可以调用此方法
//练习使用此种封装
if(window.pageYOffset !== undefined){
// var json = {
// "top": window.pageYOffset,
// "left": window.pageXOffset
// };
// return json;
return {
"top": window.pageYOffset,
"left": window.pageXOffset
};
}else if(document.compatMode === "CSS1Compat"){
return {
"top": document.documentElement.scrollTop,
"left": document.documentElement.scrollLeft
};
}else{
return {
"top": document.body.scrollTop,
"left": document.body.scrollLeft
};
}
//简单封装
// return {
// "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
// "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
// }
}
window.onscroll = function () {
// var json = scroll();
// json.top;
console.log(scroll().top);
console.log(scroll().left);
}
6.标题栏滑动到一定位置固定—固定标题栏
window.onload = function () {
//需求1:当我们滚动界面的时候,被卷曲的头部超过第二个盒子距离顶部的位置,那么直接给第二个盒子加类名.fixed
//需求2:当我们滚动界面的时候,被卷曲的头部小于第二个盒子距离顶部的位置,那么直接给第二个盒子取消类名.fixed
//步骤:
//1.老三步。
//2.判断 ,被卷曲的头部的大小
//3.满足条件添加类,否则删除类
//1.老三步。
var topDiv = document.getElementById("top");
var height = topDiv.offsetHeight;
var middle = document.getElementById("Q-nav1");
var main = document.getElementById("main");
window.onscroll = function () {
//2.判断 ,被卷曲的头部的大小
if(scroll().top > height){
//3.满足条件添加类,否则删除类
middle.className += " fixed";
//第二个盒子不占位置了,所以我们给第三个盒子一个上padding占位置,不出现盒子抖动问题
main.style.paddingTop = middle.offsetHeight+"px";
}else{
middle.className = "";
//清零
main.style.paddingTop = 0;
}
}
}
7.页面上下滑动
window.scrollTo(0,10);
8.小火箭返回顶部
<script>
window.onload = function () {
var img = document.getElementsByTagName("img")[0];
var leader = 0 ; //记录当前页面到顶部的距离
window.onscroll = function () {
if(scroll().top>200){
img.style.display = "block";
}else{
img.style.display = "none";
}
leader = scroll().top;
}
var timer = null ; //定时器
var target = 0 ; //目标值
//点击跳到顶部 由leader 变为 0
img.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
var step = (target - leader)/10;
leader = leader + step ; //记录滑动到的当前位置
window.scrollTo(0,leader);
//清除定时器
if(leader === 0 ){
clearInterval(timer);
}
},25);
}
}
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
</script>
======================================================================================
三. 第三大家族client
1.主要成员
(1)clientWidth 获取网页可视区域宽度(两种用法)
(2)clientHeight 获取网页可视区域高度(两种用法)
调用者不同,意义不同:
盒子调用: 指盒子本身
浏览器调用: 可视区域大小。
(3)clientX 鼠标距离可视区域左侧距离(event调用)
(4)clientY 鼠标距离可视区域上侧距离(event调用)
2.Width和height
(1) clientWidth = width + padding
(2)clientHeight = height + padding
(3)offsetWidth = width + padding + border
(4)offsetHeight = height + padding + border
(5)scrollWidth = 内容宽度(不包含border)
(6)scrollHeight = 内容高度(不包含border)
3.top和left
(1)offsetTop/offsetLeft
调用者:任意元素。(盒子为主)
作用:距离父系盒子中带有定位的距离。
(2)scrollTop/scrollLeft:
调用者:document.body.scrollTop/…..(window)
作用:浏览器无法显示的部分(被卷去的部分)
(3)clientY/clientX:
调用者:event.clientX(event)
作用:鼠标距离浏览器可视区域的距离(左、上)
4.Onresize事件
只要浏览器的大小改变,哪怕1像素,都会触动这个事件
获取屏幕可视区域的宽高
//新事件:浏览器大小变化事件(浏览器哪怕大小变化1px也会触动这个事件)
window.onresize = function () {
document.title = client().width + " "+ client().height;
}
//获取屏幕可视区域的宽高
function client(){
if(window.innerHeight !== undefined){
return {
"width": window.innerWidth,
"height": window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
}else{
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
4.事件总结
(1)window.onscroll 屏幕滑动
(2)window.onresize 浏览器大小变化
(3)window.onload 页面加载完毕
(4)div.onmousemove 鼠标在盒子上移动
(注意:不是盒子移动!!!)
(5)onmouseup/onmousedown == onclick
5.获得屏幕宽高 (屏幕像素) 1920*1080
window.screen.width
window.onresize = function () {
document.title = window.screen.width + " "+ window.screen.height;
}
6.事件冒泡
当一个元素上的事件被触发的时候,
比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡
7.阻止冒泡
取消冒泡就是取消这种机制,不触发祖先事件
(1)w3c的方法(火狐、谷歌、IE11):event.stopPropagation()
(2)IE10以下则是使用:event.cancelBubble = true
(3)兼容方法
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
8.隐藏模态框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,html {
height: 100%;
padding: 0;
margin: 0;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.6);
}
.login {
width: 400px;
height: 300px;
cursor: pointer;
background-color: #fff;
margin: 200px auto;
}
</style>
</head>
<body>
<div class="mask">
<div class="login" id="login"></div>
</div>
<a href="#">注册</a>
<a href="#">登陆</a>
<script src="jquery1.0.0.1.js"></script>
<script>
//需求:点击登录按钮,显示模态框。点击出去login以外的所有盒子隐藏模态框。
//步骤:
//1.给登录绑定事件
//2.给document绑定事件,因为可以冒泡,只要判断,点击的不是login,那么隐藏模态框
//1.给登录绑定事件
var mask = document.getElementsByClassName("mask")[0];
var a = document.getElementsByTagName("a")[1];
a.onclick = function (event) {
//显示模态框
show(mask);
//阻止冒泡
//自己处理,不传给父布局
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
//2.给document绑定事件,因为可以冒泡,只要判断,点击的不是login,那么隐藏模态框
document.onclick = function (event) {
//获取点击按钮后传递过来的值。
event = event || window.event;
//兼容获取事件触动时,被传递过来的对象
// var aaa = event.target || event.srcElement;
var aaa = event.target?event.target:event.srcElement;
//获取事件源
console.log(event.target);
//判断目标值的ID是否等于login,如果等于不隐藏盒子,否则隐藏盒子。
if(aaa.id !== "login"){
mask.style.display = "none";
}
}
</script>
</body>
</html>
=====
1.获取任意类型的CSS样式的属性值
Div.style.width
div.currentStyle.width
Window.getComputedStyle(div,null).width;
// 他们的公共使用变量或者字符串获取属性值的方法都是:去掉属性和点,然后加上中括号和属性的字符串形式。
Div.style["width"];
div.currentStyle["width"];
Window.getComputedStyle(div,null)["width"];
console.log(div.currentStyle.padding);
console.log(div.currentStyle["background-color"]);
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
console.log(getStyle(div,"padding"));
console.log(getStyle(div,"background-color"));
2.缓动动画封装(单个属性)
//参数变为3个
animate(div,"left",400);
animate(div,"width",400);
function animate(ele,attr,target){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//四部---获取初始值
//使用getStyle 获取属性值 没有就赋0
var leader = parseInt(getStyle(ele,attr)) || 0;
//1.获取步长
var step = (target - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[attr] = leader + "px";
//4.清除定时器
if(Math.abs(target-leader)<=Math.abs(step)){
ele.style[attr] = target + "px";
clearInterval(ele.timer);
}
},25);
}
3.缓动动画封装(多个属性)
var json = {"left":10,"top":200,"width":300,"height":200};
animate(div,json);
}
//参数变为3个
function animate(ele,json){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//遍历属性和值,分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
console.log(1);
//4.清除定时器
// if(Math.abs(json[k]-leader)<=Math.abs(step)){
// ele.style[k] = json[k] + "px";
// clearInterval(ele.timer);
// }
}
},25);
}
4.缓动动画封装(多个属性+回掉函数)
<body>
<button>运动到400然后回来</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json1 = {"left":300,"top":200,"width":300,"height":200};
var json2 = {"left":10,"top":30,"width":100,"height":100};
animate(div,json1, function () {
animate(div,json2, function () {
animate(div,json1);
});
});
}
//参数变为3个 ,参数为函数:执行部分代码后在执行函数
function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值,分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//这种情况会把整个定时器都关闭掉
/* if(Math.abs(json[k]-leader)<=Math.abs(step)){
ele.style[k] = json[k] + "px";
//把整个定时器都关了
clearInterval(ele.timer);
}*/
//判断: 目标值和当前值的差大于步长,就不能跳出循环
//不考虑小数的情况:目标位置和当前位置不相等,就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置,bool值才不会变成false;
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了,现在可以执行回调函数了
//只有传递了回调函数,才能执行
if(fn){
fn();
}
}
},25);
}
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
5.liArr[i].style.background = “url(images/”+(i+1)+”.jpg) no-repeat”;
6.窗口下移右转
<script>
window.onload = function () {
//需求:下面的盒子高度变为0,然后大盒子的宽在变为0.
var guanbi = document.getElementById("guanbi");
var box = guanbi.parentNode;
var b = document.getElementById("b");
guanbi.onclick = function () {
//下面的盒子高度变为0,然后大盒子的宽在变为0.
animate(b,{"height":0}, function () {
animate(box,{"width":0});
});
}
}
</script>
- 事件对象
//点击页面的任何部分
document.onclick = function (event) {
//兼容写法
event = event || window.event;
// console.log(event);
console.log(event);
console.log(event.timeStamp);
console.log(event.bubbles);
console.log(event.button);
console.log(event.pageX); //body
console.log(event.pageY);
console.log(event.screenX); //屏幕
console.log(event.screenY);
console.log(event.target);
console.log(event.type);
console.log(event.clientX);
console.log(event.clientY); //浏览器可视区域
}
8.获取整个页面的点击事件(获取鼠标的点击位置)
//整个页面的点击事件
document.onclick = function (event) {
event = event || window.event;
//鼠标在页面的位置 = 被卷去的部分+可视区域部分。
var pagey = event.pageY || scroll().top + event.clientY;
var pagex = event.pageX || scroll().left + event.clientX;
}