您的位置：首页 > Web前端 > JavaScript

js--动画

2016-01-07 21:39 633 查看
运动框架实现思想
1.速度(改变值left，right，width，height，opacity)
2.缓冲运动
3.多物体运动
4.任意值变化
5.链式运动
6.同时运动

我们先来介绍第一章改变left值来使物体左右移动

html文件

<!DOCTYPE html>
<html>
<head>
<title>js动画事件</title>
<link href="move.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="move.js"></script>
</head>
<body>
<div id="div1">
<span id="sp1">分享</span>
</div>
</body>
</html>


css文件

*{
margin:0px;
padding:0px;
}
#div1{
width:200px;
height:200px;
position:absolute;
left:-200px;
background:red;
border:1px solid #eeddcc;
}
#sp1{
display:block;
width:20px;
height:80px;
position:absolute;
left:200px;
top:60px;
border:1px solid red;
color:#036;
line-height:40px;//这里设置的宽度只能容纳一个字，所以这两个字上下排列的，但是如果我们想让这两个字在span中居中显示，那么我们就设置line-height的值为height的一半
}


js文件

var timer;
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=show;
div1.onmouseout=hiden;

}
function show(){
clearInterval(timer);//跟前一课程讲的一样，在定义一个定时器前先删除前一次产生的定时器。
var div1=document.getElementById("div1");
timer=setInterval(function(){
if(div1.offsetLeft==0){
clearInterval(timer);
}else{
div1.style.left=div1.offsetLeft+10+"px";//这句话要注意喽，"px"不能丢奥！
}

},50)
}
function hiden(){
clearInterval(timer);
var div1=document.getElementById("div1");
timer=setInterval(function(){
if(div1.offsetLeft==-200){
clearInterval(timer);
}else{
div1.style.left=div1.offsetLeft-10+"px";
}

},50)
}


效果图：

当我们鼠标移动分享上面时就慢慢显示出来了







当我们鼠标移出来后，红色块就慢慢移回去了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航