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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript小技巧带你提升你的代码技能
Sep 15 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新手上路(十二)
2006/10/09 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
Vue异步加载about组件
2017/10/31 Javascript
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
需求分析说明书
2014/05/09 职场文书
旷课检讨书500字
2014/10/14 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
北京天坛导游词
2015/02/12 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers