gpt4 book ai didi

javascript - 在 Jquery 的圆宽度中将这三个框旋转或动画化一个位置的最佳方法是什么?

转载 作者:行者123 更新时间:2023-11-28 00:47:26 24 4
gpt4 key购买 nike

在这里查看我的代码 https://jsfiddle.net/js2x07m3/26/

我想通过点击一侧来旋转这三个框。如果我单击该区域的右侧,则右侧框应旋转到中间框的位置,中间框应旋转到左侧框的位置。所以这三个盒子应该以圆形模式移动。当我点击左边时,左边的盒子应该移动到中间等等。我的目标是图片库。

我的第一个想法是这样的。代码应该在左侧或右侧找到框,然后为它们设置动画。但问题之一是 $( "div[left='10%']") 不起作用,我不知道其他一些机会:/

function clickLeft(){
$( "div[left='10%']").animate();
$( "div[left='40%']").animate();
$( "div[left='80%']").animate();
};

function clickRight(){

$( "div[left='10%']").animate();
$( "div[left='40%']").animate();
$( "div[left='80%']").animate();

};

移动箱子的最佳方法是什么?我该怎么做?我应该使用 Jquery 还是其他工具?或者你知道类似的例子吗?我不知道正确的编码方式。

最佳答案

为此,您可以使用OWL Carousel 插件,这就足够了。这是必要的组件。

Head,包括必要的样式表和 java 脚本。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/owl.carousel.min.js"></script>

自定义 CSS,增强外观(可选),您可以根据您的想象力/设计要求做更多事情。

.owl-item>div {
cursor: pointer;
margin: 6% 8%;
transition: margin 0.4s ease;
}

.owl-item.center>div {
cursor: auto;
margin: 0;
}

.owl-item:not(.center)>div:hover {
opacity: .75;
}

DOM Events,借助javascript,您可以初始化和自定义基于事件的行为。

$(document).ready(function() {
var $owl = $('.owl-carousel');

$owl.children().each(function(index) {
$(this).attr('data-position', index); // NB: .attr() instead of .data()
});

$owl.owlCarousel({
center: true,
loop: true,
items: 5, // Number of columns to show
margin:20
});

$(document).on('click', '.owl-item>div', function() {
$owl.trigger('to.owl.carousel', $(this).data('position'));
});
});

最后,为方便起见,这里是完整的 HTML 文件

    <!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/owl.carousel.min.js"></script>
</head>

<style>
.owl-item>div {
cursor: pointer;
margin: 6% 8%;
transition: margin 0.4s ease;
}

.owl-item.center>div {
cursor: auto;
margin: 0;
}

.owl-item:not(.center)>div:hover {
opacity: .75;
}

</style>

<body>

<div class="container">
<div class="owl-carousel ">
<div style="width: 50px;height:50px;background:#000;color:#fff;font-size: 15px; ">1</div>
<div style="width: 50px;height:50px;background:blue;color:#fff;font-size: 15px; ">2</div>
<div style="width: 50px;height:50px;background:red;color:#fff;font-size: 15px; ">3</div>
<div style="width: 50px;height:50px;background:orange;color:#fff;font-size: 15px; ">4</div>
<div style="width: 50px;height:50px;background:pink;color:#fff;font-size: 15px; ">5</div>
<div style="width: 50px;height:50px;background:red;color:#fff;font-size: 15px; ">6</div>
<div style="width: 50px;height:50px;background:green;color:#fff;font-size: 15px; ">7</div>
</div>
</body>

<script type="text/javascript">
$(document).ready(function() {
var $owl = $('.owl-carousel');

$owl.children().each(function(index) {
$(this).attr('data-position', index); // NB: .attr() instead of .data()
});

$owl.owlCarousel({
center: true,
loop: true,
items: 5,
});

$(document).on('click', '.owl-item>div', function() {
$owl.trigger('to.owl.carousel', $(this).data('position'));
});
});

</script>

</html>

Here是工作演示

关于javascript - 在 Jquery 的圆宽度中将这三个框旋转或动画化一个位置的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49609753/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com