3
原来我在调用scrollto时出现了太多的撇号。工作代码如下:
$('.miniImage').click(function() {
var $th = $(this);
var id = $th.attr('id');
$.scrollTo("#" + id + "Image", 1000, {offset: {top:96, left:-636} });
});
感谢您的帮助!
我正在制作一个艺术家的组合网站,希望以横向风格显示作品(因此下面的代码中的表格)。这个想法是显示每个图像(ol #thumbnails)和右侧图像的缩略图。
我想使用scrollTo插件来允许用户点击任何图像并让它滚动到视图中。我正在寻找一些帮助,为此创建正确的jQuery。
本质上,我可以使它工作,如果我硬编码jQuery中的每个链接,但这是不太理想的CMS CMS网站whicg将不断更新。
任何人都可以帮助一些代码,将适用于每个缩略图链接?
我有以下代码:
<div id="content">
<ol id="thumbnails">
<li class="mini"><a class="miniImage" id="horseOne"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseTwo"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseThree"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseFour"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseFive"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseSix"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseSeven"><img src="media/images/mini.jpg" alt="" /></a></li>
<li class="mini"><a class="miniImage" id="horseEight"><img src="media/images/mini.jpg" alt="" /></a></li>
</ol>
<div id="contentRight">
<table id="work">
<tr>
<td id="horseOneImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseTwoImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseThreeImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseFourImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseFiveImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseSixImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseSevenImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseEightImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
</tr>
</table>
</div>
</div>
我现在的jQuery是:
$('.miniImage').click(function() {
var $th = $(this);
var id = $th.attr('id');
$.scrollTo('"#" + id + "Image"', 1000, {offset: {top:96, left:-636} });
});
我尝试使用。每()函数拉动的ID作为变量来应用scrollTo,但不能得到任何工作。
任何帮助将不胜感激!
这将是有益的,如果你能后你有什么在你的js至今。 – HurnsMobile 2010-07-13 15:57:13
好点!编辑! – DanC 2010-07-13 16:01:06
这可能会起作用,但它仍然有点草率,因为您在同一页面上多次绑定点击处理程序。阅读我的回答,并阅读事件代表团,以获得更清洁/更快的解决方案。 – HurnsMobile 2010-07-13 17:15:06