更新:我正在研究一些看起来像这样的 jquery:
$(document).ready(function(){
$('li img').hover(
var src = $(this).attr('src')
function(){
$('#big').html('<img src=' + src + '/>');
},
function(){
$('#big').html("");
}
);
});
那没有用......但这确实:
$(document).ready(function(){
$('#li img').hover(
function(){
$('#big').html('<img src=' + $(this).attr("src") + '/>');
},
function(){
$('#big').html("");
}
);
});
但是 src 变量的使用是不对的。我也试图把它变成一个数组或哈希来迭代。最终,大框将遍历缩略图,如果用户将鼠标悬停在列表元素上,它将停止迭代并显示悬停的列表项的大版本。首先需要让这部分工作!
谢谢!
我有一个包含缩略图的列表。当您浏览缩略图时,我希望另一个 div 显示全屏图像。我对最干净的方法感到有些不知所措。我会最后发布我丑陋的解决方案,但首先我想展示我想去的方向。
html:
<ul>
<li><%= image_tag('rails.png') %>Some text</li>
<li><%= image_tag('rails.png') %>Some text</li>
<li><%= image_tag('rails.png') %>Some text</li>
</ul>
<div id='big'></div>
所以首先;缩略图和文本会改变。我正在尝试使用以下形式的 jquery:
$('li').hover(function(){
$('#big').append("<img src="'+ this.img.src + '" />");
});
this.img.src 是我失败的地方。
在我看来,工作解决方案非常难看,它使用的 html 如下:
<ul>
<li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li>
<li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li>
<li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li>
</ul>
<div id='big'></div>
jquery 喜欢:
$("#big").append("<p id='preview'><img src='"+ this img.src +"' alt='Image preview' />"+ c +"</p>");
我没有发布足够的工作解决方案来工作;足以让任何人明白这一点。
那么如何清理这些垃圾呢?我想使用第一个没有链接标签的 html(我觉得没有必要)。我什至正在寻找使用 ruby 遍历图像目录来生成列表。
感谢您提供的任何方向。