前端网页开发中我们经常会遇到需要动态置换两个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. NW.js构建桌面应用

    最近要做个桌面的应用,用起来也方便.找了一圈发现NW.js挺容易上手,分享给大家. NW.js 官网https://nwjs.io/ 1.下载适合当前版本的js [这里下载的SDK版本,方便后续调试] ...

  2. codeforces 597div2 F. Daniel and Spring Cleaning（数位dp+二维容斥）

    题目链接:https://codeforces.com/contest/1245/problem/F 题意:给定一个区间(L,R),a.b两个数都是属于区间内的数,求满足 a + b = a ^ b ...

  3. vue+axios安装

    Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 安装方式: 1.使用cdn <script src="https://unpkg.com/axios ...

  4. js三种常见的对话框

    js中的对话框事通过调用window对象的alert()  confirm()  和 prompt()来获得,完成人机交互. 1. 警告框alert() function alert(){ // 弹出 ...

  5. JS高级---实例对象和构造函数之间的关系

    实例对象和构造函数之间的关系:   1. 实例对象是通过构造函数来创建的---创建的过程叫实例化   2. 如何判断对象是不是这个数据类型?    1) 通过构造器的方式 实例对象.构造器==构造函数 ...

  6. 关于websockets的压测工具

    这是在workerman群中得到的信息,记录在此: loadrunner  jemeter

  7. eclipse 切换主题Theme

    eclipse切换主题theme 1. 打开help -> eclipse marketplace,搜索theme 2. 点击右侧安装后一直继续,直到安装完成 3. 安装完成后会重启eclips ...

  8. Linux下查看当前文件大小的命令

    1.ls -lht 列出每个文件的大小和当前目录所有文件大小总和 2.du -sh * 列出当前文件夹下的所有子文件的大小 看你需要啥样的,自己来吧

  9. SpringCloud全家桶学习之断路器---Hystrix（五）

    目前我也在摸索着学习Spring Cloud,本节主要摸索的是服务熔断.服务降级.Hystrix服务监控. 一.Hystrix概述 (1)服务雪崩 服务雪崩:多个微服务之间调用的时候,假设微服务A调用 ...

  10. Hack the box邀请码和注册问题总结

    注意下,有3个坑, 1. 解码方式是随机的,记得看DATA下面提示用哪种 2. post时候可以直接用f12里的console,命令是: $.post('https://www.hackthebox. ...