Jquery 动态交换两个div位置并添加Css动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery交换Div位置</title>
</head>
<body>
<div id="top" style="width:100%;height:100px">
<div id="topDiv" style="width:100%;height:100%;background-color:lightcoral;float:left;"></div>
<div style="clear:both"></div>
</div>
<div style="width:100%;height:1000px">
<div id="left" style="width:10%;height:100%;background-color:lightgreen;float:left;"></div>
<div id="right" style="width:90%;height:100%;background-color:lightgray;float:left;">
<h1> <a id="changeDiv" href="javascript:;">交换</a></h1>
</div>
<div style="clear:both"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#changeDiv").click(function () {
changePosition($("#topDiv"), $("#left"));
});
});
function changePosition(select1, select2) {
var removeDiv1 = select1;
var removeDiv2 = select2;
var appendToObj1 = hasBorther(removeDiv1);
var appendToObj2 = hasBorther(removeDiv2);
addCartoon(removeDiv1, removeDiv2);//添加动画
//移动两个容器
removeDiv(appendToObj1, removeDiv2);
removeDiv(appendToObj2, removeDiv1);
}
//判断其后边是否存在兄弟元素
function hasBorther(va1) {
if (va1.next()[0]) {//兄弟元素
return { bor: va1.next() };
} else {
return { par: va1.parent() };//父元素
}
}
//保证位置正确
function removeDiv(app, Div) {
if (app.bor) {//兄弟元素
Div.insertBefore(app.bor);
} else {
Div.appendTo(app.par);
}
}
//移动时之前------添加动画
function addCartoon(a, b) {
var clearTransform = function (Div, time) {
setTimeout(function () {
Div.css({ ‘transform‘: ‘inherit‘, ‘-webkit-transform‘: ‘inherit‘ });
}, time)
}
//记录两容器原始高宽
var oldOpt = { ax: a.width(), ay: a.height(), bx: b.width(), by: b.height() };
//获取两容器屏幕位置
var a_pos = a.offset();
var b_pos = b.offset();
//获取两容器偏移值
var offset_x = a_pos.left - b_pos.left;
var offset_y = a_pos.top - b_pos.top;
//第一个花括号里面是动画内容，可以为空，但不能省去中括号
a.animate({}, function () {
var offset_x_ = -offset_x; //偏移值取反
var offset_y_ = -offset_y;
var transformStr = ‘rotate(360deg) translate(‘ + offset_x_ + ‘px,‘ + offset_y_ + ‘px)‘;
a.css({ ‘width‘: oldOpt.bx + ‘px‘, ‘height‘: oldOpt.by + ‘px‘, ‘transform‘: transformStr, ‘-webkit-transform‘: transformStr });
clearTransform(a, 0);
})
b.animate({}, function () {
var transformStr = ‘rotate(360deg) translate(‘ + offset_x + ‘px,‘ + offset_y + ‘px)‘;
b.css({ ‘width‘: oldOpt.ax + ‘px‘, ‘height‘: oldOpt.ay + ‘px‘, ‘transform‘: transformStr, ‘-webkit-transform‘: transformStr });
clearTransform(b, 0);
})
}
function changePosition2() {
var select1 = $(‘#select1‘);
var select2 = $(‘#select2‘);
if (select1.val() != select2.val()) {//不同元素 位置交换
var removeDiv1 = $(‘#‘ + select1.val());
var removeDiv2 = $(‘#‘ + select2.val());
var appendToObj1 = hasBorther(removeDiv1);
var appendToObj2 = hasBorther(removeDiv2);
addCartoon(removeDiv1, removeDiv2);//添加动画
//移动两个容器
removeDiv(appendToObj1, removeDiv2);
removeDiv(appendToObj2, removeDiv1);
} else {
alert(‘请选择不同元素交换位置！‘);
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/kikyoqiang/p/12394759.html
时间： 2024-11-09 00:29:47