2024-01-13 87
效果图:
案例中四个按钮 当我们点击 第一个或者第二个时 方块都会进行一个位置互换 并且顶部的数字 会移动到最低部 当点击第三个按钮时 图中的方块 会以中间的方块为中心 进行对角互换位置 第四个按钮则是对四个对角位置的方块 进行一个位置互换
html:
css:
方块我们可以通过弹性布局 进行水平垂直居中 和排列 然后通过给transform添加transition动画达到我们点击时 的动画效果
* { padding: 0; margin: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #c0392b; font-family: "Nunito", sans-serif; } button { margin: 3px; width: 100px; height: 50px; color: white; background: #1378e4; opacity: 1; border: 2px solid white; font-size: 14px; opacity: 0.9; border-radius: 10%; cursor: pointer; } h1 { text-align: center; color: white; } #app { width: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; } #item { display: flex; align-items: center; justify-content: center; flex-flow: row wrap; width: 250px; margin-bottom: 20px; } .list { display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; background: #ddc300; border: 2px solid white; margin: 2px; } .item-list-move { transition: transform 1s; }
在数据中心 我们创建一个数组为items 里面写入9个数字 分别对应九个方块 通过v-for遍历到视图层当中
接着就是给按钮绑定对应的点击事件 第一个是将最后一列的方块移动到最前面 并且顶部的方块移至底部 在方法中创建一个空数组 用来接收 遍历过后的数组
当i等于0时 将items中长度减一对应的下标数组 添加到新建数组当中 其余则正常用当前i减1方式 进行添加 最后将数组赋值给 data中的items 遍历到视图当中
第二个的按钮是与第一个效果相反 大致效果相同
第三个按钮 是将我们items通过数组的方法reverse 将数组内容进行倒转
最后的对角互换 我们先声明俩个变量去接收数组中下标为0和2对应的数字 再创建一个空数组 用来接收循环遍历添加switch中对应内容
原文链接:http://1.15.94.33/?id=250
=========================================
http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台,请勿相信其他任何渠道。
Jquery 2022-12-02
Jquery 2022-12-02
Jquery 2022-12-02
Vue 2023-07-14
Vue 2023-06-02
Vue 2023-06-02
Vue 2023-07-07
Vue 2023-07-19
Vue 2023-07-03
Vue 2023-07-26
扫码二维码
获取最新动态