我有一个页面将显示我们在几个主题上的专业知识。 每个主题都包含标题、图像和简短列表。 在页面内部，用户将看到所有主题的主题缩略图和标题， 他们还将完整地看到 1 个突出显示的主题(标题、完整图像和列表)。突出显示的主题被迭代，用户可以在主题标题上移动以更改突出显示的主题。 每个主题的 html 是在 Rails 中使用部分生成的，因此每个主题都作为单独的文件进行管理。
我有一个可行的解决方案，但它存在一些问题，我希望得到一些指导。 fiddle here
感谢抽空!
- CSS 和 HTML 问题...我的 6 个主题应该像现在一样放在一个列表中还是作为 6 个 div？我的右栏和左栏的响应不一样:更改顶层 div 宽度(.showScene 在 680 到 1000 像素之间)，您会看到右栏文本居中，而不是与右图像对齐。 CSS 应该如何呈现？
在这种情况下，我对列表的一般策略是使用 :nth-child sectors 来创建和控制带有左右浮动的列。 - 我的“缩略图”是使用 css 调整大小的大图像，这样可以吗？还是我真的需要创建缩略图大小的图像？每个大图像都会出现在页面上，那么为什么要加载更多缩略图呢？如果我确实使用了缩略图，那么我必须将它与大图像一起添加到我的主题中吗？
- 我使用 jQuery .clone() 将内容复制到我突出显示的 Pane 中，这是最好的方法吗？我讨厌复制但没有克隆标题和缩略图被“移出”
CSS:
.showScene{width: 1000px; border: 2px solid black; height: 400px; position: absolute;}
#exp {
position: relative;
min-width: 700px;
height: 400px;
margin: 0px auto;
}
#exp > h1{
text-align: center;
font-weight: bold;
margin-top: 2px;
color: #669900;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #669900;
}
#exp > ul {
list-style-type: none;
padding:0px;
overflow: hidden;
/*width: 700px;*/
margin-top: -20px;
}
#exp > ul > li {
float:left;
width:30%;
height: 120px;
padding-top: 6px;
padding-bottom: 6px;
font-weight: bold;
font-size: .8em;
}
#exp > ul > li img{
width:30%;
vertical-align: middle;
}
#exp > ul > li:nth-child(odd){
margin-left: 3%;
}
#exp > ul > li:nth-child(odd) img{
padding-right:10px;
}
#exp > ul > li:nth-child(even){
float: right;
margin-right: 10%;
}
#exp > ul > li:nth-child(even) h1{
text-align: right;
}
#exp > ul > li:nth-child(even) img{
position: relative;
left: 95%;
}
.expSelected h1{
color: #669900;
}
#expPane .expSelected h1 {
color: black;
}
.expList ul li {
display:none;
}
.expList h1{
font-size: 1.25em;
display: inline;
line-height: 80px;
}
.expList img {
float: left;
vertical-align: top;
}
#expPane{
position: absolute;
top: 10%;
left:30%;
right: 30%;
height: 250px;
}
#expPane img{
height: 100px;
}
#expPane .expList{
width: 272px;
margin: auto;
}
#expPane .expList ul li{
display: list-item;
}
#expPane h1 {
display: block;
text-align: center;
}
#expPane img {
float:none;
text-align: center;
width: 100%;
height: 225px;
}
#expPane ul {
margin-left: 20px;
}
html:
<div class='sliderContent'>
<ul>
<li><div class='showScene'>
<div id='exp'>
<h1>Our Expertise</h1>
<ul>
<li><div class='expList topic1'>
<h1>Topic1 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic2'>
<h1>Topic2 Header</h1>
<img src='http://2.bp.blogspot.com/-y_A2TCaEnZU/TxzbuvYiNhI/AAAAAAAAAZ4/fuMGkV3FEak/s1600/Cool.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic3'>
<h1>Topic3 Header</h1>
<img src='http://www.remodelpros.com/spaw/uploads/images/mr-roof-smiling.png'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic4'>
<h1>Topic4 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic5'>
<h1>Topic5 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic6'>
<h1>Topic6 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
</ul>
<div id='expPane'></div>
</div>
</div>
</li>
</ul>
</div>
JS:
var actual = 1;
$(document).ready(function() {
/* get all 'src' */
links = $('#exp > ul > li > div');
/* set first image */
imgFirst(links);
/* iterate images */
startExp();
/* hover images */
imgHov();
});
/* set first image */
function imgFirst(links) {
$('#expPane').html($(links[0]).clone());
};
//set interval
function startExp(){
i = 0;
startExpVar = setInterval(function() {
imgIterate(links);
}, 3000);
}
//stop interval
function stopExp(){
clearInterval(startExpVar);
}
/* iterate images */
function imgIterate(links) {
$('#expPane').fadeOut('slow', function(){
++i;
if (i >= links.length){i = 0}
$('#expPane').html($(links[i]).clone()).fadeIn('slow');
});
};
/* hover images */
function imgHov() {
links.hover(function() {
var activeOne = $(this);
activeOne.addClass('expSelected');
stopExp();
$('#expPane').fadeOut('fast', function(){
$('#expPane').html(activeOne.clone()).fadeIn('fast');
});
}, function() {
imgIterate(links);
startExp();
$(this).removeClass('expSelected');
});
}
最佳答案
- 我认为您当前的设置似乎工作正常，非常容易确定列表的一部分和不列表的一部分(只在 UL 中查找比查找包含在 wrapperX 或给定类中的 div 更容易) .
- 您不必创建缩略图，但我认为这通常是个好主意。有时，通过 CSS 执行此操作可能会出现一些失真或颗粒感。
- 克隆似乎合法
关于jquery - 带或不带缩略图的 css 和 html 列表或 div 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13431939/