火车票飞机票，点击切换按钮切换出发城市和到达城市

如图，点击中间的切换图标，切换左右两边的城市，并且带有动画效果

只要利用css的特性transition和js的方法toggleClass就可以啦，具体操作如下：

<div class="con"><div class="choose-city"><div class="leave"><p>出发城市</p><p>北京</p></div><div class="exchange"><img id="exchange-img" src="../../img/trainTicket/train-icon.png"></div><div class="go"><p>到达城市</p><p>上海</p></div></div>
</div>


.con {width: 95%;margin: 32px auto auto auto;background-color: #FFFFFF;text-align: center;
}.con>div {display: flex;justify-content: space-between;width: 92%;margin: 0 auto;border-bottom: #EEEEEE solid 1px;
}.con>.choose-city>div {text-align: center;position: relative;
}.con>.choose-city>.exchange>img {width: 32px;height: 32px;margin-top: 40px;
}.con>.choose-city>div>p:first-of-type {color: #999999;font-size: 14px;margin: 15px auto;
}.con>.choose-city>.leave>p:last-of-type,
.con>.choose-city>.go>p:last-of-type {color: #333;font-size: 20px;margin:  15px auto 5px auto;position: relative;transition: all 1s;right: 0;top: -10px;display: inline-block;
}
.con>.choose-city>.leave>p:last-of-type {left: 0;
}.con>.change>.leave>p:last-of-type {position: relative;left: 270px;top: -10px;transition: all 1s;
}.con>.change>.go>p:last-of-type {position: relative;right: 270px;top: -10px;transition: all 1s;
}

// 切换往返城市
$("#exchange-img").click(function() {$(".choose-city").toggleClass("change");//把choose-city的class和change交换
});

即可实现，我现在赶着下班就先不说了，明天，或者今天晚上再补充

火车票飞机票，点击切换按钮切换出发城市和到达城市相关推荐

JS实现点击button按钮切换图片
JS实现点击button按钮切换图片放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做 ...
微信小程序实现点击左右按钮切换时间与DatetimePicker 时间选择组件相结合
小程序实现左右按钮切换时间和DatetimePicker 时间选择组件相结合使用主要功能的实现思路就是将我们的正常时间转成时间戳,在时间戳的基础上加一天(减一天),然后再转换成正常的时间 WXML ...
点击某个按钮切换图片（按钮颜色跟着改变）
html: <div id="pic"><img src="img/1.jpg" alt=""><span&g ...
Android点击Button按钮切换按钮文字显示
概述首先声明一个boolean类型的对象status=fasle,给Button点击事件中添加if-else选择,当!false时,按钮显示文字open,然后status=true;在else中显示 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
angular点击按钮弹出页面_Axure RP8：如何做出点击按钮切换页面效果？
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
html点击按钮切换图片代码_SVG创意推文—『点击开窗』教程
嘿,胖友们大家好呀,我是三儿. 好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军.之前人民日报推了一篇<点亮武汉>在当时引起了不小的轰动,三儿也连忙出了 ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...

火车票飞机票，点击切换按钮切换出发城市和到达城市

火车票飞机票，点击切换按钮切换出发城市和到达城市相关推荐

最新文章

热门文章