运动框架实现思想
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--动画的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. [学习笔记]js动画实现方法，作用域，闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  8. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效（一）------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

  10. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

  1. IDEA-Maven的Dependencies中出现红色波浪线

    解决方法:移除相关依赖,再重新添加即可 情况及具体解决方法如下:1.在Maven Project中 Dependencies 出现红色波浪线 2.查询本地仓库:jar包已存在 3.解决方法:3.1.从 ...

  2. 关于“100g文件全是数组，取最大的100个数”解决方法汇总

    原题如下: 有一个100G大小的文件里存的全是数字,并且每个数字见用逗号隔开.现在在这一大堆数字中找出100个最大的数出来. 我认为,首先要摸清考官的意图.是想问你os方面的知识,还是算法,或者数据结 ...

  3. Golang（六）time 包的用法整理

    1. 常用结构体 Duration:type Duration int64,时间长度,对应单位包括 Nanosecond(纳秒).Microsecond(微妙).Millisecond(毫秒).Sec ...

  4. Java安装 --- jdk 和eclipse tomcat

    ​本文主要使用win7进行安装 安装jdk jdk:  这里面有四个版本78910,会持续增加 链接:https://pan.baidu.com/s/1LTauKbBJKQVOvlbHx2dTwQ提取 ...

  5. Linux文件目录指令

    1.pwd指令 pwd 显示当前所在的目录 2.ls指令 ls [选项] [目录或文件] 查看文件信息 ls -a 查看所有文件和目录,包括隐藏的 ls -l 以列表的方式显示 3.cd指令 cd 路 ...

  6. 从零开始学C语言

    从零开始学C语言 @阆苑祁寒 更新时间:2019-09-13 写在前面:本文从一个初学者的角度,给出了对C语言的简单理解.如有谬误,敬请指出! Week1——基本语法 #include <std ...

  7. gevent介绍（转）

    原文:https://www.liaoxuefeng.com/wiki/897692888725344/966405998508320 Python通过yield提供了对协程的基本支持,但是不完全.而 ...

  8. winform实现Session功能(保存用户信息)

    问题描述:在winform中想实现像BS中类似Session的功能,放上需要的信息,在程序中都可以访问到. 解决方案:由于自己很长时间没有做过winform的程序,一时间竟然手足无措起来.后来发现wi ...

  9. Number最大范围相关

    今天在leetcode上面做题目,有一道数组形式的整数加法运算,本来以为还蛮简单的,想着直接将数组先转化为String类型,然后直接相加就好, 代码如下: var addToArrayForm = f ...

  10. maven引入oracle驱动

    下载驱动: https://www.oracle.com/technetwork/database/enterprise-edition/jdbc-112010-090769.html 例如我这边是1 ...