css样式:

#box{
width: 300px;
height: 300px;
background: deepskyblue;
position: absolute;
margin-right: 20px;
}

 html布局:

<div id="box"></div>

js部分:

window.onload=function(){
abc();
setInterval(abc,50)
function abc(){
var oDiv=document.getElementById("box");
oDiv.style.left=oDiv.offsetLeft+10+"px";
}

}

javascript平时小例子①(移动的小div)的更多相关文章

  1. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  2. Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

    学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...

  3. JavaScript小例子:复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  4. 五个小例子教你搞懂 JavaScript 作用域问题

    众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...

  5. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  6. Ajax入门小例子

    大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html                               ---Ajax基础学习 http:/ ...

  7. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  8. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

  9. 这42个Python小例子,太走心

    告别枯燥,60秒学会一个Python小例子.奔着此出发点,我在过去1个月,将平时经常使用的代码段换为小例子,分享出来后受到大家的喜欢. 一.基本操作 1 链式比较 i = 3print(1 <  ...

  10. layui.form小例子

    layui.form小例子 需要引入layui的包 <!doctype html> <html> <head> <meta charset="utf ...

随机推荐

  1. LayoutInflater(一)

    相信接触Android久一点的朋友对于LayoutInflater一定不会陌生,都会知道它主要是用于加载布局的.而刚接触Android的朋友可能对LayoutInflater不怎么熟悉,因为加载布局的 ...

  2. Linux内核创建一个新进程的过程

    “平安的祝福 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ” 进程在 ...

  3. Linux学习笔记(6)Linux常用命令之帮助命令与用户管理命令

    (1)man man命令用于获得命令或配置文件的帮助信息,英文原意为manual,所在路径为/usr/bin/man,其语法格式为: man [命令或配置文件] 注意:查看配置文件的帮助信息时无需绝对 ...

  4. AchartEngine的柱状图属性设置

    1.      修改背景色或设置背景图片 背景色设置需要设置两项:setMarginsColor(设置四边颜色)以及setBackgroundColor(设置中间背景色) 设置背景图片:        ...

  5. 用PHP链接mysql数据库

    PHP提供了两套数据库可用于访问mysql数据库 1)MySQL扩展函数数据库 2)MySQLI扩展数据库(improved) 使用MySQLI函数访问MySQL数据库步骤 1)链接数据库管理系统 m ...

  6. JAVA Day7

    6  方法   1.格式[访问控制符] void返回值类型 方法名(参数列表:数据类型 参数名); 2.类的方法: *用来定义类的某种行为或功能 * 3.方法的返回值 *如果有返回值,方法中必须要使用 ...

  7. H5危险的文件上传对话框

    文件对话框 文件上传对话框是一直以来就存在的网页控件. 到了 HTML5 时代,增加了更多的功能,例如支持文件多选.Chrome 甚至还支持「上传文件夹」这一私有特征: <input type= ...

  8. css整理-06 表和列表

    表格式化 表布局 table, display:table caption, display: table-caption thead, display: table-header-group tbo ...

  9. [工作中的设计模式]适配器模式adapter

    一.模式解析 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 也就是说,如果已经写好了一个接口,但是又来了一种截然不同的接口,如 ...

  10. wpf 触发器,属性触发器,事件触发器,事件触发器。

    <EventTrigger RoutedEvent="Mouse.MouseEnter"/> <DataTrigger Binding="{Bindin ...