gpt4 book ai didi

javascript - 让简单的 Javascript/jQuery 工作起来(Ariel Flesler 的 ScrollTo)

转载 作者:行者123 更新时间:2023-12-02 19:39:09 25 4
gpt4 key购买 nike

更新:杰出的先生。 tpaksu 解决了我的问题,你可以看到水平 ScrollTo 的作用 @ www.visioville.fi/en/

我花了很多时间摆弄 CSS,但我得出的结论是,这几乎是我唯一无法在没有 Javascript/jQuery 的情况下完成的事情。

我一直在尝试实现 Goro 的建议 jQuery.ScrollTo by Ariel Flesler ,但我似乎无法让它以任何方式工作。再加上我是一个 Javascript 新手,你就会明白我的意思了。我下载了最新的 jQuery 并将其命名为“jquery.js”

这是一些来源:

<head>
<script type='text/javascript' src='../js/jquery.scrollTo-1.4.2-min.js'></script>
<script type='text/javascript' src='../js/jquery.js'></script>
</head>
...
<div>
<p id="gallerytext">...</p>
<a title="$(div.smallpics).scrollTo( '0%', 800, {axis:'x'} );" id="previmg" href="#image1"></a>
<div id="smallwindow">
<div class="smallpics">
<ul>
<li><a href="#image1"><img alt="Jerseys" src="../images/peliasuja.jpg" /></a></li>
...
<li><a href="#image14"><img alt="Drawing" src="../images/kynailya.jpg" /></a></li>
</ul>
</div>
</div>
<a title="$(div.smallpics).scrollTo( '50%', 800, {axis:'x'} );" id="nextimg" href="#image8"></a>
</div>

然后是 CSS:

#smallwindow    { float:left; overflow/*-y*/: hidden; width:890px; } /* overflow-y whips out the vertical scrollbar */

div.smallpics { float:left; position:relative; width:1595px; }

#previmg, #nextimg { float: left; width: 17px; height: 54px; background: white; overflow: hidden; background: url("images/galleryarrows_17x54.jpg"); }
#previmg { background-position: left top; margin-right: 1px; left top; }
#nextimg { background-position: right top; position: absolute; float: right; left: 935px; margin-left: 1px; margin-right: 1px; }
#previmg:hover { background-position: left bottom; }
#nextimg:hover { background-position: right bottom; }

.smallpics ul { list-style: none; padding: 0; margin: 0; }

.smallpics li { float: left; text-align: center; margin-right: 1px; margin-bottom: 1px; white-space: nowrap; }

Goro 提到将 click() 事件绑定(bind)到我的箭头按钮,但我不知道应该输入什么“函数”或在哪里放置代码。我猜测在 .scrollTo 事件之前,假设甚至需要 click() 。

提前谢谢您!在编程和编码方面,你们绝对是最棒的。

最佳答案

首先,您需要在 jquery 脚本之后包含您的scrollto 脚本。

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.scrollTo-1.4.2-min.js"></script>

然后,你需要这样的东西:

$("#nextimg").on("click",function(){
$("#smallwindow").scrollTo( '50%', 800, {axis:'x'} );
});

点击事件中的函数应该改变。但是一旦你让它发挥作用,剩下的就很容易弄清楚了。

关于javascript - 让简单的 Javascript/jQuery 工作起来(Ariel Flesler 的 ScrollTo),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10635904/

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