您的位置：首页 > 其它

一个简单的gallery效果

2009-04-07 21:14 316 查看

最近比较空闲，想到以前做的项目里面用了jQuery的一个gallery插件，当时还用得不怎么样。现在就做了个简单的gallery效果。

CSS部分：

<body>
<div id="photoLst">
<div id="prevone" class="switchBtn">
Prev</div>
<div id="thumbLst">
<ul>
</ul>
</div>
<div id="nextone" class="switchBtn">
Next</div>
</div>
<div id="showingPhoto">
<img alt="" src="images/loading.gif" />
<div style="clear: both;">
</div>
</div>
</body>

JS部分：

<script type="text/javascript">
var PhotoLst = [{ src: "images/gallery/thumb-1.jpg", id: 1 },
{ src: "images/gallery/thumb-2.jpg", id: 2 },
{ src: "images/gallery/thumb-3.jpg", id: 3 },
{ src: "images/gallery/thumb-4.jpg", id: 4 },
{ src: "images/gallery/thumb-5.jpg", id: 5 },
{ src: "images/gallery/thumb-6.jpg", id: 6 },
{ src: "images/gallery/thumb-7.jpg", id: 7 }
];
$(function() {
$.each(PhotoLst, function(i) {
$('#thumbLst>ul').append('<li><img src="' + this.src + '" ref="' + this.src.replace('thumb-', '') + '" /></li>');
});
$('#thumbLst>ul').css('width', 100 * PhotoLst.length + "px");
$('#thumbLst>ul>li>img').css({ "filter": 'alpha(Opacity=50)', "-moz-opacity": '0.5' }).hover(function() {
if (!$(this).hasClass('current')) {
$(this).fadeTo("fast", 1);
}
}, function() {
if (!$(this).hasClass('current')) {
$(this).fadeTo("fast", 0.5);
}
}).click(function() {
if (!$(this).hasClass('current')) {
$('#showingPhoto>img').attr('src', 'images/loading.gif').attr('src', $(this).attr('ref'));
$('#thumbLst>ul>li>img').removeClass('current').fadeTo("fast", 0.5);
$(this).addClass('current').fadeTo("fast", 1);
}
});
$('#thumbLst>ul li:first-child>img').click();
$('#nextone').click(function() {
if (parseInt($('#thumbLst>ul').css('width').replace('px', '')) > parseInt($('#thumbLst').attr('offsetWidth'))) {
if (parseInt($('#thumbLst>ul').css('width').replace('px', '')) > Math.abs(parseInt($('#thumbLst>ul').css('left').replace('px', '')) - parseInt($('#thumbLst').attr('offsetWidth')) * 2 + 14)) {//此处作越界检查
$('#thumbLst>ul').animate({ left: parseInt($('#thumbLst>ul').css('left').replace('px', '')) - parseInt($('#thumbLst').attr('offsetWidth')) + 7 }, 'fast', function() { });
} else {
$('#thumbLst>ul').animate({ left: -(parseInt($('#thumbLst>ul').css('width').replace('px', '')) - parseInt($('#thumbLst').attr('offsetWidth')) + 7) }, 'fast', function() { });
}
}
});
$('#prevone').click(function() {
$('#thumbLst>ul').animate({ left: parseInt($('#thumbLst>ul').css('left').replace('px', '')) + parseInt($('#thumbLst').attr('offsetWidth')) - 7 > 0 ? 0 : parseInt($('#thumbLst>ul').css('left').replace('px', '')) + parseInt($('#thumbLst').attr('offsetWidth')) - 7 }, 'fast', function() { }); //此处作越界检查
});
});
</script>

这个只是一个粗糙的效果，里面很多地方需要细化，代码也需要优化。现在只是记在这里，等以后需要用到的时候方便自己用，到时候需求也会更加明确，就知道该细化哪些部分了。

今天在javaeye上面看到了一篇文章，把jQuery贬得很惨，说它可读性不强，由于我对JS也不熟，所以无法领略作者所说的境界。但是我想我的精力不会放太多在JS上面，所以我现在只要求自己会用，达到想要的效果就OK了，至于什么闭包啊，JS设计模式啊，我还是以后有机会再研究吧，当务之急，是先把C#这门语言掌握好。《CLRViaC#》这本书，我还要多久才能粗略地看完一遍啊，要是有书就好了，不用依赖电脑就能看了。

附件：Gallery代码部分

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航