0

我有这个代码集，它都可以正常工作，但是我想知道是否有一种更简洁的方法来执行相同的外观，纯粹使用 css 和 Javascript 而不使用 iframe（但我破解了这个以获得我想要的外观，至少在最新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();
 }

现在我担心的是我计划在一个页面上拥有 10 个左右的 iframe，这意味着为一个访问过的页面提供服务生产仍然不理想）所以我想知道是否有一种方法可以在不使用仅使用 css 和 javascript 的 iframe 的情况下保持相同的外观？是或否或我该如何去做将不胜感激！

4

1 回答 1

3

http://codepen.io/anon/pen/qywuz

请为所有神圣的爱，不要为此使用 iframe，您可以使用 div、a float left 和 margin 轻松做到这一点。

我推荐这个插件用于滑块

http://caroufredsel.dev7studios.com/

它基本上为你做了一切。

请验证您的代码。

iframe 用于非常具体的任务，这不是其中之一。

此外，仅当您有实际表格或时事通讯时才使用表格。

于 2013-04-13T02:26:29.390 回答