jQuery实现的Div窗口震动效果实例_jquery_动视

jQuery实现的Div窗口震动效果实例_jquery

2020-11-27 21:41:43 责编:小采

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

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

运行效果截图如下：

具体代码如下：





jquery窗口震动特效


;(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);

希望本文所述对大家的jquery程序设计有所帮助。

下载本文

显示全文

全部频道