- 浏览: 1294956 次
- 性别:
- 来自: 江苏
最新评论
-
honey_fansy:
的确,不要自己的支持就说完美支持,我的就不行,别说我的不是fi ...
无js实现text-overflow: ellipsis; 完美支持Firefox -
fanchengfei:
事件长微博,欢迎转发:http://weibo.com/332 ...
《在路上 …》 写代码也需要一点演技 – python2.6 的 class decorator -
blued:
没有报错,但排版效果一点都没有 咋回事。请指教
python排版工具 -
szxiaoli:
耍人呀,效果在哪儿呀
滑动效果 -
accaolei:
这个能监到控子目录吗?,我测试了一下,发现子目录里的文件监控不 ...
windows监控目录改动
这个博客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;
});
发表评论
-
gz后仅5.5K的Rich Editor
2009-12-24 14:31 2047http://kissy.googlecode.com/sv ... -
windows监控目录改动
2009-07-30 16:30 3314先安装 http://sourceforge.net/proj ... -
每天写一点web框架 5
2009-07-29 23:31 1560继续 http://blog.html.it/layoutg ... -
每天写一点web框架 4
2009-07-28 10:02 1339昨天有事出差,先补上一篇 先 easy_install we ... -
每天写一点web框架 3
2009-07-26 11:22 1308http://code.google.com/p/zpyweb ... -
每天写一点web框架 2
2009-07-25 21:37 1254今天把url route弄好了 http://code.goo ... -
每天写一点web框架 1
2009-07-24 17:32 1460打算开始写一个web框架了 有空就写一点吧 今天写的是模 ... -
linux 命令 zcat , pgrep
2009-07-15 01:43 4821http://www.ibm.com/developerwor ... -
Tokyo Dystopia 全文搜索
2009-07-13 10:33 2254http://d.hatena.ne.jp/perezvon/ ... -
随笔...
2009-05-21 01:00 12431. 交换机的东西我一点不懂 今晚学了一点. 100M 电 ... -
jquery.wysiwyg.js
2009-05-19 01:58 7320http://code.google.com/p/jwysiw ... -
linux下安装dns本地缓存
2009-04-12 12:04 4305linux的版本是gentoo 写爬虫不用dns缓存很容易就 ... -
事前审查系统设计思路整理
2009-03-18 18:17 1505整理一下思路 先定义一个函数 function 发表函数( ... -
顺手写的一个tab样式
2009-03-02 16:39 2236<!DOCTYPE HTML PUBLIC &quo ... -
备忘:MySQL InnoDB Error "the table is full"
2009-02-23 13:16 3628http://blog.imminentweb.com/te ... -
LucidDB 备忘
2009-02-21 00:04 3353http://en.wikipedia.org/wiki ... -
js高亮关键词代码备忘
2009-02-17 11:42 2554当然是抄的啊:) 管理后台用这个很方便 <!DOCTY ... -
google reader 的 prompt 函数
2009-01-27 11:40 1679IE7对prompt做了限制,MS的产品部门真是好奇怪... ... -
jquery 1.3 event模型(消息<->订阅者)
2009-01-21 17:18 13391.3中对event进行改版,现在$(xxx).click等等 ... -
js抄袭笔记 -- 完美黑屏
2009-01-20 15:23 1561好处: 1.考虑了resize 2.考虑了页面宽度不足一屏幕 ...
相关推荐
Python学习笔记--皮大庆,非常适合零基础入门。对应英文版本《How to think like a computer scientist》
HotApp云笔记 - 精品开源demo-基于免费API(源代码+截图)HotApp云笔记 - 精品开源demo-基于免费API(源代码+截图)HotApp云笔记 - 精品开源demo-基于免费API(源代码+截图)HotApp云笔记 - 精品开源demo-基于免费API(源...
概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与...
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我
《技术人的管理之路》读书笔记 --思维导图 《技术人的管理之路》读书笔记 --思维导图 《技术人的管理之路》读书笔记 --思维导图 《技术人的管理之路》读书笔记 --思维导图 《技术人的管理之路》读书笔记 --思维导图 ...
嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序...
Java基础每日复习笔记-JavaSE高级阶段.2020-10-13-211312.edf
JavaScript笔记-个人笔记-X-mind格式
信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.docx信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.docx信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.docx信息系统项目管理...
信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.pdf信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.pdf信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.pdf信息系统项目管理师...
通信电子电路(高频-模电PLUS)-手写笔记-期末考试复习通信电子电路(高频-模电PLUS)-手写笔记-期末考试复习通信电子电路(高频-模电PLUS)-手写笔记-期末考试复习通信电子电路(高频-模电PLUS)-手写笔记-期末考试...
根据《Redis笔记-尚硅谷周阳V1.3》整理,脑图、思维导图xmind
统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于...
LaTex教程--latex排版学习笔记---入门提高.pdf
精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》...
python爬虫学习笔记-scrapy框架(1) python scrapy 爬虫 python爬虫学习笔记-scrapy框架(1) python scrapy 爬虫 python爬虫学习笔记-scrapy框架(1) python scrapy 爬虫 python爬虫学习笔记-scrapy框架(1) python ...
Java基础每日复习笔记-JavaSE基础阶段.edf
js学习笔记-章节学习记录