基于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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
没有document.getElementByName方法
Aug 19 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python flask实现分页效果
2017/06/27 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
django用户登录和注销的实现方法
2018/07/16 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
项目资料员岗位职责
2013/12/10 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
大一新生检讨书
2014/10/29 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
爱国影片观后感
2015/06/18 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android