1、返回顶部（完全兼容各个浏览器，不含美化）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#div1 {
width:20px;
height:100px;
position:absolute;
top:0;
right:0;
background:#f00;
}
</style> <script>
//完全兼容所有浏览器
var bSys=null;//标志用户滚动了滚动条
var timer=null;
window.onload=window.onresize=window.onscroll=function() {
var oDiv=document.getElementById("div1");
var sctop=document.body.scrollTop||document.documentElement.scrollTop;
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
oDiv.style.top=sctop+t+'px';
//检测用户滚动了滚动条
if(!bSys) {
clearInterval(timer);
}
bSys=false; oDiv.onclick=function() {
timer=setInterval(function() {
var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
var ispeed=Math.floor(-scrolltop/8);
if(scrolltop==0) {
clearInterval(timer); //当scrolltop为0的时候，就停止这个定时器
}
bSys=true;
document.documentElement.scrollTop=document.body.scrollTop=scrolltop+ispeed;
},30);
};
};
</script>
</head> <body>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<div id="div1">返回顶部</div>
</body>
</html>
2、返回顶部2（完全兼容各个浏览器，含美化+缓冲）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部+缓冲</title>
<style>
#div1{width:100px; height:50px; position:absolute; right:0px; top:0px;background:red;}
span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;}
//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
</style>
<script> window.onload=window.onscroll=window.onresize=function() {
var oDiv=document.getElementById("div1");
var sct=document.documentElement.scrollTop||document.body.scrollTop;
var t=sct+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
startMove(parseInt(t)); //scrolltop,ff/ie:document.documentElement chrome:document.body获取
}; var timer=null;
function startMove(iTarget) {
var oDiv=document.getElementById("div1");
var iSpeed=null;
clearInterval(timer);
timer=setInterval(function() {
iSpeed=(iTarget-oDiv.offsetTop)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //变速改变速度
if(oDiv.offsetTop==iTarget) {
clearInterval(timer);
}
else {
oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
}
},30);
}
</script>
</head>
<body style="height:2000px;">
</body>
</html>
3、拖拽（完全兼容各个浏览器，不含美化）
function drag() {
var oDiv=document.getElementById('div1');
var disX=disY=0;
oDiv.onmousedown=function(ev) {
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;//保存物体以鼠标单击瞬间时的位置
document.onmousemove=function(ev) {
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0)
l=0;
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
l=document.documentElement.clientWidth-oDiv.offsetWidth;
if(t<0)
t=0;
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
t=document.documentElement.clientHeight-oDiv.offsetHeight;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function() {
document.onmousemove=document.onmouseup=null;
};
return false;//解决ff早期的bug发生
};
}4、缓冲运动（//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:100px; height:50px; position:absolute; left:700px; top:50px;background:red;}
span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;}
//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8
</style>
<script>
window.onload=function() {
var oDiv=document.getElementById("div1");
var obt=document.getElementById("obt");
var timer=null;
var iSpeed=null;
var iTarget=300;
obt.onclick=function() {
clearInterval(timer); timer=setInterval(function() {
iSpeed=(iTarget-oDiv.offsetLeft)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(oDiv.offsetLeft==iTarget) {
clearInterval(timer);
}
else {
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
};
};
</script>
</head> <body>
<input type="button" value="开始运动" id="obt"/>
<div id="div1"></div>
<span></span>
</body>
</html>
5、多个定时器共同进行
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:70px; height:30px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload=function() {
var divs=document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
divs[i].onmouseover=function() {startMove(this, 300);};
divs[i].onmouseout=function() {startMove(this, 70);};
}
};
//var timer=null; 此处用了一个共用的定时器timer
function startMove(obj, iTarget) {
var iSpeed=null;
clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）
obj.timer=setInterval(function() {
iSpeed=(iTarget-obj.offsetWidth)/8;
iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
if(obj.offsetWidth==iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width=obj.offsetWidth+iSpeed+'px';
}
}, 30);
} </script>
</head> <body>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
</body>
</html>
6、多个淡入淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;}
</style> <script>
//var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用
//取html中标签中的行内样式：style
//取非行内样式：ff:getComputeStyle ie:currentStyle
//取所有样式的通用写法
function getStyle(obj, attr) {
if(obj.currentStyle)
return obj.currentStyle[attr];
else
return obj.getComputeStyle(obj, false)[attr];
} function startMove(obj, iTarget) {
var iSpeed=null;
clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）
obj.timer=setInterval(function() {
iSpeed=(iTarget-obj.alpha)/8;
iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
if(obj.alpha==iTarget) {
clearInterval(obj.timer);
} else {
obj.alpha+=iSpeed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
}, 30);
} window.onload=function() {
var divs=document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
divs[i].alpha=30;
divs[i].onmouseover=function() {startMove(this, 100);};
divs[i].onmouseout=function() {startMove(this, 30);};
}
}; </script>
</head> <body>
<div></div>
<div></div>
<div></div>
<div></div> </body>
</html>
7、通用动画带渐变
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity=30); opacity:0.3;}
</style> <script>
//var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用
//取html中标签中的行内样式：style
//取非行内样式：ff:getComputeStyle ie:currentStyle--->替换offsetXXX之类的获取
//，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border）
//取所有样式的通用写法
function getStyle(obj, attr) {
if(obj.currentStyle)
return obj.currentStyle[attr];
else
return obj.getComputeStyle(obj, false)[attr];
} function startMove(obj, attr, iTarget) {
var iSpeed=null;
clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）
obj.timer=setInterval(function() {
var iCur=null;
if(attr=='opacity') {
iCur=parseInt(100*parseFloat(getStyle(obj, attr)));
//获得指定对象属性的值,小数很容易爆发问题存在，避免小数发生问题，这里采用抛出小数部分，parseInt
} else {
iCur=parseInt(getStyle(obj, attr));
//取非行内样式：ff:getComputeStyle ie:currentStyle--->替换offsetXXX之类的获取
//，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border）
//取所有样式的通用写法
}
iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
if(iCur==iTarget) {
clearInterval(obj.timer);
} else {
if(attr=='opacity') {
obj.style[attr]=(iCur+iSpeed)/100;
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
document.getElementById('tct').value=obj.style[attr];
} else {
obj.style[attr]=iCur+iSpeed+'px';
}
}
}, 30);
} window.onload=function() {
var divs=document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
divs[i].alpha=30;
divs[i].onmouseover=function() {startMove(this, 'opacity', 100);};
divs[i].onmouseout=function() {startMove(this, 'opacity', 30);};
}
};
</script>
</head> <body>
<input type="text" value="" id="tct"/>
<div></div>
<div></div>
<div></div>
<div></div> </body>
</html>
8、FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复</title>
<link rel="stylesheet" type="text/css" href="miao_style.css">
<script src="../move.js"></script>
<script>
function getClass(oParent, sClass) {
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0; i<aEle.length; i++) {
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
} window.onload=function() {
var oDiv=document.getElementById('playimages');
//左右按钮
var oBtnPrev=getClass(oDiv, 'prev')[0];
var oBtnNext=getClass(oDiv, 'next')[0];
var oMarkLeft=getClass(oDiv, 'mark_left')[0];
var oMarkRight=getClass(oDiv, 'mark_right')[0];
//小图点击
var oSmallUl=getClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0];
var aSmallLi=oSmallUl.getElementsByTagName('li');
var oBigUl=getClass(oDiv, 'big_pic')[0];
var aBigLi=oBigUl.getElementsByTagName('li');
var iNow=0;
var iMinZindex=2 ;
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
startMove(oBtnPrev, 'opacity', 100);
}; oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
startMove(oBtnPrev, 'opacity', 0);
}; oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
startMove(oBtnNext, 'opacity', 100);
}; oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
startMove(oBtnNext, 'opacity', 0);
};
oSmallUl.style.width=aSmallLi[0].offsetWidth*aSmallLi.length+'px';
for(var i=0; i<aSmallLi.length; i++) {
aSmallLi[i].index=i;
aSmallLi[i].onmouseover=function(){
startMove(this, 'opacity', 100);
}; aSmallLi[i].onmouseout=function(){
if(this.index!=iNow) {
startMove(this, 'opacity', 60);
}
}; aSmallLi[i].onclick=function() { if(this.index==0) return;
iNow=this.index;
tab();
}; function tab() {
for(var j=0; j<aSmallLi.length; j++) {
startMove(aSmallLi[j], 'opacity', 60);
}
startMove(aSmallLi[iNow], 'opacity', 100);
aBigLi[iNow].style.zIndex=iMinZindex++;
aBigLi[iNow].style.height=0+'px';
//大图上下动
startMove(aBigLi[iNow], 'height', oBigUl.offsetHeight);
//小图左右动
if(iNow==0) {
startMove(oSmallUl, 'left', 0);
} else if(iNow==aSmallLi.length-1) {
startMove(oSmallUl, 'left', -(iNow-2)*aSmallLi[0].offsetWidth);
} else {
startMove(oSmallUl, 'left', -(iNow-1)*aSmallLi[0].offsetWidth);
}
} //向前
oBtnPrev.onclick=function() {
iNow--;
if(iNow==-1)
iNow=aSmallLi.length-1;
tab();
};
//向后
oBtnNext.onclick=function() {
iNow++;
if(iNow==aSmallLi.length)
iNow=0;
tab();
};
} };
</script>
</head> <body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div> <div class="text">加载图片说明……</div>
<div class="length">计算图片数量……</div> <a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<div class="bg"></div> <li style="z-index:1;"><img src="data:images/1.jpg" /></li>
<li><img src="data:images/2.jpg" /></li>
<li><img src="data:images/3.jpg" /></li>
<li><img src="data:images/4.jpg" /></li>
<li><img src="data:images/5.jpg" /></li>
<li><img src="data:images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter: 100; opacity: 1;"><img src="data:images/1.jpg" /></li>
<li><img src="data:images/2.jpg" /></li>
<li><img src="data:images/3.jpg" /></li>
<li><img src="data:images/4.jpg" /></li>
<li><img src="data:images/5.jpg" /></li>
<li><img src="data:images/6.jpg" /></li>
</ul>
</div>
</div> </body>
</html>