js抄袭笔记 -- 飞出

[size=large]

这个博客http://james.padolsey.com 太好了 很久没有看到这么好的博客了

http://james.padolsey.com/page/2/


// jQuery plugin: 'flyOffPage'
// @description Selected element/'s will fly off page in random or pre-defined direction.
// @version 0.1
// @author James Padolsey
// @info http://james.padolsey.com/javascript/new-jquery-plugin-fly-off-page/

(function($,W,D){

// Define all possible exit positions:
var exitPositions = {
top: function(el) {
return {
top: 0 - el.height(),
left: el.offset().left
};
},
topLeft: function(el) {
return {
top: 0 - el.height(),
left: 0 - (el.width()/2)
};
},
topRight: function(el) {
return {
top: 0 - el.height(),
left: $(W).width() + (el.width()/2)
};
},
left: function(el) {
return {
top: el.offset().top,
left: 0 - el.width()
};
},
right: function(el) {
return {
top: el.offset().top,
left: $(W).width() + el.width()
};
},
btmLeft: function(el) {
return {
top: getWindowHeight() + el.height(),
left: 0 - (el.width()/2)
};
},
btmRight: function(el) {
return {
top: getWindowHeight() + el.height(),
left: getWindowHeight() + (el.width()/2)
};
},
btm: function(el) {
return {
top: getWindowHeight(),
left: el.offset().left
};
}
};

function getWindowHeight() {
return W.innerHeight || $(window).height();
}

function randDirection() {

var directions = [],
count = 0;

// Loop through available exit positions:
for (var i in exitPositions) {
// Push property name onto new array:
directions.push(i);
count++;
}

// Return random directions property (corresponds to exitPositions properties):
return directions[ parseInt(Math.random() * count, 10) ];

}

function prepareOverflow() {

// The various overflow settings will be set to hidden,
// but only if it does not conflict with the current document:
var oX = $(D).width() <= $(W).width(),
oY = $(D).height() <= $(W).height(),
oR = oX && oY;
oX && $('body').css('overflow-x','hidden');
oY && $('body').css('overflow-y','hidden');
oR && $('body').css('overflow','hidden');

}

function flyElement(s) {

// Main functionality of plugin:

// Create shortcut to element:
var el = $(this),

// Handle random direction:
direction = s.direction.toLowerCase() === 'random' ? randDirection() : s.direction,

// New objext: Tweens - All tweens, including user-defined ones and ours:
// (Gives our tweens precedence):
tweens = $.extend(s.tween, exitPositions[direction](el)),

// Define all properties associated with layout/position:
positionProps = 'position,left,top,bottom,right,width,height,paddingTop,paddingRight,paddingBottom,paddingLeft,marginTop,marginRight,marginBottom,marginLeft,zIndex,overflow,clip,display',
// New element: clone of original (remove unique identifier):
// (Must re-apply all layout styles because the ID may have been CSS hook):
clone = $(el.clone())
.removeAttr('id')
.attr('id', 'replaced-element-' + (+new Date()))
.css((function(){
// Loop through each position/layout property
// and return object containing all:
var props = positionProps.split(','),
length = props.length,d
styles = {};
while(length--) { styles[props[length] = el.css(props[length]); }
return styles;
})());

// Prepare document overflows:
prepareOverflow();


$(el)

// Style new element:
.css({
left: tweens.left ? el.offset().left : null,
top: tweens.top ? el.offset().top : null,
position: 'absolute',
zIndex: 999,
width: el.outerWidth(),
height: el.outerHeight()
})

// Animate using collective 'tweens' object:
.animate(tweens, s.duration, function(){
// On comepletion, remove the animated element:
el.remove();
})

.filter(function(){
// Filter:
// (will only continue with chain if user set 'retainSpace' to true)
return !!s.retainSpace;
})

// Insert clone before original element: (make clone invisible)
.before($(clone).css('opacity',0));

if (s.retainSpace && typeof s.retainSpace === 'object') {
$(clone).animate(s.retainSpace, s.duration, function(){
$(this).remove();
});
}

}

// Expose functionality to jQuery namespace:
$.fn.flyOffPage = function(userDefinedSettings) {

// Define settings
var s = $.extend({
direction: 'random',
tween: {},
retainSpace: true,
duration: 500
}, userDefinedSettings);

// Initiate:
return this.each(function(){
flyElement.call(this,s);
});

};

})(jQuery,window,document);

$('img').click(function(){
$(this).flyOffPage({
retainSpace: {
height: 0,
width: 0,
margin: 0
},
tween: {
opacity: 0
}
});
return false;
});

[/size]
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值