jquery 交换位置jquery交换Div位置
Posted Kikyo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 交换位置jquery交换Div位置相关的知识，希望对你有一定的参考价值。
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>
以上是关于jquery 交换位置jquery交换Div位置的主要内容，如果未能解决你的问题，请参考以下文章