0

ホームページのバナースクロール機能を作りたい。ここで使用するプログラミング言語がよくわかりません。http://www.squidfaceandthemeddler.com/のようなコードを作成したいと思います。ただし、ユーザーがテーブルをスクロールしている間、フッターを同じ位置に維持したいと思います。その結果を得ることが可能ですか？ユーザーがクリックできるように、簡単なテーブルと2つの画像を作成しました

これがテーブルの私のコードです：

<div id="banner" style="height:750px; width:600px; overflow:scroll;" > 
    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_1.php"><img src="banner1.png"/></a></td> 
    </tr> 
    </table> 

    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_2.php"><img src="banner2.png"/></a></td> 
    </tr> 
    </table> 

    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_3.php"><img src="banner3.png"/></a></td> 
    </tr> 
    </table> 
</div>

これは、スクロール用の上下ボタンです。

<table width="750px" height="30px"> 
<tr> 
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td> 
</tr> 
</table>
4

2 に答える 2

0

コンテンツを2つのdivタグ内に配置すると、CSSを使用して外側のdivをクリップし、CSSの「top」値をスクリプト化して内側のdivを「スクロール」できます。

<html><head><style>
#contents{ 
 position: relative; top: 0; left: 0; width: 100px; height: auto;}
 #scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
 }
</style>
<script>
var t = 0;

function up()
{
 t += 10;

 with(document.getElementById("contents"))
 {
   if (t > 0)
    t = 0;

 if(style)
    style.top = t + "px";
 else
  setAttribute("style", "top: " + t + "px");
}
}

function down()
{
 t -= 10;

with(document.getElementById("contents"))
{
  if(t < -clientHeight)
      t = -clientHeight;

  if(style)
       style.top = t + "px";
  else
       setAttribute("style", "top: " + t + "px");
  }
 }
</script></head>
   <body><table><tr><td><a href="javascript:void(0)" onclick="up()">up</a></td>
   <td rowspan="2"><div id="scrollable">
     <div id="contents">scrolling content scrolling content scrolling content
        scrolling content scrolling content scrolling content scrolling content
        scrolling content scrolling content scrolling content scrolling content
   </div></div> 
       </td></tr><tr><td>
     <a href="javascript:void(0)" onclick="down()">down</a></td></tr></table>
    </body></html>

この助けを借りてあなたのコードを編集してください

于 2012-06-12T10:20:58.370 に答える
0

jqueryのscrolltopをご覧ください：http：//api.jquery.com/scrollTop/。すでに行ったように、テーブルの幅を特定の高さに固定します。

$('#buttonUpID').click(function () {
    var currentScrollTop = $('body').scrollTop();
    $('body').scrollTop(currentScrollTop - 600);
});

$('#buttonDownID').click(function () {
    var currentScrollTop = $('body').scrollTop();
    $('body').scrollTop(currentScrollTop + 600);
});
于 2012-06-12T10:40:02.213 に答える