Jquery 动态交换两个div位置并添加Css动画效果

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

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

  

  设计思路

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

 核心代码

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

1 function hasBorther(va1){
2             if(va1.next()[0]){//兄弟元素
3                 return {bor:va1.next()};
4             }else{
5                 return {par:va1.parent()};//父元素
6             }
7         }

兄弟元素判断

  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>

  

原文地址:https://www.cnblogs.com/giserjobs/p/11870050.html

时间: 2024-10-13 10:16:32

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

js交换两个div的位置

见demo js代码 function exchange(el1, el2){ var ep1 = el1.parentNode, ep2 = el2.parentNode, index1 = Array.prototype.indexOf.call(ep1.children, el1), index2 = Array.prototype.indexOf.call(ep2.children, el2); ep2.insertBefore(el1,ep2.children[index2]); ep

java交换两个数字位置

第一种:在main输出,通过反射实现 1 public static void main(String[] args) throws Exception { 2 Integer a = 1; 3 Integer b = 2; 4 swap(a, b); 5 System.out.println("a=" + a + "--------b=" + b); 6 } 7 8 public static void swap(Integer i1, Integer i2) t

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

ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import url(style.css); 动态外部 css 文件加载的方法有如下: 第一种: var style = docum

【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"&

大三在校生的传智120天的1200小时.net(十) 关于JQuery(最后一点动画效果*)

1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一个高亮度的(比如普通样式按钮坐标为100,100. 高亮样式按钮坐标为120,120),当鼠标经过,js改变css background-position:100 -100;动态变为120 -120.(至于为什么当你在很多网站要保存一个小图标,却保存成了很大的图片,就是因为网站的图标显示离痛了bac

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

实现逐帧动画和补间动画两种动画效果

1.逐帧动画(Frame Animation)通常在Android项目的res/drawable/目录下面定义逐帧动画的XML模板文件.编码的时候,需要在动画模板文件的<animation-list>标签中依次放入需要播放的图片,并设置好播放的间隔时间. <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"

原生js实现三个div层动态交换位置

html代码部分 <!--触发变换按钮--> <input type="button" onclick="startMove()" value="点击"/> <!--主体部分--> <div class="localbox"> <div id="b1" class="block1"></div> <div id

java实现原数组根据下标分隔成两个子数组并且在原数组中交换两个子数组的位置

此类实现:输出一行数组数据,根据输入的下标,以下标位置为结束,将原数组分割成两组子数组.并交换两个子数组的位置,保持子数组中的元素序号不变.如:原数组为7,9,8,5,3,2 以下标3为分割点,分割为子数组一:7,9,8,5.和子数组二:3,2.经过交换算法后的结果应为:3,2,7,9,8,5 有两种交换算法<1>前插法:将子数组3,2另存在一个临时数组中,将原数组7,9,8,5,3,2每一位向后移两个位置  再将子数组3,2插入到移动好元素位置的原数组中.<2>逆置法:将原数组7