jQuery实现的差异窗口震动效果实例

本文实例讲述了jQuery实现的差异窗口震动效果。分享给大家供大家参考。具体如下：

这是一款jQuery窗口震动效果代码，在差异边框内点击一下鼠标，它就开始震动了，适用浏览器：IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' /titlejquery窗口震动特效/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript '；（函数($){ var element={ }；$ .fn。jshaker=function(){ element=$(this)；element.css('position '，' relative ')；element.find('* ')。每个（函数(I，el){ $(el)).css(“”位置','相对');});var iFunc=function(){ $。fn。jshaker。动画($(元素))；};setTimeout(iFunc，50)；};$ .fn。jshaker。animate=function(El){ $。fn。jshaker。摇动(El)；el.find('* ').每个(函数(I，El)){ $。fn。jshaker。摇动(El)；});var iFunc=function(){ $。fn。jshaker。动画(El)；};setTimeout(iFunc，50)；} $ .fn。jshaker。摇动=函数(El){ var pos=$(El).position()；if(Math.random() 0.5){ $(el).css('top '，pos['top'] Math.random() * 20 10？(数学。random()* 20 *(1)):数学。random()* 20)；} else { $(el).css('left '，pos['left'] Math.random() * 20 10？(数学。random()* 20 *(1)):数学。random()* 20)；} } })(jQuery)；/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).block ').单击(function(){ $(this)).jshaker()；});});/script style type=' text/CSS ' BOdy { font-family : ' Lucida Grande '，Arial，Helvetica，无衬线；color : # 666666 font-size : 12px；background : # FFFFFF } A { color : # 0A8ECC } A : HOOVER { text-decoration : none；color : # 8FCB2F } H1 { font-weight :正常；color : # 0a8 ECC margin : 0；padd : 0；} BOdy { margin : 20pxpadding : 20px } STRONG { color : # 00000 }。vspacer { height : 20px } PRE . code { padd : 7px背景技术： # 777777;颜色： # F0F 0；宽度： 400像素；飞越：汽车；} #内容区{ border : 3px solid # CCCCCC；背景技术： # F0F 0；padding: 10px宽度： 500像素；} p . script-link { clear : both；padd : 10px 0；边界-top: 1px虚线# CCCCCC；} #内容。左块{ float:border: 1px固体# CCCCCC；背景技术： # F0F 0；padding: 10pxmargin: 10px宽度： 300像素；}/style/head body div id=' page ' h1j查询窗口震动特效/h1 div id=' content ' div class=' block ' p点击本框内，可实现震动/p ul Li项目1/Li项目2/Li项目3 ul Li子项目1/Li Li子项目2/Li Li子项目3/Li Li子项目4/Li/ul/Li项目4/Li Li项目5/Li/ul/div class=' block '表单操作=“#”plabel表示=“in P1”文本字段1:/labelinput类型=' Text ' name=' InP 1 ' id=' InP 1 ' value=' '/p plabel for='希望本文所述对大家的jquery程序设计有所帮助。