<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Cache-Control" content="no-transform" />
<style>
*{margin:0px;}
#div1{width:200px;height:200px;position: absolute;left:-200px;background: #0f0}
#div1 span{width:20px;height:50px;position: absolute;top: 80px;left:200px;background: #0ff}
</style>
<script>
  window.onload = function(){
    var odiv1 = document.getElementById("div1");
     odiv1.onmouseover = function(){
      move(0);
    }
    odiv1.onmouseout = function(){
      move(-200);
    }
  }
  var timer = null;
 function move(mubiao){
    var odiv1 = document.getElementById("div1");
    timer = setInterval( function (){
      var speed = 0;
      if(odiv1.offsetLeft>mubiao){
        speed = -10;
      }else
      {
        speed = 10;
      }
        if(odiv1.offsetLeft == mubiao){
         clearInterval(timer);
       }
         else{
        odiv1.style.left = odiv1.offsetLeft + speed +'px';
         }
    }, 30)
  }
</script>
</head>
<body>
  <div id="div1" ><span></span>
</div>
</body>
</html>

js动画（速度）的更多相关文章

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

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

  2. JS动画理论

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

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

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

  4. css3 动画 vs js 动画

    之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...

  5. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  6. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  7. js动画--缓冲动画

    前面讲述的动画速度都是匀速的,现实生活中的运动速度的变化不一定是恒定的,存在一定的缓冲,就像火车进站一样,速度会越来越慢. 对于改变速度措施,其实只要将动画第一课的程序稍微的改变一下就可以了,我们来看 ...

  8. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

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

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

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

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

随机推荐

  1. html5-超级链接

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. hdu5032 树状数组

    题意: 对于一个1000*1000的Mushroom, 起点在(1,1)给定一个斜率和一个x,求由斜率和x所对应的直线构成的三角形内蘑菇的总值. 每个点的对应的值为(x+A)(y+B) 解 每个点都有 ...

  3. jQuery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])

    hide([speed,[easing],[fn]]) 概述 隐藏显示的元素 这个就是 'hide( speed, [callback] )' 的无动画版.如果选择的元素是隐藏的,这个方法将不会改变任 ...

  4. Life Winner Bo (博弈论)

    kind:维持让对手处于(奇数,奇数)的状态,就能赢. rook:维持让对手处于(A,A)相等的状态,就能赢. knight:画图找规律,没有到达终点的就是平局. queen:威佐夫博弈论,终点不一样 ...

  5. centos中yum命令删除还原的补救方法介绍

    前言 yum,是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(yellow ...

  6. MVC 中的Model对象

    最近实在是太忙,客户丢了一个框架,没有任何说明文档,更没有所谓的技术支持,一直忙于学习,最后好歹还有点头绪,话不多说,MVC的学习是不能拉下的,就当前小白的我,认为MVC中的M并不是想象中的那样简单, ...

  7. Linux上查看大文件的开头几行内容以及结尾几行的内容

    head -n 50 filePath 查看开头50行的内容 tail -n 50 filePath 查看文件结尾50行的内容

  8. kibana添加ES索引403错误解决

    kibana添加ES索引时发现kibana添加索引不生效,没有创建成功只是一闪而过 查看控制台发现报错403 解决办法: curl -XPUT -H "Content-Type: appli ...

  9. 在CentOS 6.X中安装中文字体

    1.从Windows中 拷贝或者网络上下载你想要安装的字体文件(*.ttf文件) 2.新建字体目录 #mkdir /usr/share/fonts/ 3.修改字体文件的权限,使root用户以外的用户也 ...

  10. node.js读取到的文件列表

    var fs = require('fs'); var path = require('path'); //解析需要遍历的文件夹,我这以E盘根目录为例 var filePath = path.reso ...