js--动画

运动框架实现思想
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)

}

效果图：

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

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

巴特西

js--动画

最新文章

热门文章