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 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
JS常用正则表达式总结
Nov 12 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
vue首次渲染全过程
Apr 21 Vue.js
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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
js编写简易的计算器
2020/07/29 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python实现扫雷游戏的示例
2020/10/20 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
股份合作协议书
2014/04/12 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
运动会加油稿100字
2014/09/19 职场文书
高三语文复习计划
2015/01/19 职场文书