<!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,玩玩挺有体验效果,哈哈