js窗口震动小程序分享


Posted in Javascript onNovember 28, 2016

前言:窗口震动的应用是很常见的,比如最常用的聊天软件qq,就有一个窗口抖动,还有在填表单时的出错提醒,所以自己也写了个很简单的示例,以下是具体的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>窗口震动</title>

</head>

<body>
<div style="background:#ff0; width:200px; height:200px; margin-top:200px; margin-left:600px" id="win"></div>

<script type="text/javascript">
 var loop = 0; //统计震动次数
 var timer; //定时器引用
 var offx; //水平偏移量
 var offy; //垂直偏移量
 var dir; //控制震动方向

 timer = setInterval(function(){
  var win = document.getElementById("win");
  if (loop > 100)
  {
   clearInterval(timer); //震动次数超过100就停止定时器
  }
  dir = Math.random()*10 > 5 ? 1 : -1; //获得震动方向
  offx = Math.random()*20*dir;
  offy = Math.random()*20*dir;
  win.style.marginTop = 200+offx+"px";
  win.style.marginLeft = 600+offy+"px";
  loop++;
 },10) //每隔10毫秒震动一次 
</script>
</body>
</html>

在代码中主要就是利用随机数来控制抖动的方向和范围,还有用setInterval函数来设置抖动的频率,以及loop变量设置一次抖动的次数。自己可以根据实际需求来设置抖动的频率,范围,和次数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
JS获取年月日时分秒的方法分析
Nov 28 #Javascript
js中string和number类型互转换技巧(分享)
Nov 28 #Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 #Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 #Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 #Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 #Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 #Javascript
You might like
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
菜单效果
2006/10/14 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
python 字符串split的用法分享
2013/03/23 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
婚礼证婚人证婚词
2014/01/08 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
决心书范文
2014/03/11 职场文书
公司门卫岗位职责
2014/03/15 职场文书
开工仪式主持词
2014/03/20 职场文书
文明寄语大全
2014/04/11 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
委托公证书样本
2015/01/23 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP