Annuaire d'articles
écrit devant
En fait, l'effet de commutation d'empilement de cartes 3D est une sorte d'effet de carrousel que j'ai toujours aimé depuis que je suis entré dans la fosse frontale. Je l'ai également réglé auparavant, mais il y a toujours d'autres choses insignifiantes qui sont retardées. Je vais organisez-le pour vous jeudi sur la base de jquery Comment obtenir un effet de commutation de carte 3D. Cet article parle principalement du processus de mise en œuvre, en espérant vous inspirer.
Points de connaissance impliqués
Comment Jquery réalise la commutation de carrousel d'empilement de cartes, comment réaliser des graphiques 3D et un effet de carrousel d'empilement de cartes de texte, js réalise un effet de commutation d'empilement de cartes 3D, une démonstration de carrousel d'empilement de cartes 3D.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
obtenir un effet
Il s'agit principalement de vous donner un retour sur l'effet final de la mise en œuvre, et le lien de partage du package de code complet est joint à la fin de l'article.
1. Construire la page
1.1 Créer un nœud ul li
Tout d'abord, je crée un nœud. J'utilise la méthode de mise en page flottante, principalement en définissant le style et le html, et l'effet est le suivant :
1.2 Éléments riches
À partir de l'étape A, nous avons créé un conteneur, et l'étape suivante consiste à y mettre des éléments. La première chose à laquelle je pense est la partie titre, la partie image, les informations personnelles de base et la partie introduction.
Code HTML comme indiqué
<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>
Code CSS affiché
/*轮播*/
// 原创于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;
}
effet de réalisation de page
2. JS implémente la commutation de pile
Parce qu'il y a plusieurs patchs, si vous écrivez selon une personne normale, on estime qu'il s'agit d'un copier-coller, puis formez un état empilé, mais le blogueur n'est pas une personne normale, donc je veux simuler les données renvoyées par le arrière-plan (en utilisant de fausses données), puis utilisez la méthode de traversée Pour attribuer des valeurs pour obtenir l'effet d'empiler plusieurs cartes, le code d'implémentation est donc le suivant :
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
})
})
Il n'est pas difficile de trouver qu'il y a aussi une fonction hdpturn. Bien sûr, c'est emballé par moi-même. Je dois introduire hdpturn.js. Le code d'emballage spécifique est le suivant (le paquet de code complet est à la fin de l'article):
(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))
L'effet final est le suivant :
3. Partage de code source
3.1 Netdisk Baidu
Lien : https://pan.baidu.com/s/1coCkeOlHV3zxxU9vTGuwOw
Code d'extraction : hdd6
3.2 123 disque cloud
Lien : https://www.123pan.com/s/ZxkUVv-0xI4.html
Code d'extraction : hdd6
3.3 Message électronique
Laissez votre compte email dans la zone de commentaire, et le blogueur vous l'enverra dès qu'il le verra. Je vous souhaite une vie heureuse !
Résumer
Ce qui précède est ce dont je veux parler aujourd'hui. Cet article présente principalement les effets spéciaux de la commutation de carrousel d'empilement de cartes 3D basée sur jquery, le processus de réalisation de la commutation de carrousel, comment js réalise la commutation de carrousel de cartes superposées en 3D et la démonstration de la superposition 3D changement de carrousel de cartes. J'ai aussi hâte que tout le monde progresse ensemble, travaillons ensemble en 2023 ! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。