Div 定时移动
<!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 定时移动的更多相关文章
- div定时放大缩小
<!DOCTYPE html> <html> <head> <style> .anim{ width: 100px; height: 100px; ba ...
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
/** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...
- JQuery 浮动DIV显示提示信息并自动隐藏
/** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...
- 免费图片存储和图话【提供demo下载】
我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...
- Struts2标签库整理【完整】
转自:https://blog.csdn.net/chen_zw/article/details/8161230 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,str ...
- js 定时更改div背景图片
今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...
- 问题:关于坛友的一个定时重复显示和隐藏div的实现
需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...
- 定时显示div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...
- 子元素div高度不确定时父div高度如何自适应
粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...
随机推荐
- Smallest Common Multiple
FCC题目:找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. 范围是两个数字构成的数组,两个数字不一定按数字顺序排序. 例如对 1 和 3 -- 找出能被 1 和 3 和它们之间所有数字整除 ...
- CodeForces 698C LRU
吐槽一句:这数据造得真强-. 题意:有一个大小为k的缓存区,每次从n种物品中按照一定的概率选取一种物品尝试放进去.同一个物品每一次选取的概率都是相同的.如果这种物品已经放进去过就不再放进去.如果缓存区 ...
- web框架django初探
Web框架介绍 一般会分为两部分:服务器程序和应用程序.服务器程序负责对socket服务器进行封装,并在请求到来时,对请求的各种数据进行整理.应用程序则负责具体的逻辑处理.为了方便应用程序的开发,就出 ...
- LVM逻辑卷管理命令
显示分区信息: [root@localhost /]# fdisk -l PV:物理硬盘格式化为物理卷(PV): [root@localhost /]# pvcreate /dev/sdb /dev/ ...
- 懒加载(getter\setter理解)
为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器 控制器一旦加载, ...
- EntityFramework错误:Unable to update the EntitySet because it has a DefiningQuery
错误截图: 解决方法: 在所操作的数据库表中添加一个主键即可解决此问题
- linux phpexcel导出后打不开
在PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); 后面加一行 ob_clean();
- p/invoke碎片--对类的封送处理
主要是看默认封送处理行为 按类成员的类型是否为“可直接传递到非托管内存”的类型来分类;按照成员中是否有“可直接传递到非托管内存”的类型来讨论. 所有成员都是“可直接传递到非托管内存”的类型 托管代码和 ...
- 如何使用git命令添加文件和提交文件
1.进入指定文件夹内,启动 git bash here 2. 初始化文件夹 git init 3.开始添加文件 所有文件添加方法 git add . 单个文件添加方法 git add *.* 例如我的 ...
- DNA解链统计物理
来源:Kerson Huang, Lectures on Statistical Physics and Protein Folding, pp 24-25 把双链DNA解开就像拉拉链.设DNA有\( ...