<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title></title>

     <script src="js/jquery-1.11.1.js" type="text/javascript"></script>

 </head>

 <style>

   button{width:80px; height:50px; margin: 10px;}

   #divRed{width: 100px; height: 100px; background-color: red; position: absolute; top:90px; left: 0; }

 </style>

 <body>

     <button type="text" id="btnLeft">左移动</button>

     <button type="text" id="btnRight">右移动</button>

     <div id="divRed"></div>

     <script  type="text/javascript" charset="utf-8">

        $(function(){

               var btnL = $('#btnLeft');

               var btnR = $('#btnRight');

               var divR = $('#divRed');

                btnL.click(function(){

                MoveDiv(divR,'left',10,0)

              });

              btnR.click(function(){

                MoveDiv(divR,'left',10,500)

              });

                  function MoveDiv(obj,pos,dir,targer){

                      dir=parseInt(obj.css(pos)) < targer ? dir: -dir;

                        clearInterval(obj.timer)

                      obj.timer=setInterval(function(){

                         var  speed=parseInt(obj.css(pos))+dir;

                         console.log(obj,pos);

                        if(speed > targer && dir > 0 ||  speed < targer && dir < 0  ){ speed = targer;}

                             obj.css(pos,speed +'px');

                           if(speed== targer){  clearInterval(obj.timer)}

                        },30);  

                  }

        })

    </script>

 </body>

 </html>

Div 定时移动的更多相关文章

  1. div定时放大缩小

    <!DOCTYPE html> <html> <head> <style> .anim{ width: 100px; height: 100px; ba ...

  2. 基于JQuery的浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

  3. JQuery 浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

  4. 免费图片存储和图话【提供demo下载】

    我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...

  5. Struts2标签库整理【完整】

    转自:https://blog.csdn.net/chen_zw/article/details/8161230   Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,str ...

  6. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  7. 问题：关于坛友的一个定时重复显示和隐藏div的实现

    需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...

  8. 定时显示div

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

  9. 子元素div高度不确定时父div高度如何自适应

    粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...

随机推荐

  1. Javascript模板引擎插件收集

    为什么要用JS的模板引擎,打个比方,如果你要通过接口绑定数据,最终要加进去DOM中,我们普遍的做法就是不断的+,最终append进去,但是这样的做法就是后续人员压根就没法维护.所以这时模板引擎出来了. ...

  2. MySQL、MongoDB、Redis数据库Docker镜像制作

    MySQL.MongoDB.Redis数据库Docker镜像制作 在多台主机上进行数据库部署时,如果使用传统的MySQL的交互式的安装方式将会重复很多遍.如果做成镜像,那么我们只需要make once ...

  3. asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

  4. centos tar压缩与解压缩命令大全

    tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用 ...

  5. 02. Let & Const

    Let & Const let 基础用法 很简单就能说明这个问题 if(false) { var a = 'heihei' } a = undefined if(true) { var a = ...

  6. 汇编实现点亮Led灯(2440)

    1.gboot.lds OUTPUT_ARCH(arm)ENTRY(_start)SECTIONS {    . = 0x30008000;        . = ALIGN(4);    .text ...

  7. 2014年---移动端webapp个人年度总结

    我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery  ...

  8. ROLAP和MOLAP的概念和差别

    ROLAP和MOLAP的概念和差别OLAP(on-Line Analysis Processing)是使分析人员.管理人员或执行人员能够从多角度对信息进行快速.一致.交互地存取,从而获得对数据的更深入 ...

  9. DOM0,DOM2,DOM3 事件基础知识

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  10. nexus的使用

    一.在百度网盘或官网下载nexus,并部署.   注意修改: https://repository.apache.org/content/repositories/releases/    二.下载m ...