机票去程返程的切换效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="http://www.zhangweiwei.cn/demo/reset.css">
    <link rel="stylesheet" href="https://css.40017.cn/cn/min/??/touch/cn/internFlight/wx/public/mCal_wx.fwd.1.0.5.css,/touch/cn/internFlight/wx/airplane/mCity.2.0.2.css,/touch/cn/internFlight/wx/airplane/flightsearch.wx.fwd.1.0.15.css?v=2017031401">
    <link rel="stylesheet" href="https://css.40017.cn/cn/min/??/touch/cn/internFlight/wx/public/base.wxcard.1.0.10.css?v=2017031401">
    <style>
        #city input.flyright {
            -moz-transform: translateX(227%);
            -moz-transition: all .5s ease-in-out;
            -ms-transform: translateX(227%);
            -ms-transition: all .5s ease-in-out;
            -webkit-transform: translateX(227%);
            -webkit-transition: all .5s ease-in-out;
            transform: translateX(227%);
            transition: all .5s ease-in-out;
            opacity: 0;
        }

        #city input.flyleft {
            -moz-transform: translateX(-227%);
            -moz-transition: all .5s ease-in-out;
            -ms-transform: translateX(-227%);
            -ms-transition: all .5s ease-in-out;
            -webkit-transform: translateX(-227%);
            -webkit-transition: all .5s ease-in-out;
            transform: translateX(-227%);
            transition: all .5s ease-in-out;
            opacity: 0;
        }

        #city input.fly-left03 {
            -webkit-transform: translateX(-211%);
            -moz-transform: translateX(-211%);
            -ms-transform: translateX(-211%);
            transform: translateX(-211%)
        }

        #city input.fly-left04 {
            -webkit-transform: translateX(-194%);
            -moz-transform: translateX(-194%);
            -ms-transform: translateX(-194%);
            transform: translateX(-194%)
        }

        #city input.fly-left05 {
            -webkit-transform: translateX(-179%);
            -moz-transform: translateX(-179%);
            -ms-transform: translateX(-179%);
            transform: translateX(-179%)
        }

        #city input.fly-right03 {
            -webkit-transform: translateX(211%);
            -moz-transform: translateX(211%);
            -ms-transform: translateX(211%);
            transform: translateX(211%)
        }

        #city input.fly-right04 {
            -webkit-transform: translateX(194%);
            -moz-transform: translateX(194%);
            -ms-transform: translateX(194%);
            transform: translateX(194%)
        }

        #city input.fly-right05 {
            -webkit-transform: translateX(179%);
            -moz-transform: translateX(179%);
            -ms-transform: translateX(179%);
            transform: translateX(179%)
        }
    </style>
</head>

<body>
    <div id="city" class="fn-clear">
        <div id="from" data="fromCity">
            <p class="incity">
                <input readonly="" type="text" id="goCity" name="beginCity" class="c_name" value="重庆">
            </p>
        </div>
        <div id="to" data="arrCity">
            <p class="incity">
                <input readonly="" type="text" id="backCity" name="arrCity" class="c_name" value="香港">
            </p>
        </div>
        <a class="fed-icon-box">
            <em class="changecity fed-fly" id="changecity" style="transform: rotate(0deg);">
                                <em class="pic_change wxBgIcon fed-fly-icon">
                                </em>
            </em>
            <em class="fed-plane">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAUCAYAAADPym6aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDQ2ZTcwMS02YzQ4LTJmNGMtYWY2ZS1kYTM1NzhkMjEwNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0U2MkJGRTZCODVFMTFFNjgwMDZENkREOTI0M0QxRjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0U2MkJGRTVCODVFMTFFNjgwMDZENkREOTI0M0QxRjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDg0MzIyZDYtMzJhZC05NTQ4LWI4YTAtYzRiN2U4ZDZlZWMxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRkNDZlNzAxLTZjNDgtMmY0Yy1hZjZlLWRhMzU3OGQyMTA2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpYeihYAAAJdSURBVHja3NdPSFRRFMfxGY0saeEiIgoiSBAFI8xNQZIQQQmSigiBFRFBgpugTRlCtTFqEy1KhIooIiqTKApRwf6YERQpNUQaFpUkCYl/IrPpe/FnDMNzvO/dUcEDHxfO+3ffvfec88LRaDS0EGKR+ZPZ1ujnnDvIQQ9eowOP8XO+BvGhsGRyID7jNJ4hCzv1vz94glu4iYG5HkxKgHOe46LHzG7FeXzWYLYjnMTn3IZzeIMRvbw2rY5AAzFxBO+m+S0N5XiEbhzE0oD3WYPjeI9mVCMX6UjVy6t3GcgwSi32RY5m7xNOYqXl9bfgNnpxAusSHJvnMhATEezAqMWxy1GDPlzGBo9jzKztwUu060WlWlz7retAQspYuzBmefxi7MUrtKIYBWjAN1zBRh/3H0LV//TrGM16e3e1P2yjUIJGJw5oHzrPyFQ81Ab/PctZdhz3UYRNU4OInZGz2Iwv+rEFT/HXx03uoRLXLde2bfzSrJuq3YTBRHXkDNaiDLXabB9xDBk+q/6lJDz8mGpRuRJFsa47OFNBNBttNybicvgpDehwgv20JOZG/Vq3QZfNA83qClSoUxix7rUUpkoeRV3cMRlaepVKj11YpfakSBV3mcPbN+n2Km7gu1PTGNdHmSV2yONYk/tfqMrmOrYffXr4a6pHyel+46JaxWnfNMtofcB79cc0labBTOr3g9dAzD7Zr71R65iie5QuG9XqT8zq94hHRNXjmBR8wXyyWF7vh85p1wAioTmKmSq7qSfZSoMmi+Rjtfqrr+pzItKpjnhePjnDC+VT958AAwDProvdzdVo/QAAAABJRU5ErkJggg==" alt="Alternate Text">
                            </em>
        </a>
    </div>
</body>
<script src="https://js.40017.cn/touch/public/zepto.1.2.0.js"></script>
<script>
    var l = 180;
    $(".changecity").on('mousedown', function() {
        var n = $("input#goCity").val(),
            q = $("input#backCity").val();
        var m = n.length,
            p = q.length;
        m = m > 5 ? "5" : m;
        p = p > 5 ? "5" : p;
        $("#backCity").addClass("flyleft fly-left0" + p);
        $("#goCity").addClass("flyright fly-right0" + m);
        $(this).animate({
            transform: "rotate(" + l + "deg)",
            "-webkit-transform": "rotate(" + l + "deg)",
        }, 300, "ease-in-out", function() {
            if (l == 360) {
                $(this).css({
                    transform: "rotate(0deg)",
                    "-webkit-transform": "rotate(0deg)"
                });
                l = 180
            } else {
                l = 360
            }
        });
        setTimeout(function() {
            $("#backCity").removeClass("flyleft fly-left0" + p);
            $("#goCity").removeClass("flyright fly-right0" + m);
            $("input#goCity").val(q);
            $("#backCity").val(n);
        }, 500)
    });
</script>

</html>

同城是这样玩,直切切换100%;
而携程和淘宝是切换到50%,然后在切换回去。产生切换的动态效果,切换完成替换去程和返程的value,玩玩挺有体验效果,哈哈

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值