jQuery技术

jQuery 许愿墙代码

字号+ 作者:H5之家 来源:H5之家 2016-08-02 15:01 我要评论( )

jQuery 许愿墙代码 支持浏览器 IE 6+, Safari 4+ , Firefox 3+ 参考了某个同类型的代码,简化了。 使用 Usage:$(

/* * tiyo wish * [email protected] */ (function($){ $.fn.wish = function() { var _this = this; var _wish = _this.children(); var _wishs = _wish.length; var wish = { area:{ left:0, top:0, right: _this.width(), bottom: _this.height() }, skin:{ width: 225, height: 206 } }; $.extend(wish); var _left = wish.area.left; var _right = wish.area.right; var _top = wish.area.top; var _bottom = wish.area.bottom; _right = _right - _left > wish.skin.width ? _right : _left + wish.skin.width; _bottom = _bottom - _top > wish.skin.height ? _bottom : _top + wish.skin.height; _right = _right - wish.skin.width; _bottom = _bottom - wish.skin.height; var methods = { rans : function(v1,v2){ var ran = parseInt(Math.random() * (v2 - v1) + v1); return ran; }, pos : function(){ return {left:methods.rans(_left, _right), top:methods.rans(_top, _bottom)} }, css : function(){ return methods.rans(1,5); } } _wish.each(function(i){ var _p = methods.pos(); var _s = methods.css(); var _self = $(this); _self.prepend('<a class="close"></a>'); _self.addClass('wish').addClass('s'+_s).css({'position':'absolute', 'left':_p.left + 'px', 'top':_p.top + 'px'}); _self.hover( function(){ _self.css({'z-index':'9999','border':'none'}).children('.close').show().bind('click',function(){_self.effect('scale',{percent: 0},200,function(){_self.remove()})}); }, function(){ _self.css({'z-index':'','border':'none'}).children('.close').hide(); }); }); }; })( jQuery );

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery教程:14个实用的jQuery技巧(4)

    jQuery教程:14个实用的jQuery技巧(4)

    2016-06-05 13:00

  • 怎样学习jQuery,jQuery教程

    怎样学习jQuery,jQuery教程

    2016-03-27 15:00

  • 【jQuery教程】jquery基础教程二(鼠标点击事件)

    【jQuery教程】jquery基础教程二(鼠标点击事件)

    2016-03-06 15:00

  • jQuery教程:14个实用的jQuery技巧

    jQuery教程:14个实用的jQuery技巧

    2016-02-06 10:00

网友点评
p