0

私はすべて適切に動作するこのコードセットを持っていますが、iframe を使用せずに css と Javascript を純粋に使用して同じ外観を実行するよりクリーンな方法があるかどうか疑問に思っています (ただし、少なくとも最新で必要な外観を得るためにこれをハッキングしました)。 chrome および ff リリース)。

基本的に、iframe は一連の画像を含む長いテーブル行であり、マウスオーバーで iframe をスクロールしてより多くの画像を表示するボタンがあります。ここにデモと以下の重要なコードスニペットがあります

html ページ:

 <html><body>
 <iframe id="recent" height="450px" width="100%" seamless; scrolling="no" src="http://ec2-23-22-226-163.compute-1.amazonaws.com/dframe.php">
 <p>Your browser does not support iframes.</p>
 </iframe>
 <input type='button' class='btn_slide' onmouseover='make_scroll()' />
 </body></html>

このCSSで（ボタン上）

input.btn_slide {
display: block;
position: absolute;
z-index: 15;
right: 0px;
top: 80px;
background-image: url(http://www.iconsdb.com/icons/preview/gray/arrow-33-xx$
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat;  /* make the background image appear only onc$
background-position: 0px 0px;  /* equivalent to 'top left' */
border: none;
height: 250px;           /* make this the size of your image */
width: 200px;
}

そして、このJavaScript：

 function scroll()
 {
    window.scrollBy(250,0); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('scroll()', 1000); // scrolls every 100 millis$
 }
 function make_scroll()
 {
    document.getElementById('recent').contentWindow.scroll();
 }

今、私の懸念は、ページにこれらのiframeを10個ほど配置することを計画していることです。これは、訪問した1つのページを提供することを意味します生産はまだ理想的ではありません) css と javascript だけを使用して iframe を使用せずに同じ外観を維持する方法があるかどうか疑問に思っていますか? はいまたはいいえ、またはどのようにそれを行うことができるかをいただければ幸いです。

4

1 に答える 1