jQuery实现的Div窗口震动特效


Posted in Javascript onJune 09, 2014
<!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>
Javascript 相关文章推荐
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
图解javascript作用域链
May 27 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
js动态创建标签示例代码
Jun 09 #Javascript
jquery中 $.expr使用实例介绍
Jun 09 #Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 #Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 #Javascript
js判断元素是否隐藏的方法
Jun 09 #Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 #Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 #Javascript
You might like
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
Symfony生成二维码的方法
2016/02/04 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
vue组件name的作用小结
2018/05/23 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
编辑找工作求职信范文
2013/12/16 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
党员创先争优活动总结
2014/05/04 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
五一劳动节活动总结
2015/02/09 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python