回顾
定时器
setInterval(函数,时间); //无限循环
clearInterval(定时器id) //清除--无限循环 定时器
setTimeout(函数,时间) //一次性定时器
clearTimeout(定时器id) //清除一次性定时器
动画函数–offset系列(获取元属相关的样式属性的值)
* offsetWidth:获取元素的宽
* offsetHeight:获取元素的高
* offsetLeft:获取元素距离左边位置的值
* offsetTop:获取元素距离上面位置的值
值：
1.没有脱离文档流:
*offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin
2. 脱离文档流了(用了定位)
* 主要是自己的left和自己的margin
完整轮播图的封装
1.根据ul中li的个数(图片的张数)动态创建li，并且加入到ol中，作为小按钮
为每一个ol中的li添加鼠标进入/离开及点击事件(为每个li创建索引---排它)
2.设置ol中第一个li设置默认背景颜色；把ul中第一个li克隆追加到ul末尾
3.左右焦点的div显示和隐藏
4.为左右按钮注册点击事件
每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是5),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片
设置小按钮的背景颜色
左边按钮,需要判断pic值是不是0,如果是0此时pic=5,ul的left为5*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第五个图片
5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数
动画函数–scroll系列(卷曲-滚动)
* scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
* scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高
console.log(my$("dv").offsetWidth);//元素的宽,有边框
console.log(my$("dv").offsetHeight);//元素的高,有边框
console.log(my$("dv").scrollWidth);//元素中内容的实际的宽
console.log(my$("dv").scrollHeight);//元素中内容的实际的高
console.log(my$("dv").scrollTop);//向上卷曲出去的距离
console.log(my$("dv").scrollLeft);//向左卷曲出去的距离
div的滚动事件
my$("dv").onscroll = function(){ console.log(this.scrollTop) };
封装getscroll函数
//获取页面卷曲距离----返回值-对象
function getScroll(){
return {
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft,
};
}
案例筋斗云导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
body {
background-color: #333;
}
.nav {
width: 800px;
height: 42px;
margin: 100px auto;
background: url(images/rss.png) right center no-repeat;
background-color: #fff;
border-radius: 10px;
position: relative;
}
.nav li {
width: 83px;
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}
.nav span {
position: absolute;
top: 0;
left: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}
ul {
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<span id="cloud"></span>
<ul id="navBar">
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
<li>武汉校区</li>
<li>关于我们</li>
<li>联系我们</li>
<li>招贤纳士</li>
</ul>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
//元素水平变速移动动画(又快到慢)
//任意一个元素水平移动到指定位置
//element--元素对象，target--目标位置，速度-越小越快(10-100)
//目标元素需要脱离文档流--->position：absolute;
function animateMoveHorizontal2(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step); //向上/向下取整
current += step;
element.style.left = current + "px";
if(current==target) {
//清理定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
}, 20);
}
var cloud = my$("cloud");
var liList = my$("navBar").children;
for(var i=0;i<liList.length;i++){
liList[i].onmouseover = onmouseoverHandle;
liList[i].onclick = onclickHandle;
liList[i].onmouseout = onmouseoutHandle;
}
function onmouseoverHandle(){
animateMoveHorizontal2(cloud,this.offsetLeft);
}
var lastPosition = 0;
function onclickHandle(){
lastPosition = this.offsetLeft;
}
function onmouseoutHandle(){
animateMoveHorizontal2(cloud,lastPosition);
}
</script>
</body>
</html>
封装变速动画函数
0.获取任意一个元素的任意一个样式属性的值
1.元素匀速水平移动到指定位置
2.元素变速水平移动到指定位置
3.元素指定样式属性变速达到指定值(又快到慢)
4.元素多个样式属性变速达到指定值
5.完整版元素多个样式属性变速达到指定值+回调函数
函数封装
1.获取页面卷曲距离----返回值-对象
function getScroll(){
return {
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
};
}
-------------------------------------------------------------------------------------------
2.获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//谷歌,火狐-------------------------IE8
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
//返回值可能为auto----css未设置该属性,有些浏览显示auto-->实为0;
}
-------------------------------------------------------------------------------------------------
3.最终版-----任意元素的任意数值样式属性(值为数字的样式属性),变速(由快到慢)变化到指定值
参数1:待操作的标签元素对象
参数2:欲变化的样式属性名:值----Jsion键值对
参数3:回调函数(可省略)
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定时器
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,全部到达目标
//遍历json对象中的每个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是不是opacity
if (attr == "opacity") {
//获取元素的当前的透明度,当前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目标的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} else {
//普通的属性
//获取元素这个属性的当前的值
var current = parseInt(getStyle(element, attr));
//当前的属性对应的目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current + "px";
}
//是否到达目标
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
}, 20);
}
案例
1.手风琴
2.关机动画
3.旋转木马轮播图
动画函数–client系列(可视区域)
1.clientWidth：可视区域的宽(没有边框),边框内部的宽度
2.clientHeight：可视区域的高(没有边框),边框内部的高度
3.clientTop：当前元素到界面上侧边框的宽度
4.clientLeft：当前元素到界面左侧边框的宽度
pageX、pageY 元素离页面边界的距离//谷歌、火狐支持，IE8不支持