DIV CSS 佈局教程網

雙擊下面的圖片，圖片會往外飛。

• 
• 
• 
• 
• 
• 
• 

也可以點擊這裡查看效果：http:///keleyi/phtml/jqplug/3.htm

代碼如下：
<style>
#select-keleyi-com ul{list-style-type:none}
</style>
<script>
//

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


<div id="select-keleyi-com">
<ul>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_s.jpg" alt="" /></li>
</ul>
</div>
<a href ="http:///a/bjac/fds76xqw.htm" target="_blank">原文</a>
<script type="text/javascript">
// <![CDATA[

$('li','#select-ke'+'leyi-com').dblclick(function(){
$(this).flyOffPage({
retainSpace: {
height: 0,
width: 0,
margin: 0
},
tween: {
opacity: 0
}
});
return false;
});

// ]]>
</script>

---

本效果的又一個例子，保存到HTML文件可以查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery刪除圖片往外飛-</title><style>
#select-keleyi-com ul{list-style-type:none;padding:0px;width:820px;height:200px;}
#select-keleyi-com ul li{padding:0px;width:200px;height:100px;float:left;text-align:center;}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script src="http:///keleyi/phtml/jqplug/3/keleyijs.js" type="text/javascript"></script>
</head>
<body>
<div style="width:810px;margin:0px auto;text-align:center;">
<h1>·刪除圖片往外飛</h1>
<div>雙擊圖片，圖片會飛向網頁外<a href ="http:///a/bjac/fds76xqw.htm" target="_blank">原文</a></div>
<div id="select-keleyi-com">
<ul>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_s.jpg" alt="" /></li>
<li><img src="http:///keleyi/phtml/jqplug/3/keleyi-com-2013-8-11_s.jpg" alt="" /></li>
</ul>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
$('img', '#select-ke' + 'leyi-com').dblclick(function () {
$(this).flyOffPage({
retainSpace: {
height: 0,
width: 0,
margin: 0
},
tween: {
opacity: 0
}
});
return false;
});
// ]]>
</script>
</body>
</html>