JS简单运动框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 0;
top: 50px;
}
</style>
<script>
var timer = null;
function startAction(){
var oDiv = document.getElementById('div1');
var speed = 7;
//开启一个定时器一定要将之前的定时器移除
clearInterval(timer);
timer= setInterval(function(){
//定时器到达终点和未到达终点一定要分开写条件
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}else
{
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startAction()" />
<div id="div1"></div>
</body>
</html>
分享到侧边栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 150px;
height: 200px;
background: green;
position: absolute;
left: -150px;
}
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: blue;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
//调用函数
oDiv.onmouseover = function(){
startMove(0);
};
oDiv.onmouseout = function(){
startMove(-150)
}
};
var timer = null;
function startMove(iTarget){
var oDiv = document.getElementById('div1');
//设置速度
var speed = 5;
//判断速度方向
if(oDiv.offsetLeft>iTarget)
{
speed = -10;
}else
{
speed = 10;
}
//运动框架
clearInterval(timer);
timer = setInterval(function(){
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}else
{
oDiv.style.left =oDiv.offsetLeft +speed +'px';
}
},30)
}
</script>
</head>
<body>
</body>
<div id="div1">
<span>
分享到
</span>
</div>
</html>
淡入淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
/*设置透明度*/
filter: alpha(opacity:30);/*给IE*/
opacity: 0.3;/*给火狐和chome*/
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
starMove(100);
}
oDiv.onmouseout = function(){
starMove(30);
}
}
var alpha = 30;
var timer = null;
function starMove(iTarget){
var oDiv = document.getElementById('div1');
var speed = 0;
clearInterval(timer);
timer = setInterval(function(){
if(alpha<iTarget)
{
speed = 10;
}else
{
speed = -10;
}
if(alpha == iTarget)
{
clearInterval(timer);
}else
{
alpha +=speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
