通过css 中transform实现大小图切换

最新推荐文章于 2024-05-14 21:05:08 发布

电呼呼

最新推荐文章于 2024-05-14 21:05:08 发布

阅读量297

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_41981727/article/details/125610629

版权

方法一（html+css+js），通过添加两个类实现。

1.效果展示

如下图，点击色块即可实现大小图切换效果
在这里插入图片描述

2.完整代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片切换</title>
</head>
<style>
  .div1 {
    width: 400px;
    height: 400px;
    font-size: 30px; 
    text-align: center;
    line-height: 400px;
    background: #eac5c5;
    transform: translate(300px, 100px); /* 位置 */
    transition: 1.4s;  /* 切换时长 */
  }
  .div2 {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background: #a2c0ed;
    transform: translate(0px, -300px);
    transition: 1.4s;
  }
  .div1,.div2:hover {
    cursor: pointer;
  }
  .move1 {
    transform: translate(-100px, 0px) scale(0.5);  /* translate移动位置，scale缩放大小 */
  }
  .move2 {
    transform: translate(400px, -200px) scale(2);
  }
</style>

<body>
  <div class="div1" onclick="clickDiv1()">粉色</div>
  <div class="div2" onclick="clickDiv1()">蓝色</div>
</body>
<script>
  var div1 = document.getElementsByClassName('div1')[0];
  var div2 = document.getElementsByClassName('div2')[0];
  var count = 0;
  var clickDiv1 = function () {
    if(count==0){
      div1.classList.add("move1");
      div2.classList.add("move2");
      count++;
    }else{
      div1.classList.remove("move1");
      div2.classList.remove("move2");
      count--;
    }
  }

</script>

</html>

方法二（vue），通过添加一个类实现。

1.效果展示

如下图，点击按钮即可实现大小图切换效果。
该方法优点是，两图初始大小一样，避免两div内的图放大后出现不同程度的模糊。
在这里插入图片描述

2. 部分代码

<template>
        <div class="item item1">
          <i class="el-icon-sort" @click="switchItem1" style="transform:rotate(90deg)"></i>
          <div ref="item1Chart1" class="container chart1" v-show="isAccept[5]">
            <piechart :area-data="areaMonthData"></piechart>
          </div>
          <div ref="item1Chart2" class="container chart2" v-show="isAccept[5]">
            <piechart :area-data="areaMonthData"></piechart>
          </div>
          <div class="itemfoot"></div>
        </div>
</template>

<script>
export default {
  data() {
    return {
    num: 0, // 控制两图表点击切换
    }
  }
  created() {
  this.switchItem1() // 要先执行一下
  }
methods:{
 switchItem1() {
      var div1 = this.$refs.item1Chart1
      var div2 = this.$refs.item1Chart2
      console.log('div1', div1)
      if (this.num == 0) {
        div1.classList.add("move1");
        div2.classList.remove("move1");
        this.num++
      } else {
        div2.classList.add("move1");
        div1.classList.remove("move1");
        this.num--
      }
    }
  }
}
</script>
<style scoped lang="scss">
 .item1 {
    i:hover{
      cursor: pointer;
    }
    .chart1 {
      position: absolute;
      width: 400px;
      height: 300px;
      transform: translate(150px, 20px);
      transition: 1.2s;
    }
    .chart2 {
      position: absolute;
      width: 400px;
      height: 300px;
      transform: translate(150px, 20px);
      transition: 1.2s;
    }
  }
.move1 {
  transform: translate(-130px, 0px) scale(0.3) !important;
}
</style>