Question

我有这个代码集都可以正常工作，但是我想知道是否有一种更简洁的方式来执行相同的外观纯粹使用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，这意味着要为一个访问过的页面提供服务我正在查询数据库表并生成11个单独的html页面，这看起来效率非常低（即使大多数都可以在生产中缓存仍然不理想）所以我想知道是否有一种方法来保持相同的外观而不使用iframe只使用css和javascript？是的或者是的，或者我如何能够做到这一点将不胜感激！

Answer 1

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

请为所有圣洁的爱，不要使用iframe，你可以使用divs，左边的浮动和边缘来轻松做到这一点。

我推荐这个滑块插件

http://caroufredsel.dev7studios.com/

它基本上为你做了一切。

请验证您的代码。

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

此外，只有当您拥有实际的表格或简报时才会使用表格。

在不使用iframe的情况下保持相同的外观

1 个答案: