<!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. Beta版本冲刺第一天

    Aruba 408 409 410 428 429 431 完成任务: 瀑布流方块长按删除提示 实现获取剪贴板内容并保存到数据库 常驻通知栏模块界面实现,设置按钮并预留intent 立会照片: 燃尽图 ...

  2. bash的管道符与重定向

    管道符"|"可以用来将前面的程序的标准输出stdout(=1)重定向到后一个程序的stdin(=0),但是忽略了stderr. 在bash中使用2>&1 可以表示将s ...

  3. 12,13 Proxy和Reflect

    Proxy和Reflect Proxy(代理) Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程 ...

  4. mysql 查询制定日期数据

    //获取昨天更新数据的条件date_sub(current_date(), interval 1 day) = from_unixtime(senddate, '%Y-%m-%d') 注释:date_ ...

  5. 使用django开发博客过程记录4——Category分类视图

    在写点击博客的所属分类,显示所有该分类的文章时真是让我想了好一会,为什么呢?因为我使用的是cbv模式开发的而不是简单的视图处理逻辑的,所以,有些操作会被包装好了,你并不知道它的细节,那么我们今天要实现 ...

  6. Believe Me , I Can !

    Believe Me , I Can ! ---DF 第一阶段:(年底1-27之前) 1.  熟练使用JavaScript/CSS/HTML,熟悉HTML5 / CSS3: 2.  熟悉JavaScr ...

  7. xss之渗透测试

    跨站脚本攻击:cross site script execution(通常简写为xss,因css与层叠样式表同名,故改为xss),是指攻击者利用网站程序对用户输入过滤不足,输入可以显示在页面上对其他用 ...

  8. 使用 Weinre 调试移动网站及 PhoneGap 应用

    在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用.但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了.因此,移动开发人员都 ...

  9. Oracle操作

    1.查询表空间地址: select name from v$datafile; 2.创建表空间: create tablespace yysspace datafile ‘D:\APP\MIAO\OR ...

  10. Maven Super POM

    Maven super POM defines some properties. Three ways to find it ${M2_HOME}/lib/maven-model-builder-3. ...