五一七教育网
您的当前位置:首页jQuery实现的Div窗口震动效果实例_jquery

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

来源:五一七教育网
 本文实例讲述了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程序设计有所帮助。

显示全文