1、scroll
scrollTop:向上卷曲出去的距离
scrollLeft:向左卷曲出去的距离
scollWidth:元素中内容实际的宽
scollHeight:元素中内容实际的高
2、固定导航栏
<div class="top" id="topPart"></div>
<div class="nav" id="navBar"></div>
<div class="main" id="mainPart"></div>
<script src="common.js"></script>
<script>
function getScroll(){
return{
obj.left:window.pageXOffset||document.documentElement.scrollLeft||socument.body.scrollLeft||0,
obj.top:window.pageYOffset||document.documentElement.scrollTop||socument.body.scrollTop||0
return obj;
};
}
window.οnscrοll=function(){
if(getScroll().top>=my$("topPart").offsetHeight){
my$("navBar").className="nav fixed";
my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
}else{
my$("navBar").className="nav";
my$("mainPart").style.marginTop="10px";
}
};
</script>
3、变速动画
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn1").οnclick=function(){
animate(my$("dv"),400);
};
my$("btn2").οnclick=function(){
animate(my$("dv"),800);
};
function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置
clearInterval(element.timeId);//先清理定时器
element.timeId=setInterval(function(){
var current=element.offsetLeft;//div当前位置
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
step=current<target?step:-step;//向左或向右
current+=step;//每次移动后的距离
element.style.left=current+"px";
if(current==target){
clearInterval(element.timeId);
}
//测试代码:console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20);
}
</script>
4、筋斗云
<div class="nav">
<span id="cloud"></span>
<ul id="navBar">
<li></li>
</ul>
</div>
<script src="common.js"></script>
<script>
function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置
clearInterval(element.timeId);//先清理定时器
element.timeId=setInterval(function(){
var current=element.offsetLeft;//div当前位置
var step=(target-current)/10;//(目标-当前)/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 list=my$("navBar").children;
for(i=0;i<list.length;i++){
list[i].οnmοuseοver=mouseoverHandle;
list[i].οnclick=clickHandle;
list[i].οnmοuseοut=mouseoutHandle;
}
function mouseoverHandle(){ //进入
//移动到鼠标此次进入的li的位置
animate(cloud,this.offsetLeft);
}
//点击的时候,记录上一次位置
var lastPosition=0;
function clickHandle(){ //点击
lastPosition=this.offsetLeft;
}
function mouseoutHandle(){ //离开
animate(cloud,lastPosition);
}
</script>
5、获取元素计算后的样式属性值
<input type="button" value="显示效果" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
my$("btn").οnclick=function(){
console.log(getStyle(my$("dv"),"top")); //测试
};
</script>
6、变速动画函数增加属性
<input type="button" value="显示效果" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn1").οnclick=function(){
animate(my$("dv"),"width",200);
}:
function getStyle(element,attr){ //获取任意一个元素的任意一个属性的当前值
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
};
function animate(element(元素),attr(属性名字),target(目标位置)){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var current=parseInt(getStyle(element,attr));
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//每次移动后的距离
element.style[attr]=current+"px";
if(current==target){ //是否到达目标
clearInterval(element.timeId);
}
//测试代码:console.log("目标:"+target+",当前:"+current+",每次移动步数:"+step);
},20);
}
</script>
*********增加多个属性********
my$("btn").οnclick=function(){
animate(my$("dv"),{"width":800,"height":400});
}:
var json={"width":800,"height"};
function animate(element(元素),json){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//(目标-当前)/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);
}
//测试代码:console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20);
}
*******回调函数*******执行完动画后执行回调函数
function animate(element(元素),json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//(目标-当前)/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();
}
}
//测试代码:console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20);
}
******透明度和层级******
function animate(element(元素),json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
if(attr=="opacity"){ //判断attr中是不是opacity
var current=getStyle(element,attr)*100; //元素当前透明度放大100倍
var target=json[attr]*100; //目标透明度放大100倍
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){ //判断是不是zIndex
element.style[attr]=json[attr];
}else{ //普通属性
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//(目标-当前)/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();
}
}
//测试代码:console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20);
}
my$("btn").οnclick=function(){
var json={"width":800,"height":400,"opacity":0.2,};
animate(my$("dv"),json,function(){
animate(my$("dv"),{"width":40,"height":50,"opacity":1,"zIndex":1000});
});
}:
7、手风琴效果
<div id="box">
<ul>
<li></li><li></li><li></li><li></li>
</ul>
</div>
<script src="common.js"></script>
<script>
function getStyle(element,attr){ //获取任意一个元素的任意一个属性的当前值
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element(元素),json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//(目标-当前)/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);
}
var list=my$("box").getElementsByTagName("li");
for(var i=0;i<lidt.length;i++){
list[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
list[i].οnmοuseοver=mouseoverHandle;
list[i].οnmοuseοut=mouseoutHandle;
}
function mouseoverHandle(){
for(var j=0;j<list.length;j++){
animate(list[j],{"width":100});
}
animate(this,{"width":800});
}
function mouseoutHandle(){
for(var j=0;j<list.length;j++){
animate(list[j],{"width":240});
}
}
</script>
8、旋转木马
<script src="common.js"></script>(含有动画函数封装)
<script>
var config=[{width:400,top:20,left:50,opacity:0.2,zIndex:2},{width:400,top:20,left:50,opacity:0.2,zIndex:2}];
window.οnlοad=function(){ //页面加载事件
var flag=true; //所有动画执行完毕
var list=my$("slide").getElementsByTagName("li");
function assign(){
for(var i=0;i<list.length;i++){
animate(list[i],config[i],function(){
flag=true;
});
}
}
assign();
my$("arrRight").οnclick=function(){
if(flag){
flag=false;
config.push(config.shift()); //顺序改变,追加(push),删掉第一个(shift)
assign(); //重新分配
}
};
my$("arrLeft").οnclick=function(){
if(flag){
flag=false;
config.unshift(config.pop ());
assign(); //重新分配
}
};
my$("wrap").οnmοuseοver=function(){
animate(my$("arrow"),{"opacity":1});
};
my$("wrap").οnmοuseοut=function(){
animate(my$("arrow"),{"opacity":0});
};
};
</script>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src=""></a></li>
<li><a href="#"><img src=""></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="" class="prev" id="arrleft"></a>
<a href="" class="next" id="arrright"></a>
</div>
</div>
</div>
9、client
clientWidth:可视区域的宽,没有边框,边框内容的宽度
clientHeight:可视区域的高,没有边框,边框内容的高度
clientLeft:左边框宽度
clientTop:上边框宽度