<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JQuery实现的模块交换动画效果</title>
<meta name="Keywords" content="jquery，模块，交换，动画，javascript特效"/>
<meta name="Description" content="JQuery实现的模块交换动画效果。在模块交换过程中，设置模块position为absolute，实现交换。"/>
<script type="text/javascript" src="jquery-1.8.1.min.js""></script>
<style type="text/css">
div.container{position:relative;}
div.container .itemA,div.container .itemE{width:300px;height:100px;background:#aaa;}
div.container .itemE{background:#eee;}
div.container .itemA .btn,div.container .itemE .btn{text-align:right;}
</style>
<script type="text/javascript">
function addItem() {
var p = $(‘.container‘), lastChild = p.children(":last");
p.append(lastChild.clone().attr(‘class‘, lastChild.attr(‘class‘) == ‘itemE‘ ? ‘itemA‘ : ‘itemE‘));
p.children(‘:last‘).append("--" + new Date().toLocaleTimeString());
}
function setItemPosition(dvContainer, isAB) {//更新子项的position和top
dvContainer.css(‘height‘, isAB ? dvContainer.height() : ‘‘);
var h = 0, eachItem;
dvContainer.children().each(function () {
eachItem = $(this);
eachItem.css({ ‘position‘: isAB ? ‘absolute‘ : ‘relative‘, ‘top‘: isAB ? h : ‘‘ });
if (isAB) h += eachItem.outerHeight(true);
});
}
$(function () {
$(‘#btnAdd‘).click(addItem);
$(‘.btn input‘).live(‘click‘, function () {
var o = $(this), pNode = o.parent().parent(), v = o.val();
switch (v) {
case ‘删除‘: if (pNode.parent().children().length < 2) alert(‘至少留有一项！‘); else pNode.remove(); break;
case ‘上‘:
case ‘下‘:
var refNode = pNode[v == ‘上‘ ? ‘prev‘ : ‘next‘]();
if (refNode[0] == null) { alert(v == ‘上‘ ? ‘已经是第一位！‘ : ‘已经是最后一位！‘); return false; }
setItemPosition(pNode.parent(), true);
var nItemTop = refNode.css(‘top‘), refItemTop = pNode.css(‘top‘);
pNode[v == ‘上‘ ? ‘after‘ : ‘before‘](refNode); //交换位置
pNode.animate({ top: nItemTop }, 300); ;
refNode.animate({ top: refItemTop }, 300, function () { setItemPosition(pNode.parent()); });
break;
}
});
});
</script>
</head>
<body>
<input type="button" value="添加新快" id="btnAdd"/>
<div class="container">
<div class="itemA"><div class="btn"><input type="button" value="删除" /><input type="button" value="上" /><input type="button" value="下" /></div>其他内容</div>
<div class="itemE"><div class="btn"><input type="button" value="删除" /><input type="button" value="上" /><input type="button" value="下" /></div>其他内容</div>
</div>
</body>
</html>
时间： 2024-10-27 04:30:05