記事ディレクトリ
前に書いてある
実は、3D カードのスタック切り替えエフェクトは、私がフロントエンドピットに入ったときからずっと気に入っているカルーセルエフェクトの一種で、以前にも整理したことがありますが、他にも些細なことが常に遅れています。木曜日に jquery に基づいて 3D カード切り替え効果を実現する方法を整理します。この記事では、皆さんにインスピレーションを与えるために、主に実装プロセスについて説明します。
関係する知識ポイント
Jquery がカード スタッキング カルーセル スイッチングを実現する方法、3D グラフィックスとテキスト カード スタッキング カルーセル効果を実現する方法、JS が 3D カード スタッキング スイッチング効果を実現する方法、3D カード スタッキング カルーセル デモ。
版权声明：此文原创于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重畳デモを紹介します。カード カルーセル スイッチング. 私も皆さんが一緒に進歩できることを楽しみにしています、2023 年も一緒に頑張りましょう! ！！
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。