0

更新：優れた氏 tpaksuは私の問題を解決し、水平のScrollToの動作を見ることができます@ www.visioville.fi/en/

私はCSSをいじくり回していましたが、Javascript/jQueryなしではこれがほとんどできないという結論に達しました。

私はArielFleslerによって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（）イベントを矢印ボタンにバインドすることについて言及しましたが、どの「関数」を入力する必要があるのか​​、コードをどこに配置するのかわかりません。click（）が必要であると仮定して、.scrollToイベントの前で推測しています。

前もって感謝します！プログラミングとコーディングに関しては、皆さんは絶対に最高です。

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'} ); 
});

クリックイベント内の関数が変更されます。しかし、これを機能させると、残りの部分は簡単に理解できるようになります。

于 2012-05-17T12:44:15.333 に答える