环绕图片展示

实现图片环绕展示功能，鼠标滚轮滑动，图片位置转动，鼠标点击左右侧图片，图片位置转动。

20240110_174637

准备工作：

图片，vscode安装插件Live Sass Compiler(使用sass写的css,由于不是工程项目需要该插件)

实现过程：

创建目录之后，在终端中 使用 npm init 创建package.json，然后安装sass。

安装sass: npm install sass@1.32.12

Watch Sass启动之后会生成css文件，引入自动生成的css文件

<link  rel="stylesheet" href="./css/ab.css">

HTML代码：

<div class="imgs" id="imgs">
    <img src="./imgs/1.jpeg" alt="0">
    <img src="./imgs/2.jpeg" alt="1">
    <img src="./imgs/3.jpeg" alt="2">
    <img src="./imgs/4.jpeg" alt="3">
    <img src="./imgs/1.jpeg" alt="4">
    <img src="./imgs/2.jpeg" alt="5">
    <img src="./imgs/3.jpeg" alt="6">
    <img src="./imgs/4.jpeg" alt="7">
    <img src="./imgs/1.jpeg" alt="8">
    <img src="./imgs/2.jpeg" alt="9">
  </div>
</body>
<script>
  let dom = document.getElementById("imgs")
  let childNodes = dom.children.length
  let deg = 360/childNodes
  let count = 0
  document.addEventListener('wheel', function(e) {
    var delta = e.deltaY; 
    if(delta>0){  //判断滚轮方向
      count++
    }else if(delta<0){
      count--
    }
    dom.style.transform = `rotateY(${deg*count}deg)`
  });
  
  let innerWidth = window.innerWidth/2
  dom.addEventListener('click',function(e){
    //判断点击屏幕区域
    if(e.clientX>innerWidth && e.target.alt){
      if((e.clientX-e.target.width/2)>innerWidth){
        count++
      dom.style.transform = `rotateY(${deg*count}deg)`
      }
    }else if((e.clientX)<innerWidth && e.target.alt){
      if((e.clientX+e.target.width/2)<innerWidth){
        count--
        dom.style.transform = `rotateY(${deg*count}deg)`
      }
      
    }
  })

SASS代码：

@use "sass:math";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  overflow: hidden;
}
body{
  background: #000;
  perspective: 2000px;
}
.imgs{
  width:100vw;
  height: 100vh;
  transform-style: preserve-3d;
  transition: 1s;
  img {
    position: absolute;
    $imgwidth:300px;
    $imgHeight:400px;
    width: $imgwidth;
    height: $imgHeight;
    left: 50%;
    top: 50%;
    $n: 10;
    $pDog: math.div(360deg, 10);
    $r: 600px;
    backface-visibility: hidden;
    opacity: 0.8;
    &:hover{
      opacity: 1;

    }
    @for $i from 1 through $n {
      &:nth-child(#{$i}){
        // border: 1px solid #fff;
        $deg:$pDog*($i - 1);
        $x:math.sin($deg)*$r;
        $z:math.cos($deg)*$r;
        transform: translate3d($x,0,$z) rotatey(180deg + $deg);
      }

    }
    transform: translate3d(0,0,-600px);
    margin-left: math.div(-$imgwidth, 2);
    margin-top: math.div(-$imgHeight, 2);
  }
}