标签：
速度动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度动画</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
#ob{width:200px;height: 200px;background-color:red;position:relative;left: -200px;}
#sh{width:50px;height:50px;background-color: green;position:absolute;left:200px;top:75px;}
</style>
</head>
<body>
<div id="ob"><span id="sh">分享</span></div>
<script type="text/javascript">
window.onload=function(){
var ob=document.getElementById(‘ob‘);
var sh=document.getElementById(‘sh‘);
//无参数
/*ob.onmouseover=function(){
startMove();
}
ob.onmouseout=function(){
stopMove();
}*/
//有参数
ob.onmouseover=function(){
startMove(0,10);
}
ob.onmouseout=function(){
stopMove(-200,10);
}
}
//无参数
/*var timer=null;
function startMove(){
var ob=document.getElementById(‘ob‘);
clearInterval(timer);
timer=setInterval(function(){
if(ob.offsetLeft==0){
clearInterval(timer);
}else{
ob.style.left=ob.offsetLeft+10+‘px‘;
}
},30);
}
function stopMove(){
var ob=document.getElementById(‘ob‘);
clearInterval(timer);
timer=setInterval(function(){
if(ob.offsetLeft==-200){
clearInterval(timer);
}else{
ob.style.left=ob.offsetLeft-10+‘px‘;
}
},30);
}*/
//有参数
var timer=null;
function startMove(tar,spe){
var ob=document.getElementById(‘ob‘);
clearInterval(timer);
timer=setInterval(function(){
if(ob.offsetLeft==tar){
clearInterval(timer);
}else{
ob.style.left=ob.offsetLeft+spe+‘px‘;
}
},30);
}
function stopMove(tar,spe){
var ob=document.getElementById(‘ob‘);
clearInterval(timer);
timer=setInterval(function(){
if(ob.offsetLeft==tar){
clearInterval(timer);
}else{
ob.style.left=ob.offsetLeft-spe+‘px‘;
}
},30);
}
</script>
</body>
</html>
透明度动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#div1{width: 200px;height: 200px;background-color: red;filter:alpha(opacity:30);opacity: 0.3;}
</style>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById(‘div1‘);
div1.onmouseover=function(){
startMove(100);
}
div1.onmouseout=function(){
Move(30);
}
}
var timer=null;
var alpha=30;
function startMove(tar){
var div1=document.getElementById(‘div1‘);
clearInterval(timer);
timer=setInterval(function(){
if (alpha==tar) {
clearInterval(timer);
}else{
alpha+=10;
div1.style.filter=‘alpha(opacity:‘+alpha+‘)‘;
div1.style.opacity=alpha/100;
}
},30);
}
function Move(tar){
var div1=document.getElementById(‘div1‘);
clearInterval(timer);
timer=setInterval(function(){
if (alpha==tar) {
clearInterval(timer);
}else{
alpha-=10;
div1.style.filter=‘alpha(opacity:‘+alpha+‘)‘;
div1.style.opacity=alpha/100;
}
},30);
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/td-tkzc/p/5792412.html
