0

更新：杰出的先生。tpaksu 解决了我的问题，您可以看到水平 ScrollTo 正在运行@ www.visioville.fi /en/

我有时间摆弄 CSS，但我得出的结论是，如果没有 Javascript / jQuery，这几乎是我唯一无法完成的事情。

我一直在尝试实现Ariel Flesler 建议的 Goro 的 jQuery.ScrollTo，但我似乎无法让它以任何方式工作。再加上我是 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() 事件绑定到我的箭头按钮，但我不知道我应该输入什么“功能”或将代码放在哪里。我猜在 .scrollTo 事件之前，假设甚至需要 click() 。

先感谢您！在编程和编码方面，你们绝对是最好的。

4

1 回答 1

2

首先，您需要在 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'} ); 
});

click 事件中的函数应该改变。但是一旦你得到这个工作，其余的将很容易弄清楚。

于 2012-05-17T12:44:15.333 回答