<!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. Java开发环境搭建——Idea开发环境

    Idea版本选择由于公司使用JDK7,所以我选择安装Version 2016.1.4(手动安装试验出来的,最新版的2016.1.4启动时提示需要安装JDK8)下载 其实可以安装多个版本的JDK,然后指 ...

  2. Mui.ajax请求服务器正确返回json数据格式

    ajax: mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, d ...

  3. 1 python大数据挖掘系列之基础知识入门

    preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...

  4. win7里边使用telnet命令为什么提示telnet不是内部或外部命令，也不是可运行的程序或批处理文件

    Win7默认没有安装telnet功能,所以你直接用telnet命令是用不了的:你可以去“控制面板”-->“程序”(在左下角)--->“打开或关闭Windows功能”,勾上“telnet客户 ...

  5. 【原】小搞一下 javascript算法

    前言:在前端大全中看到这句话,以此共勉.基础决定你可能达到的高度, 而业务决定了你的最低瓶颈 其实javascript算法在平时的编码中用处不大,不过不妨碍我们学习它,学习一下这些算法的思想,锻炼一下 ...

  6. subtext3插件安装

    1.启用Package Control,利用它进行插件安装: 启用方法:菜单栏-view-show console 在弹出的输入框内,输入以下代码,按回车,稍后会出现package control安装 ...

  7. 2013 Asia Regional Changchun C

    Little Tiger vs. Deep Monkey Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K ( ...

  8. vim 常用命令逐渐熟悉以及常用的配置记录

    本篇博客记录的是我自己学习vim的常用命令的过程中,各个命令的逐渐熟悉的顺序(有一部分已经熟悉的命令没有列出),已经对vim编辑器本身的一些设置的记录 1.G 快速将光标切换到文件的最底部 2.u 撤 ...

  9. window.onload =writeMessage(); 与window.onload =writeMessage;的区别

    window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...

  10. 初次启动app校验的活动图和分析

    初次启动活动图 version 1 version 2 version 3 根据上图的活动图分析,可能存在较严重的问题: 主线程中如果发现是sdcard的url,则可能进行重命名 FirstEnter ...