首頁 > web前端 > js教程 > 主體

jQuery實現的Div視窗震動特效_jquery

WBOY
發布: 2016-05-16 16:45:19
原創
1360 人瀏覽過
複製代碼如下代碼:

格//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;背景:#FFFFFFFFFFFFFFFF ;}
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 項





文字欄位1: /> ;


文字欄位2:/> ;


提交


表格>

div>


身體>


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!