一个简单的gallery效果

最新推荐文章于 2024-09-15 20:39:09 发布

weixin_30672019

最新推荐文章于 2024-09-15 20:39:09 发布

阅读量93

点赞数

文章标签： c# 设计模式 javascript ViewUI

原文链接：http://www.cnblogs.com/deafcat/archive/2009/04/07/1431207.html

版权

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

CSS部分：

Code
<style type="text/css">
    * { margin: 0; padding: 0; }
    body { text-align: center; }
    #showingPhoto { width: 1024px; height: auto; padding: 10px; border: 1px solid #ccc; margin: auto; position: relative; }
    #showingPhoto img { margin: auto; clear: both; }
    #photoLst { width: 500px; height: 80px; margin: auto; margin-bottom: 20px; margin-top: 20px; }
    #thumbLst { width: 305px; height: 82px; overflow: hidden; border: 1px solid #ccc; margin: 10px; position: relative; }
    #photoLst div { float: left; }
    #photoLst ul { list-style: none; display: inline; width: auto; height: 82px; text-align: center; position: absolute; left: 0; }
    #photoLst ul li { padding: 5px; width: 90px; height: 80px; float: left; display: inline; }
    #photoLst ul li img { cursor: pointer; border: 1px solid #ccc; padding: 1px; width: 90px; height: 68px; }
    .switchBtn { width: 70px; height: 20px; background: #0a0; color: #fff; cursor: pointer; }
</style>

HTML部分：

Code

<body>

Prev</div>

<ul>

</ul>

</div>

Next</div>

</div>

</div>

</body>

JS部分：

Code
<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代码部分

转载于:https://www.cnblogs.com/deafcat/archive/2009/04/07/1431207.html