基于jQuery实现Div窗口震动特效代码-代码简单


Posted in Javascript onAugust 28, 2015

这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等。

效果图如下:

基于jQuery实现Div窗口震动特效代码-代码简单

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jquery窗口震动特效</title> 
<script type="text/javascript" src="https://3water.com/ajaxjs/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
;(function($){ 
var element = {}; 
$.fn.jshaker = function(){ 
element = $(this); 
element.css(position, relative); 
element.find(*).each(function(i, el){ 
$(el).css(position, relative); 
}); 
var iFunc = function(){ $.fn.jshaker.animate($(element)); }; 
setTimeout(iFunc, 50); 
}; 
$.fn.jshaker.animate = function(el){ 
$.fn.jshaker.shake(el); 
el.find(*).each(function(i, el){ 
$.fn.jshaker.shake(el); 
}); 
var iFunc = function(){ $.fn.jshaker.animate(el); }; 
setTimeout(iFunc, 50); 
} 
$.fn.jshaker.shake = function(el){ 
var pos = $(el).position(); 
if(Math.random() > 0.5){ 
$(el).css(top, pos[top] + Math.random() * 20 < 10 ? (Math.random() * 20 * (-1)) : Math.random() * 20); 
} else { 
$(el).css(left, pos[left] + Math.random() * 20 < 10 ? (Math.random() * 20 * (-1)) : Math.random() * 20); 
} 
} 
})(jQuery); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(.block).click(function(){ 
$(this).jshaker(); 
}); 
}); 
</script> 
<style type="text/css"> 
BODY{font-family: "Lucida Grande", Arial, Helvetica, sans-serif;color: #666666;font-size: 12px;background: #FFFFFF;} 
A{color: #0A8ECC;} 
A: HOVER{text-decoration: none;color: #8FCB2F;} 
H1{font-weight: normal;color: #0A8ECC;margin: 0;padding: 0;} 
BODY{margin: 20px;padding: 20px;} 
STRONG{color: #000000;} 
.vspacer{height: 20px;} 
PRE.code{padding: 7px;background: #777777;color: #F0F0F0;width: 400px;overflow: auto;} 
#content-area{border: 3px solid #CCCCCC;background: #F0F0F0;padding: 10px;width: 500px;} 
P.script-link{clear: both;padding: 10px 0;border-top: 1px dotted #CCCCCC;} 
#content .block {float: left;border: 1px solid #CCCCCC;background: #F0F0F0;padding: 10px;margin: 10px;width: 300px;} 
</style> 
</head> 
<body> 
<div id="page"> 
<h1>jquery窗 口 震 动 特 效</h1> 
<div id="content"> 
<div class="block"> 
<p>点击本框内,可实现震动</p> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li> 
Item 3 
<ul> 
<li>Sub Item 1</li> 
<li>Sub Item 2</li> 
<li>Sub Item 3</li> 
<li>Sub Item 4</li> 
<li>Sub Item 5</li> 
</ul> 
</li> 
<li>Item 4</li> 
<li>Item 5</li> 
</ul> 
</div> 
<div class="block"> 
<form action="#"> 
<p><label for="inp1">Text Field 1:</label><input type="text" name="inp1" id="inp1" value="" /></p> 
<p><label for="inp2">Text Field 2:</label><input type="text" name="inp2" id="inp2" value="" /></p> 
<p><button type="submit">Submit</button></p> 
</form> 
</div> 
</div> 
<p class="script-link"> 
</p> 
</div> 
</body> 
</html>

以上代码很简单吧,基于jquery实现div窗口震动的特效就制作出来了,小伙伴们赶紧下载使用吧。

Javascript 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
为你的微信小程序体积瘦身详解
May 20 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 #Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 #Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 #Javascript
jquery实现多条件筛选特效代码分享
Aug 28 #Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 #Javascript
You might like
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php中namespace及use用法分析
2016/12/06 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
npm的lock机制解析
2019/06/20 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python tornado微信开发入门代码
2018/08/24 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
python 利用toapi库自动生成api
2020/10/19 Python
python中的插入排序的简单用法
2021/01/19 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
另类冲刺标语
2014/06/24 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
亮剑精神观后感
2015/06/05 职场文书
团组织推荐意见
2015/06/05 职场文书
初中政治教学工作总结
2015/08/13 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers