<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    #div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}

    </style>

<script>

    var timer=null;

    function startMove()

    {

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

        clearInterval(timer);

        timer=setInterval(function () {

            var speed=1;

            if(oDiv.offsetLeft>=300)

                {

                    clearInterval(timer);

                }

            else

                {

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

                }

            }, 30);

    }

    </script>

</head>

<body>

<input id="btn1" type="button" value="开始运动" onclick="startMove()"/>

<div id="div1">

</div>

</body>

</html>

js运动框架及应用的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  5. js运动框架之掉落的扑克牌（重心、弹起效果）

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  6. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  7. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  8. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  9. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  10. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

随机推荐

  1. SpringMVC：ssm整合练习一

    西部开源-秦疆老师:MyBatis,Spring,SpringMVC 整合练习一 , 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! ss ...

  2. 瀑布流无限加载infinitescroll插件与masonry插件使用

    masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...

  3. spark实验(五)--Spark SQL 编程初级实践(1)

    一.实验目的 (1)通过实验掌握 Spark SQL 的基本编程方法: (2)熟悉 RDD 到 DataFrame 的转化方法: (3)熟悉利用 Spark SQL 管理来自不同数据源的数据. 二.实 ...

  4. Jmeter_接口串联自动化测试_登录后充值获取cookie

    1.登陆->充值->运行会报错 2,那如何解决这个问题呢,添加HTTP COokie管理器 另外一种方法,登录->提取正则表达式,充值->添加HTTP cookie管理器

  5. 【C语言】创建一个函数，将输入的2个数排序

    #include <stdio.h> void fun(int *x,int*y) { int t; if(*x>=*y) { t=*x;*x=*y;*y=t; } } main() ...

  6. python实现基于百度路径规划接口的坐标对获取两点驾车距离的计算

    今天为大家介绍一种通过python实现坐标对间距离数据的获取方法.接口采用百度开发的路径规划接口. 1.调用接口: 接口:(传入起点坐标串,结束坐标串:ak值需要注册百度开发者) 接口详细说明 htt ...

  7. 计算机二级-C语言-对二维数组数据进行处理。对文件进行数据输入。形参与实参。

    //函数fun的功能为:计算x所指数组中N个数的平均值(规定所有数都为正数),平均值通过形参返回给主函数,将小于平均值且最接近平均值的数作为函数值返回,并输出. //重难点:形参与实参之间,是否进行了 ...

  8. JAVA8-用lamda表达式和增强版Comparator进行排序

    1.单条件升序: list.sort(Comparator.comparing(User::getId); 2.降序: list.sort(Comparator.comparing(User::get ...

  9. $ git push -u origin master

    我们第一次推送master分支时,由于远程库是空的,加上了-u参数,Git不但会把本地的master分支内容推送的远程新的master分支,还会把本地的master分支和远程的master分支关联起来 ...

  10. ASP.NET Core搭建多层网站架构【6-注册跨域、网站核心配置】

    2020/01/29, ASP.NET Core 3.1, VS2019, NLog.Web.AspNetCore 4.9.0 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站 ...