<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 200px;
background: red;
}
</style>
</head>

<body>
<div id="div1"></div>

<script>

var div1 = document.querySelector('#div1');

document.onclick = function () {

/*
* 抖动：
* 1. 每次改变一下元素的位置
* 按照一个中心点进行偏移，假设中心点left原始是400，那么每次就以left：400为中心做位置的移动
* 380 -> 420
* */

// div1.style.left = '380px';
// div1.style.left = '420px';

var a = true;

setInterval(function() {

/*
* 根据a的值，做不同的设置
* */
div1.style.left = (a ? 380 : 420) + 'px';

a = !a;

}, 30);

}
</script>
</body>
</html>

如何通过JS实现简单抖动效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...

  3. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  4. JS实现简单斗地主效果

    let play = document.querySelectorAll(".play"); let dizhupai = document.getElementById(&quo ...

  5. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  6. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  7. Query 一些简单的效果

    Query 一些简单的效果 $(selector).hide(speed,callback); 隐藏 $(selector).show(speed,callback); 显示 $(selector). ...

  8. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  9. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

随机推荐

  1. ultraedit中文乱码解决方案

    高级--->配置--->文件处理--->Unicode/UTF-8检测 打钩自动检测UTF-8 文件,去掉其他钩. 来自为知笔记(Wiz)

  2. C 语言实现字符串替换

    void replaceFirst(char *str1,char *str2,char *str3) { ]; char *p; strcpy(str4,str1); if((p=strstr(st ...

  3. ASP.NET MVC4 微信公众号开发之网页授权（二）：通过公众号AppID(应用ID)和AppSecret(应用密钥)取得网页授权openid

    ASP.NET MVC4 微信公众号开发之网页授权(一):搭建基础环境 通过了上一篇文章我们已经搭建好了基础开发大环境,现在打开开发环境这里我用的是 vs2013,通过如下方式: 拼接请求链接重定向到 ...

  4. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...

  5. 在jquery中each循环中，要用return false代替break，return true代替continue。

    在jquery中each循环中,要用return false代替break,return true代替continue. $.each(data, function (n, value) { if(v ...

  6. 如何解决 chrome 58 版本更新导致的 fiddler https 抓包不可用问题

    注意!如果该方法不生效,请先卸载原有 fiddler 后再进行新版本 fiddler 安装步骤即可. chrome 于(上周?上上周?)推送了chrome 58 版本的更新,这次更新中直接去掉了证书未 ...

  7. iOS-工程和工作空间、静态库和框架之间的关系

    使用Xcode创建的工程Project是单独分开的,如果想要几个工程同时存在,可以通过创建工作空间Workspace.工作空间是对各工程的集合,工程文件名的后缀为.xcodeproj,工作空间文件名的 ...

  8. Android系统--输入系统（十一）Reader线程_简单处理

    Android系统--输入系统(十一)Reader线程_简单处理 1. 引入 Reader线程主要负责三件事情 获得输入事件 简单处理 上传给Dispatch线程 InputReader.cpp vo ...

  9. UserManager

    刚刚学习servlet,打算学做一个小项目把前边学到的知识做一个总结. 由于只是实现了一些简单的功能,所以美工就凑合着看吧(美工其实也不太会). 首先项目整体架构如图 项目准备工作: 要用到mysql ...

  10. 关于IT创业和反思

    2016年8月的某一天本是世上平凡的一天,对于我而言却并不平凡. 这一天,我离开了待了近四年的创业公司.从它成立前的筹备开始,伴随着它的起起伏伏到完成C轮融资,从来没想过以这种方式离开,然而人生总是充 ...