Javascript 如何在不使用插件的情况下实现2D可拖动导航效果?
我想创建一个类似于的可拖动导航滑块。 如何查看滑块:-Javascript 如何在不使用插件的情况下实现2D可拖动导航效果?,javascript,jquery,Javascript,Jquery,我想创建一个类似于的可拖动导航滑块。 如何查看滑块:- 去 点击“发送圣诞卡”按钮 单击任何图像打开弹出窗口,滑块位于弹出窗口内 目前,在我的实现中,每当我单击任何图像时,都会出现弹出窗口,但我的第一个图像位于顶部,因为最高的z-index。我真正想要的是,每当用户单击任何图像时,该特定图像应具有最高的z索引,其他图像将根据该特定图像的z索引遵循z索引,如示例网站()中所示 此外,我还坚持使用上一个按钮的概念:每当我单击上一个按钮时,它都会添加一个动画输出类,但设置zindex函数无法正常工
- 去
- 点击“发送圣诞卡”按钮
- 单击任何图像打开弹出窗口,滑块位于弹出窗口内
z-index
。我真正想要的是,每当用户单击任何图像时,该特定图像应具有最高的z索引,其他图像将根据该特定图像的z索引遵循z索引,如示例网站()中所示
此外,我还坚持使用上一个按钮的概念:每当我单击上一个按钮时,它都会添加一个动画输出类,但设置zindex函数无法正常工作。“下一步”按钮功能工作正常。特别感谢雷诺,我从他那里得到了下一个按钮功能的帮助
下面是一个工作示例
下面是我的代码
index.html文件
main.js文件
$(函数(){
var galleryWrapper=$('.gallery wrapper');
galleryWrapper.each(函数(){
变量$this=$(this),
galleryPopup=$this.find('.galleryPopup'),
prevBtn=$this.find('.prev btn'),
nextBtn=$this.find('.next btn'),
posts=$this.find('.post'),
电流=0
//-----单击任何项目链接打开弹出窗口
// --------------------------------------------
$this.find('.item link')。on('click',函数(事件){
event.preventDefault();
galleryPopup.fadeIn();
$('body,html').css('overflow','hidden');
});
//-----单击关闭链接关闭弹出窗口
// --------------------------------------------
$this.find('.close link')。on('click',函数(事件){
event.preventDefault();
galleryPopup.fadeOut();
$('body,html').css('overflow','initial');
})
//-----弹出滑块脚本
// --------------------------------------------
函数setZIndex(){
for(设i=0;i
您可以使用一些CSS创建3D过渡。然后,您需要做的就是设置正确的z索引和计时,以创建外观更好的动画
这只是一个小概念,但它告诉你如何实现这个效果
const btn=document.querySelector(“按钮”);
const posts=document.queryselectoral(“.post”);
设电流=0;
常量setZIndex=()=>{
for(设i=0;i{
const post=posts[当前];
post.classList.add(“动画”);
设置超时(()=>{
post.classList.remove(“动画”);
setZIndex();
}, 500);
当前=(当前+1)%posts.length;
});
setZIndex()代码>
.collection{
位置:固定;
最高:25%;
左:0;
右:0;
保证金:0自动;
宽度:75%;
透视图:1500px;
}
.邮政{
位置:绝对位置;
左:0;
排名:0;
宽度:100px;
高度:200px;
背景:橙色;
显示器:flex;
对齐项目:居中;
证明内容:中心;
字号:4rem;
变换样式:保留-3d;
变换:变换0.25s三次贝塞尔(0.57,0.09,0.105,1.005);
}
.制作动画{
转换:translate3d(300px,-25px,500px);
}
1.
2.
3.
4.
5.
下一步
Hi Mukul,您尝试了什么来重现外观和感觉(您应该发布代码)?你有没有从网站上下载CSS和JavaScript?你真的需要提出一个符合网站要求的问题。谢谢雷诺的帮助,但我仍然坚持上一个按钮的逻辑。它正在添加animate类,但没有使用前面的功能添加zIndex。
<div class="gallery-wrapper">
<div class="gallery-row">
<div class="item">
<a href="#" class="item-link">
<img src="https://images.unsplash.com/photo-1602642753381-030eacbf4a58?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<img src="https://images.unsplash.com/photo-1602609741544-de5fc39b88ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<img src="https://images.unsplash.com/photo-1602608646744-6a03235141c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<img src="https://images.unsplash.com/photo-1602607878796-baf56d8dfc8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2200&q=80" />
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<img src="https://images.unsplash.com/photo-1602653077972-0a5a38f9a466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2458&q=80" />
</a>
</div>
</div>
<!-- Gallery Popup -->
<div class="gallery-popup">
<a href="javascript:void(0)" class="close-link">x</a>
<div class="collection">
<div class="post">
<img src="https://images.unsplash.com/photo-1602642753381-030eacbf4a58?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
</div>
<div class="post">
<img src="https://images.unsplash.com/photo-1602609741544-de5fc39b88ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
</div>
<div class="post">
<img src="https://images.unsplash.com/photo-1602608646744-6a03235141c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80" />
</div>
<div class="post">
<img src="https://images.unsplash.com/photo-1602607878796-baf56d8dfc8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2200&q=80" />
</div>
<div class="post">
<img src="https://images.unsplash.com/photo-1602653077972-0a5a38f9a466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2458&q=80" />
</div>
</div>
<div class="button-holder">
<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>
</div>
</div>
<!-- End of Gallery Popup -->
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden !important;
}
.gallery-popup {
display: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
.collection {
max-width: 300px;
margin: 0 auto;
perspective: 1500px;
position: absolute;
left: 50%;
top: 120px;
transform: translateX(-50%);
width: 100%;
}
.post {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
background: orangered;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
transform-style: preserve-3d;
transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}
.post img {
width: 100%;
height: 100%;
object-fit: cover;
}
.animate {
transform: translate3d(350px, 25px, -400px);
}
.animate-out {
transform: translate3d(350px, 15px, -100px);
}
.button-holder {
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
}
.button-holder button {
margin: 5px;
width: 70px;
height: 30px;
border-radius: 0;
border: none;
background: orangered;
color: #fff;
}
.close-link {
color: #fff;
position: absolute;
right: 15px;
top: 15px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 34px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-family: 'Arial';
background: orangered;
}
.gallery-row {
display: flex;
flex-wrap: wrap;
padding: 15px;
margin-left: -10px;
margin-right: -10px;
}
.gallery-row .item {
padding: 10px;
flex: 0 0 25%;
max-width: 25%;
}
.gallery-row .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
$(function() {
var galleryWrapper = $('.gallery-wrapper');
galleryWrapper.each(function() {
var $this = $(this),
galleryPopup = $this.find('.gallery-popup'),
prevBtn = $this.find('.prev-btn'),
nextBtn = $this.find('.next-btn'),
posts = $this.find('.post'),
current = 0
// -------- Opening popup by clicking on any item-link
// --------------------------------------------
$this.find('.item-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeIn();
$('body, html').css('overflow', 'hidden');
});
// -------- Closing popup by clicking on close-link
// --------------------------------------------
$this.find('.close-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeOut();
$('body, html').css('overflow', 'initial');
})
// -------- Popup slider script
// --------------------------------------------
function setZIndex() {
for (let i = 0; i < posts.length; i++) {
const post = posts[i];
const {
zIndex
} = post.style;
post.style.zIndex = zIndex ? (Number(zIndex) + 1) % posts.length : posts.length - i - 1;
}
}
nextBtn.on('click', function() {
const post = posts[current];
post.classList.add('animate');
setTimeout(function() {
post.classList.remove('animate');
setZIndex();
}, 300);
current = (current + 1) % posts.length;
});
prevBtn.on('click', function() {
const post = posts[current];
post.classList.add('animate-out');
setTimeout(function() {
post.classList.remove('animate-out');
setZIndex();
}, 300);
current = (current - 1) % posts.length;
});
setZIndex();
});
});