前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置，常见的思路大多是不考虑原始位置，直接采用append或者appendTo方式将两元素进行添加，该法未考虑原始位置，仅会添加为元素的最后一子元素。

　　今天将给大家介绍一种位置交换方式（判断兄弟元素是否存在），并添加简单的css效果。

　　

　　设计思路

　　判断元素后边是否存在兄弟元素；存在则通过insertBefore方法将另一元素添加至其兄弟元素前，否则则直接采用appendTo方法添加至父元素。

　核心代码

　 1.判断其后边是否存在兄弟元素

 function hasBorther(va1){

             if(va1.next()[0]){//兄弟元素

                 return {bor:va1.next()};

             }else{

                 return {par:va1.parent()};//父元素

             }

         }

兄弟元素判断

　　2.根据兄弟元素存在与否改变元素位置

 function removeDiv(app,Div){

            if(app.bor){//兄弟元素

               Div.insertBefore(app.bor);

            }else{

               Div.appendTo(app.par);

            }

        }

　　

　　3.移动时之前------添加动画

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);

            })

　　效果图

　　　　说明：更改下拉框可完成两容器位置的交换，目前版本加入部分css动画，效果不是十分完美，欢迎大佬指导。

　　

源码

　　说明：引入jquery库即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>

        Document

    </title>

    </meta>

</head>

<body>

    <script src="jquery-1.11.3.min.js" type="text/javascript">

    </script>

    <style>

    .my-container {

        margin: auto 0;

        padding: 10px;

    }

    .my-container>div:first-child {

        background: #c0cbff;

        margin: auto 0;

        padding: 10px;

        height: 130px;

    }

    .my-container>div:last-child {

        background: pink;

        margin: 10px 0;

        padding: 10px;

        height: 130px;

    }

    .my-container>div>div {

        width: 100px;

        height: 100px;

        margin: 5px 10px;

        padding: 10px;

        float: left;

        /* 过渡时间 */

        transition:width 2s, height 2s, transform 2s;

        -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

    }

    .my-container>div:first-child>div {

        background: #ccc;

    }

    .my-container>div:last-child>div {

        background: #fff;

    }

    </style>

    <div class="my-container">

        <div class="div1">

            <div id="A">子容器A</div>

            <div id="B">子容器B</div>

        </div>

        <div class="div2">

            <div id="C">子容器C</div>

            <div id="D">子容器D</div>

        </div>

    </div>

    交换元素：

    <select name="" id="select1" class="select">

        <option value="A">A</option>

        <option value="B">B</option>

        <option value="C">C</option>

        <option value="D">D</option>

    </select>

    <select name="" id="select2" class="select">

        <option value="A">A</option>

        <option value="B">B</option>

        <option value="C">C</option>

        <option value="D">D</option>

    </select>

    <script>

    $(function() {

        $('.select').on('change',function(){

            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('请选择不同元素交换位置！');

            }

        })

        //判断其后边是否存在兄弟元素

        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);

            })

        }

    })

    </script>

</body>

</html>

　　

Jquery 动态交换两个div位置并添加Css动画效果的更多相关文章

  1. 完整版百度地图点击列表定位到对应位置并有交互动画效果demo

    1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo  ...

  2. java交换两个数字位置

    第一种:在main输出,通过反射实现 1 public static void main(String[] args) throws Exception { Integer a = 1; Intege ...

  3. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

  4. JQuery动态隐藏和显示DIV

    <head> <script language="javascript"> function HideWeekMonth() { $("#tt1& ...

  5. 常见的页面中两个div自适应等高CSS控制

    第一种利用dispaly:table,父级div设置dispaly:table子级div设置display: table-cell; 第一种利用dispaly:flex,父级div设置dispaly: ...

  6. jQuery点击按钮实现div的隐藏和显示切换效果

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

  7. js动态创建style节点(js文件中添加css)

    ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...

  8. DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  9. 面试题：如何在不使用临时变量temp的情况下交换两个整数的值？

    利用一个小技巧,一个整数a在异或另一个整数b两次以后所得的值还是整数a. 具体的过程我们可以自己找两个整数以二进制的形式自己在纸上画一下他们的异或过程.(异或的运算符号为"^") ...

随机推荐

  1. Python偶斐波那契数

    斐波那契数列中的每一项都是前两项的和.由1和2开始生成的斐波那契数列前10项为 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, … 考虑该斐波那契数列中不超过四百万的项,求其中为 ...

  2. EntityFramework 根据时间筛选数据

    需求:根据当前时间,获取条件合适的数据,其中截止时间只比较日期. 1. 运行会报错的版本: var lifeWorkEventBatch = clientRepositoryContainer.Lif ...

  3. AcWing 867. 分解质因数

    #include <iostream> #include <algorithm> using namespace std; void divide(int x) { ; i & ...

  4. 线段树 区间查询区间修改 poj 3468

    #include<cstdio> #include<iostream> #include<algorithm> #include<string.h> u ...

  5. 吴裕雄 python 机器学习——局部线性嵌入LLE降维模型

    # -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt from sklearn import datas ...

  6. Flutter 中的表单

    一.Flutter 常用表单介绍   Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框.CheckBox.Radio.Switch  CheckboxLi ...

  7. A. DZY Loves Chessboard

    DZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m columns. So ...

  8. C语言对两个浮点数进行比较的方法

    C语言对两个浮点数进行比较: C语言用"=="来比较两个浮点数,返回值完全是不确定的.  因此只能定义一个精度来确定是否相等: if(fabs(a-b) < 0.000000 ...

  9. mongodb的一些操作

    插入: db.inventory.insert( { _id: 10, type: "misc", item: "card", qty: 15 } ) db.i ...

  10. json_encode转化索引数组之后依然还是数组的问题

    小坑问题:直接上图 解决方法:(json_encode加入第二个参数) JSON_FORCE_OBJECT