基于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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
原生js+canvas实现验证码
Nov 29 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注释实例技巧
2008/10/03 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
初识PHP
2014/09/28 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PDO::errorCode讲解
2019/01/28 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
在Python中使用Neo4j的方法
2019/03/14 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python中图像通道分离与合并实例
2020/01/17 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
考试作弊检讨书大全
2014/02/18 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
开业典礼主持词
2014/03/21 职场文书
党员创先争优活动总结
2014/05/04 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang