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即父容器不根据内容 ...
随机推荐
- JS三大特性
抽象 在分析三大特性之前我们要先了解什么叫抽象. 定义: 在定义一个类的时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板),这种研究问题的方法就称为抽象 一.封装 定义: ...
- CCS5.2/CCS5.3/CCS5.4 仿真调试小技巧
操作系统: WinXP 32bit 仿真器: SEED-XDS560 Plus 开发环境: DSP.com/forum.php?mod=forumdisplay&fid=58" ta ...
- jQuery选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中 ...
- android开发注意事项
写到哪里算哪里,从新项目 说说我怎样开发 1.新建项目,创建自己的application 在Application中初始化xutils3和自己的UncaughtExceptionHandler,添加 ...
- cross_domain
要传参数的页面 引用cross_domain.js 这个是另外一个工程(m)的地址 <script type="text/javascript" src="htt ...
- JSP多文件上传到服务器
问题描述: 作为一个Java开发Web方向的程序员,很重要的一个功能,就是上传文件功能是一定要掌握的,今天整理了一下代码. 1.JSP显示界面代码和动态添加上传文件个数. <%@ page la ...
- 3.0、Spring-注入
一.Spring的基本介绍:Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/ ...
- 【学习笔记】Struts2之配置处理结果
Action只是Struts2控制器的一部分,所以它不能直接生成对浏览者的响应.Action只负责生成响应的视图组件,通常是JSP页面,而Action会为JSP页面提供显示数据. Ac ...
- SVN部署和使用
一.SVN介绍 svn(subversion)是近年来崛起的版本管理工具,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件. 二.服务器端和客户端 1.服务器端软件Subver ...
- hdu 4946 2014 Multi-University Training Contest 8
Area of Mushroom Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...