首页 > web前端 > js教程 > 正文

jQuery实现的Div窗口震动特效_jquery

WBOY
发布: 2016-05-16 16:45:19
原创
1369 人浏览过
复制代码如下代码:

格 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<头>
>
jquery窗口特效


;(function($){
var element = {};
$.fn.jsshaker = function(){
element = $(this);
element.css('位置', '相对');
element.find('*').each(function(i, el){
$(el).css('位置', '相对');
});
var iFunc = function(){ $.fn.jsshaker.animate($(element));
setTimeout(iFunc, 50);
$. fn.jsshaker.animate = function(el){
$.fn.jshaker.shake(el);
el.find('*').each(function(i, el){
$ .fn.jsshaker.shake(el);
var iFunc = function(){ $.fn.jsshaker.animate(el) };
setTimeout(iFunc, 50); 🎜>}
$.fn.jsshaker.shake = function(el){
var pos = $(el).position();
if(Math.random() > 0.5){
$(el).css('top', pos['top'] Math.random() * 20 } else {
$(el).css('left', pos['left'] Math.random() * 20 }
}
})(jQuery);


$(document).ready(function(){
$('.block').click(function(){
$(this).jsshaker();
});
});


BODY{字体系列:“Lucida Grande”,Arial,Helvetica,无衬线;颜色:#666666;字体大小:12px;背景:#FFFFFF;}
A{颜色:#0A8ECC;}
A: HOVER{文字装饰:无;颜色:#8FCB2F;}
H1{字体粗细:正常;颜色:#0A8ECC;边距:0;填充:0;}
BODY{边距: 20px;内边距: 20px;}
STRONG{颜色: #000000;}
.vspacer{高度: 20px;}
PRE.code{内边距: 7px;背景: #777777;颜色: #F0F0F0 ;宽度:400px;溢出:自动;}
#content-area{边框:3px 实线#CCCCCC;背景:#F0F0F0;填充:10px;宽度:500px;}
P.script-link{清除:两者;内边距: 10px 0;边框顶部: 1px 点线 #CCCCCC;}
#content .block {float: left;边框: 1px 实线 #CCCCCC;背景: #F0F0F0;内边距: 10px;边距: 10px;宽度: 300px;}
风格>;

<身体>

jquery窗口震动特效

;


点击本框内,可实现关闭


    ;
  • 项目 1

  • 项目 2


  • 项目 3
      ;
    • 子项目 1

    • 子项目 2

    • 子项目 3

    • 子项目 4

    • 子项目 5



  • 第 4 项

  • 第 5 项





<标签=“inp1”>文本字段1:<输入类型=“text”name=“inp1”id=“inp1”值=“”/>/> ;


<标签=“inp2”>文本字段2:<输入类型=“text”name=“inp2”id=“inp2”值=“”/>/> ;


<按钮类型=“提交”>提交










相关标签:
来源:php.cn
上一篇:使用Node.js实现一个简单的FastCGI服务器实例_node.js 下一篇:初识SmartJS - AOP三剑客_其它
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!