gpt4 book ai didi

javascript - 点击链接,div滑出,链接div滑入,点击关闭重新加载第一个div

转载 作者:行者123 更新时间:2023-11-30 18:20:22 25 4
gpt4 key购买 nike

我希望我自己知道如何写这个。 http://www.cubancouncil.com/work/project/coppola-winery/

链接页面具有我想要使用的确切功能。我如何相信他们的剧本有效。单击一个图像,通过将其向右滑动来隐藏该图像的容器 div,然后从右向左加载/滑动位于固定位置的较大图像。

如果这里有人非常友好地用解决方案回答这个问题,您是否介意更进一步并评论您的部分代码,以便我可以将其链接到正确的 html?

我认为理解这个脚本会让我走上一条通往更高级的 Javascript 和 Jquery 的道路。谢谢。

最佳答案

编辑:我找到了一个更好的 example提供了一些代码。转到讨论如何向左滑动元素的部分。如果您有任何疑问,请告诉我们。

我还冒昧地为您提供了一个完整的工作示例(与文章中的示例完全相同),因此您可以在浏览器中运行它

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>

这篇文章解释了其中的大部分内容,但我将简要介绍一下。从本质上讲,我们正在做的是,无论你想滑动什么,我们都会改变左边的位置,这样它就会出来。最初,我将 CSS 设置为 -500px,因此它位于屏幕之外。然后 javascript 监听按钮单击并通过更改左侧位置来移动 div。 Jquery 的 animate()函数完成了大部分工作。

关于此的令人困惑的一点是三元运算符。您可以找到更多信息 here .本质上它只是检查 left 属性看它是否为 0。如果是,我们想将它移回外部到 -500px。如果左边不是 0px,我们知道它一定在屏幕之外,所以我们将它移回 0px。

如果您对其他任何事情感到困惑,请告诉我们。

关于javascript - 点击链接,div滑出,链接div滑入,点击关闭重新加载第一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12186469/

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