JavaScript特效思路,Web开发,技术交流,鱼C论坛

年少的梦想 发表于 2020-12-10 19:14:46

JavaScript特效思路

万能的鱼油啊，帮忙想一下，这个轮播图的实现思路，点击下一张，想要有右划的效果，但又不知道，应该改变那个属性，

yuesezhenmei 发表于 2020-12-10 19:14:47

用定位更新left属性

yuesezhenmei 发表于 2020-12-10 20:08:19

他还用了transform属性，使图片有层级的现象

yuesezhenmei 发表于 2020-12-10 20:17:03

送你一个自己写的3D轮播图每个图片由10个小块组成，会自动旋转不同角度形成新的图片，地址自己换，Scss的变量我开出来了，自己改大小，写成Vue组件模式了，直接加到你项目即可
<template>
<div class="bzgf">
   <img :src="bzgf" alt="" class="bzgf_bg" />
   <div class="swipe" ref="swipe" @mouseover="timeend" @mouseout="timestart">
         <span class="swipe_item_father" v-for="(itemf,indexf) in 10" :key="indexf">
            <span class="swipe_item_child" v-for="(itemc,indexc) in 4" :key="indexc"></span>
         </span>
         <img :src="btn" alt="" class="left_btn" @click="swipebefore">
         <img :src="btn" alt="" class="right_btn" @click="swipeafter">
   </div>
</div>
</template>

<script>
export default {
data() {
   return {
         id:0,
         bzgf: "http://127.0.0.1/assets/test.jpg",
         swieptime:'',
         btn:"http://127.0.0.1/assets/arrow.png",
         img:[
            "http://127.0.0.1/assets/bzgf_one.png",
            "http://127.0.0.1/assets/bzgf_two.png",
            "http://127.0.0.1/assets/bzgf_three.png",
            "http://127.0.0.1/assets/bzgf_four.png"
         ]
   }
},
methods:{
   swipechange(){
         let fatheritems=document.getElementsByClassName('swipe_item_father');
         for(let i=0;i<fatheritems.length;i++)
         {
            if(i<5)
            {
               fatheritems.children.style.backgroundImage='url('+this.img+')';
               fatheritems.children.style.backgroundImage='url('+this.img+')';
               fatheritems.children.style.backgroundImage='url('+this.img+')';
               fatheritems.children.style.backgroundImage='url('+this.img+')';
            }
            else {
               fatheritems.children.style.backgroundImage='url('+this.img+')';
               fatheritems.children.style.backgroundImage='url('+this.img+')';
               fatheritems.children.style.backgroundImage='url('+this.img+')';
               fatheritems.children.style.backgroundImage='url('+this.img+')';
            }

         }
         this.swieptime=setInterval(() => {
            this.id++;
            for(let i=0;i<fatheritems.length;i++)
            {
               if(i<5)
               {
                     fatheritems.style.transform='rotateX('+-90*this.id+'deg)'
               }
               else {
                     fatheritems.style.transform='rotateX('+90*this.id+'deg)'
               }
            }
         }, 8000);
   },
   swipebefore(){
         let fatheritems=document.getElementsByClassName('swipe_item_father');
         this.id--;
         for(let i=0;i<fatheritems.length;i++)
         {
            if(i<5)
            {
               fatheritems.style.transform='rotateX('+-90*this.id+'deg)'
            }
            else {
               fatheritems.style.transform='rotateX('+90*this.id+'deg)'
            }
         }
   },
   swipeafter(){
         let fatheritems=document.getElementsByClassName('swipe_item_father');
         this.id++;
         for(let i=0;i<fatheritems.length;i++)
         {
            if(i<5)
            {
               fatheritems.style.transform='rotateX('+-90*this.id+'deg)'
            }
            else {
               fatheritems.style.transform='rotateX('+90*this.id+'deg)'
            }
         }
   },
   timestart(){
         let fatheritems=document.getElementsByClassName('swipe_item_father');
         clearInterval(this.swieptime);
         this.swieptime=setInterval(() => {
            this.id++;
            for(let i=0;i<fatheritems.length;i++)
            {
               if(i<5)
               {
                     fatheritems.style.transform='rotateX('+-90*this.id+'deg)'
               }
               else {
                     fatheritems.style.transform='rotateX('+90*this.id+'deg)'
               }
            }
         }, 8000);
   },
   timeend(){
         clearInterval(this.swieptime);
   }
},
mounted(){
   this.swipechange();
},
beforeDestroy(){
   clearInterval(this.swieptime);
}
}
</script>

<style lang="scss" scoped>
$width:1000px;//轮播宽度
$height:480px;//轮播高度
$fwidth:200px;//轮播每个小块的宽度
$theight:240px; //轮播每个小块的高度
$top:-240px; //轮播第二行小块的top值
$fheight:120px; //轮播小块翻转的高度
$lefttwo:200px; //轮播第二列的left值
$leftthree:400px; //轮播第三列的left值
$leftfour:600px;//轮播第四列的left值
$leftfive:800px;//轮播第五列的left值
.bzgf {
   .bzgf_bg {
         position: fixed;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
   }
   .swipe {
         position: absolute;
         width: $width;
         height: $height;
         left: 140px;
         top: 100px;
         .swipe_item_father {
            position: absolute;
            width: $fwidth;
            height: $theight;
            transform-style: preserve-3d;
            transform: rotateX(0deg);
            .swipe_item_child {
               position: absolute;
               width: 100%;
               height: 100%;
               background-size: $width $height;
               background-repeat: no-repeat;
               overflow: hidden;
               &:nth-child(1) {
                     transform: rotateX(0deg) translateZ($fheight);
               }
               &:nth-child(2) {
                     transform: rotateX(-90deg) translateZ($fheight);
               }
               &:nth-child(3) {
                     transform: rotateX(-180deg) translateZ($fheight);
               }
               &:nth-child(4) {
                     transform: rotateX(-270deg) translateZ($fheight);
               }
            }
            &:nth-child(1) {
               left: 0px;
               top: 0;
               transition: all 1.6s 0s;
               .swipe_item_child {
                     background-position: 0px 0px;
               }
            }
            &:nth-child(2) {
               left: $lefttwo;
               top: 0;
               transition: all 1.6s .2s;
               .swipe_item_child {
                     background-position: -$lefttwo 0px;
               }
            }
            &:nth-child(3) {
               left: $leftthree;
               top: 0;
               transition: all 1.6s .4s;
               .swipe_item_child {
                     background-position: -$leftthree 0px;
               }
            }
            &:nth-child(4) {
               left: $leftfour;
               top: 0;
               transition: all 1.6s .6s;
               .swipe_item_child {
                     background-position: -$leftfour 0px;
               }
            }
            &:nth-child(5) {
               left: $leftfive;
               top: 0;
               transition: all 1.6s .8s;
               .swipe_item_child {
                     background-position: -$leftfive 0px;
               }
            }
            &:nth-child(6) {
               left: 0px;
               top: $theight;
               transition: all 1.6s .8s;
               .swipe_item_child {
                     background-position: 0px $top;
               }
            }
            &:nth-child(7) {
               left: $lefttwo;
               top: $theight;
               transition: all 1.6s .6s;
               .swipe_item_child {
                     background-position: -$lefttwo $top;
               }
            }
            &:nth-child(8) {
               left: $leftthree;
               top: $theight;
               transition: all 1.6s .4s;
               .swipe_item_child {
                     background-position: -$leftthree $top;
               }
            }
            &:nth-child(9) {
               left: $leftfour;
               top: $theight;
               transition: all 1.6s .2s;
               .swipe_item_child {
                     background-position: -$leftfour $top;
               }
            }
            &:nth-child(10) {
               left: $leftfive;
               top: $theight;
               transition: all 1.6s 0s;
               .swipe_item_child {
                     background-position: -$leftfive $top;
               }
            }
         }
         .left_btn {
            position: absolute;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 30px;
            transition: all .3s;
            transform: rotate(180deg);
            opacity: 0.5;
            cursor: pointer;
            &:hover {
               opacity: 1;
            }
         }
         .right_btn {
            position: absolute;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            top: 0;
            bottom: 0;
            margin: auto;
            right: 30px;
            transition: all .3s;
            opacity: 0.5;
            cursor: pointer;
            &:hover {
               opacity: 1;
            }
         }
   }
}
</style>

年少的梦想 发表于 2020-12-10 20:55:21

yuesezhenmei 发表于 2020-12-10 19:14
用定位更新left属性

你好, 想问一下, 我每次在写这些js特效的时候, 就无处下手, 应该怎么改变呢

yuesezhenmei 发表于 2020-12-11 13:09:34

多练，从最基础的开始，量变才能质变，多找优秀网站，我学前端3年，还感觉自己很多不会
有问题的话加我qq：1346502061
h5，c3，Scss,js,ts,Vue,webpack,Electron,nodejs,MongoDb,不会的可以问我

页: [1]

鱼C论坛's Archiver

JavaScript特效思路