菜单 搜索
首页 前端知识 【3D卡片切换】基于jquery实现3D堆叠卡片切换效果（附完整源码）

【3D卡片切换】基于jquery实现3D堆叠卡片切换效果（附完整源码）

2024-06-03 12:06:06 前端知识 前端哥 433 445 我要收藏

文章目录

  • 写在前面
  • 涉及知识点
  • 实现效果
  • 1、搭建页面
    • 1.1 创建ul li节点
    • 1.2 丰富元素
      • Html代码所示
      • CSS代码所示
  • 2、JS实现堆叠切换
  • 3、源码分享
    • 3.1 百度网盘
    • 3.2 123云盘
    • 3.3 邮箱留言
  • 总结

写在前面

其实3D卡片堆叠切换效果，从我入前端坑以来就一直喜欢的一种轮播效果，以前也有相关整理的，总是有其他琐事给耽搁了，这不趁着周四给大家整理一下基于jquery如何实现3D卡片切换效果的。这篇文章主要讲的是实现的过程，希望能够给你们带来启发。

涉及知识点

Jquery如何实现卡片堆叠轮播切换，如何实现3D图文卡片堆叠轮播效果，js实现3D卡片堆叠切换效果，3D卡片堆叠轮播demo。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

实现效果

这个主要为了给大家一个最终实现效果的反馈，文尾附完整代码包的分享链接。
在这里插入图片描述

1、搭建页面

1.1 创建ul li节点

首先我先创建一个节点，我采用的是浮动布局的方式，主要通过设置样式和html，其中效果如下所示：
在这里插入图片描述

1.2 丰富元素

从A步骤我们就已经创建好了一个容器，接下来就是在里面放东西，首先我想到的是标题部分、图片部分、个人基本信息及简介部分。

Html代码所示

<div class="lb_gl">
        <div class="container">
            <h1 class="turn_3d">原创于CSDN博主-《拄杖盲学轻声码》</h1>
            <div class="pictureSlider poster-main">
                <!-- <div class="poster-btn poster-prev-btn"></div> -->
                <ul id="hdpturn" class="poster-list">
                    <li class="poster-item hdpturn-item">
                        <p class="xxgy">黄大大</p>
                        <p class="say">拄杖盲学轻声码</p>
                        <div class="for_btn">
                            <img src="img/a0.png" width="100%">
                            <a href="#" class="in_page"><img src="images/iconin.png"></a>
                        </div>
                        <div class="students_star">
                            <p class="cell_list"><span class="lf">姓名：<span class="darks">黄大大</span></span> <span
                                    class="rt">薪资 ：<span class="darks">21k</span></span>
                            </p>
                            <p class="cell_list"><span>入职：<span class="darks">向前看，向钱看</span></span>
                            </p>
                            <div class="zwjs">
                                自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
 
    </div>
复制

CSS代码所示

/*轮播*/
// 原创于CSDN博主-《拄杖盲学轻声码》
.lb_gl {
    margin-bottom: 30px;
    background: url(../images/bg_3d.png);
    background-size: 100% 100%;
    height: 725px;
}
 
.container {
    width: 1024px;
    margin: 0 auto;
    position: relative;
}
 
.pictureSlider {
    height: 518px;
    margin-bottom: 24px;
}
 
.poster-item {
    background: #fefefe;
    height: 453px;
    width: 336px;
    border-radius: 10px;
    border: 1px solid #666;
    padding: 45px 23px 20px 23px;
    transition: all 0.5s;
    cursor: default;
    -moz-transition: all 0.5s;
    cursor: default;
    -webkit-transition: all 0.5s;
    cursor: default;
    -o-transition: all 0.5s;
    cursor: default;
}
 
.turn_3d {
    text-align: center;
    color: #999;
    font-weight: 400;
    font-size: 36px;
    padding: 28px 0;
}
 
.xxgy {
    font-size: 30px;
    font-weight: 900;
    padding-left: 10px;
}
 
.poster-item .say {
    font-size: 18px;
    margin-bottom: 5px;
    padding-left: 10px;
}
 
.students_star {
    padding: 10px 10px 0 10px;
}
 
.cell_list {
    margin-bottom: 20px;
    color: #999;
    font-size: 18px;
    overflow: hidden;
}
 
.darks {
    color: #000;
    padding-left: 10px;
}
 
.zwjs {
    border-top: 1px solid #d0cddb;
    line-height: 26px;
    padding-top: 5px;
    color: #999;
    font-size: 12px;
    max-height: 84px;
    overflow: hidden;
}
 
.for_btn {
    position: relative;
    height: 214px;
    overflow: hidden
}
 
.in_page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
}
 
.in_page>img {
    width: 40px;
    height: 40px;
}
 
.check_more {
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #bc241d;
    margin: 0 auto;
    display: block;
}
复制

页面实现效果
在这里插入图片描述

2、JS实现堆叠切换

因为是多个贴片，如果按照正常人去写的话估计就是复制粘贴，然后形成堆叠状态，但是博主不是正常人，所以我想着模拟后台返回数据（用假数据），然后采用遍历的方式去赋值实现多个卡片堆叠的效果，于是乎实现代码如下：

var aa;
        $(function () {
            //动态加载元素
            var _keyData = [{
                name: "黄大大",
                money: "21k",
                tiptxt: "拄杖盲学轻声码",
                ming: "向前看，向钱看",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }, {
                name: "黄小小",
                money: "22k",
                tiptxt: "何惧风飞沙",
                ming: "向前看，向钱看",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }, {
                name: "黄大中",
                money: "23k",
                tiptxt: "天地无涯",
                ming: "向前看，向钱看",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }, {
                name: "黄大小",
                money: "21.5k",
                tiptxt: "谁怕，一蓑烟雨任平生",
                ming: "向前看，向钱看",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }, {
                name: "黄小小",
                money: "21.5k",
                tiptxt: "拄杖盲学轻声码",
                ming: "向前看，向钱看",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }, {
                name: "黄中小",
                money: "21.5k",
                tiptxt: "一生有爱",
                ming: "向前看，向钱看",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }, {
                name: "黄中中",
                money: "21.5k",
                ming: "向前看，向钱看",
                tiptxt: "拄杖盲学轻声码",
                textar: "自我介绍：90后的阳光开朗大男孩，喜欢在CSDN（拄杖盲学轻声码）上写写文章，爱舞蹈，喜编程，好诗赋，奔名企，求发展"
            }];
            var kstr = "";
            for (var k = 0; k < _keyData.length; k++) {
                kstr += `<li class="poster-item hdpturn-item">
                        <p class="xxgy">`+ _keyData[k].name + `</p>
                        <p class="say">`+ _keyData[k].tiptxt + `</p>
                        <div class="for_btn">
                            <img src="img/a`+ k + `.png" width="100%">
                            <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                        </div>
                        <div class="students_star">
                            <p class="cell_list"><span class="lf">姓名：<span class="darks">`+ _keyData[k].name + `</span></span> <span
                                    class="rt">薪资 ：<span class="darks">`+ _keyData[k].money + `</span></span>
                            </p>
                            <p class="cell_list"><span>入职：<span class="darks">`+ _keyData[k].ming + `</span></span>
                            </p>
                            <div class="zwjs">
                                `+ _keyData[k].textar + `
                            </div>
                        </div>
                    </li>`;
            }
            $("#hdpturn").html("").html(kstr);
            aa = new hdpturn({
                id: "hdpturn",
                opacity: 0.9,
                width: 382,
                Awidth: 1024,
                scale: 0.9
            })
        })
复制

其中不难发现里面还有一个hdpturn函数，这个当然是我自己去封装的，需要引入hdpturn.js具体封装代码如下(文尾有完整代码包)：

(function (win, doc, undefined) {
    var hdpturn = function (turn) {
        this.turn = turn
        this.hdpturn = $("#" + turn.id)
        this.X = 0
        this.hdpturnitem = this.hdpturn.children(".hdpturn-item")
        this.num_li = this.hdpturnitem.length//轮播元素个数 hdpturnPy为每个的偏移量
        this.hdpturnPy = turn.Awidth / (this.num_li - 1)
        this.init()
        this.turn_()
        return this
    }
    hdpturn.prototype = {
        constructor: hdpturn,
        init: function () {
            var _self = this;
            this.hdpturn.children(".hdpturn-item").each(function (index, element) {
                //index是第几个元素 X是选取的中间数 num_li是总数
                var rt = 1//1:右侧：-1：左侧
                if ((index - _self.X) > _self.num_li / 2 || (index - _self.X) < 0 && (index - _self.X) > (-_self.num_li / 2)) { rt = -1 }//判断元素左侧还是右侧
                var i = Math.abs(index - _self.X);//取绝对值
                if (i > _self.num_li / 2) { i = parseInt(_self.X) + parseInt(_self.num_li) - index; }//i:是左或者右的第几个
                if ((index - _self.X) < (-_self.num_li / 2)) { i = _self.num_li + index - _self.X }
                $(this).css({
                    'position': 'absolute',
                    'left': '50%',
                    'margin-left': -_self.turn.width / 2 + _self.hdpturnPy * rt * i + "px",
                    'z-index': _self.num_li - i,
                    'opacity': Math.pow(_self.turn.opacity, i),
                    'transform': 'scale(' + Math.pow(_self.turn.scale, i) + ')',
                    '-webkit-transform': 'scale(' + Math.pow(_self.turn.scale, i) + ')',
                    '-webkit-transform': 'scale(' + Math.pow(_self.turn.scale, i) + ')',
                    '-moz-transform': 'scale(' + Math.pow(_self.turn.scale, i) + ')',
                    '-ms-transform': 'scale(' + Math.pow(_self.turn.scale, i) + ')',
                    '-o-transform': 'scale(' + Math.pow(_self.turn.scale, i) + ')'
                })
                $(this).attr("data_n", index)
            })
        },
        turn_: function () {
            var _self = this
            this.hdpturnitem.click(function () {
                _self.X = $(this).attr("data_n")
                _self.init()
            })
        },
        prev_: function () {
            var _self = this
            this.X--
            if (this.X < 0) { this.X = this.num_li - 1 }
            this.init()
        },
        next_: function () {
            var _self = this
            this.X++
            if (this.X >= this.num_li) { this.X = 0 }
            this.init()
        }
    }
    win.hdpturn = hdpturn;
}(window, document))
复制

最终实现效果如下：
在这里插入图片描述

3、源码分享

3.1 百度网盘

链接：https://pan.baidu.com/s/1coCkeOlHV3zxxU9vTGuwOw
提取码：hdd6

3.2 123云盘

链接：https://www.123pan.com/s/ZxkUVv-0xI4.html
提取码：hdd6

3.3 邮箱留言

评论区留下您的邮箱账号，博主看到第一时间发给您，祝您生活愉快！

总结

以上就是今天要讲的内容，本文主要介绍了基于jquery实现3D卡片堆叠轮播切换的特效，实现轮播切换的过程，js如何实现3D叠加卡片轮播切换，3D叠加卡片轮播切换的demo，也期待大家一起进步哈，2023年一起加油！！！

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10641.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！