原素材

main.html

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <link href="main.css" rel="stylesheet">

         <script type="text/javascript" src='main.js'></script>

             <meta charset="utf-8">

                 <title>

                     Document

                 </title>

             </meta>

         </link>

     </head>

     <body>

         <div id="div1">

         </div>

     </body>

 </html>

main.js

window.onload = function() {

    var odiv1 = document.getElementById('div1');//前面必须要是id的，如果为class就会报错

    odiv1.onmouseover = function() {

        startMove(700);

    };

    // odiv1.onmouseout = function() {

    //     startMove(0);

    // };

};

var timer = null;//设置一个计时器

function startMove(iTarget) {

    clearInterval(timer);//取消原有的计时器，防止叠加

    var odiv1 = document.getElementById('div1');

    timer = setInterval(function() {

        var speed = (iTarget - odiv1.offsetLeft)/20;

        speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整

        if (odiv1.offsetLeft == iTarget) {

            clearInterval(timer);//当达到目标是，停止

        } else {

            odiv1.style.left = odiv1.offsetLeft + speed + 'px';

        }

    }, 30);

}

main.css

* {

    margin:;

    padding:;

}

#div1 {

    width: 480px;

    height: 120px;

    background:url(image/1.jpg) -440px -450px no-repeat;

    position: relative;//这个是运动的前提

}
background:url(image/1.jpg) -440px -450px no-repeat;   
若为正的则为距离左边，负的则为距图片左边440px

												


											
JS之缓冲动画的更多相关文章
	

    
								
  1. javascript动画效果之缓冲动画(修改版)
		
    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
    
		
    2. 
						
  2. easing.js让页面动画丰富起来
		
    jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. <scr ...
    
		
    3. 
						
  3. 原生JS封装简单动画效果
		
    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
    
		
    4. 
						
  4. JavaScript原生折叠扩展收缩菜单带缓冲动画
		
    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...
    
		
    5. 
						
  5. 如何使用js捕获css3动画
		
    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
    
		
    6. 
						
  6. 用原生JS写移动动画案例及实际应用
		
    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
    
		
    7. 
						
  7. 原生js判断css动画结束   css 动画结束的回调函数
		
    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
    
		
    8. 
						
  8. 原生js判断css3动画过度(transition)结束  transitionend事件   以及关键帧keyframes动画结束(animation)回调函数 animationEnd  以及 css 过渡 transition无效
		
      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
    
		
    9. 
						
  9. 快速找到自己想要用到的cocos2d-x的缓冲动画
		
    游戏中在做很多动画时,需要用到缓冲来增强表现.比如宝箱"鼓"几下,然后"蹦"的一下打开.很多时候要调效果时,需要轮着试,如果有一张图和实际示例效果,那就省很多事 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. NX二次开发-UFUN遍历函数UF_OBJ_cycle_objs_in_part
			
    NX11+VS2013 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include < ...
    
			
    2. 
						
  2. detours3.0文档翻译
			
    拦截二进制函数 Detours库可以在运行过程中动态拦截函数调用.detours将目标函数前几个指令替换为一个无条件跳转,跳转到用户定义的detour函数.被拦截的函数保存在trampoline函数中 ...
    
			
    3. 
						
  3. 简述MapReduce数据流
			
    目前it基本都是一个套路,获得数据然后进行逻辑处理,存储数据. 基本上弄清楚整个的数据流向就等于把握了命脉. 现在说说mapreduce的数据流 1.首先数据会按照TextInputFormat按照特 ...
    
			
    4. 
						
  4. 2019 牛客多校第一场 D Parity of Tuples
			
    题目链接:https://ac.nowcoder.com/acm/contest/881/D 看此博客之前请先参阅吕凯飞的论文<集合幂级数的性质与应用及其快速算法>,论文中很多符号会被本文 ...
    
			
    5. 
						
  5. Python环境出现模块找不到
			
    由于上周脚受伤了,修养了几天没有学习.今天去实验室发现我的编译器跑不动了,出现找不到模块的情况,很奇怪都安装了,也不会提示什么模块找不到. 查找了些资料,发现是因为某个模块的文件损坏或者被覆盖或者安装 ...
    
			
    6. 
						
  6. error C1083: 无法打开包括文件: “ui_roadquery.h”: No such file or directory	c:\users\administrator\desktop\g_w_j\04 开发阶段\开发工程\imcshowapp\imcshowapp\roadquery.h	5	1	IMCShowApp
			
    1.我这里出现的原因是忘记将项目文件添加进入项目中,在项目中右击添加即可
    
			
    7. 
						
  7. solr 启动报错Cannot load analyzer: org.wltea.analyzer.lucene.IKAnalyzer
			
    schema.xml 配置文件信息: <field name="title" type="text_ik" indexed="true" ...
    
			
    8. 
						
  8. ThreadPoolTaskExecutor的配置使用
			
    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ft305977550/article/de ...
    
			
    9. 
						
  9. 如何收集项目日志统一发送到kafka中？
			
    上一篇(http://qindongliang.iteye.com/blog/2354381 )写了收集sparkstreaming的日志进入kafka便于后续收集到es中快速统计分析,今天就再写一篇 ...
    
			
    10. 
						
  10. Mybatis使用Dao代码方式CURD
			
    Mybatis 使用Dao代码方式进行增.删.改.查. 1.Maven的pom.xml <project xmlns="http://maven.apache.org/POM/4.0. ...
    
			
    11.