DIV+CSS 图片用下拉框的隐藏和显示部分内容的实现

前面我们说了文字的隐藏和显示,那么图片该怎么办呢?其实原理都大同小异,相对文字来说稍微复杂了一点。运用js和DIV+CSS共同完成,这里我们jquery来实现。关键代码如下:

<style>
*{margin: 0;padding:0;list-style: none;}
body{background: #333;font-size: 14px;font-family:"微软雅黑"}
a{color: #333;text-decoration: none;}
.hidden{ display: none;}
.lanren{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
.lanren ul.list{overflow: hidden;}
.lanren ul.list li{width: 150px;height: 130px;margin:5px;float: left;overflow: hidden;}
.lanren ul.list li img{width: 100%;height: 100%;}
.lanren ul.list p{text-align: center;padding: 10px;}
.lanren .more{overflow: hidden;padding:10px;text-align: center;}
.lanren .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
.lanren .more a:hover{text-decoration: none;background: red;color: #fff;}
</style><!--代码部分begin-->
<div class="lanren">
    <div class="hidden">
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
        <li><img src="img.jpg" realSrc="img.jpg"  width="150" height="100"/></li>
    </div>
    <ul class="list">数据加载中,请稍后...</ul>
    <div class="more"><a href="javascript:;" onClick="lanren.loadMore();">加载更多</a></div>
</div>
<script src="jquery.min.js"></script>
<script>
    var _content = []; //临时存储li循环内容
    var lanren = {
        _default:10, //默认显示图片个数
        _loading:5,  //每次点击按钮后加载的个数
        init:function(){
            var lis = $(".lanren .hidden li");
            $(".lanren ul.list").html("");
            for(var n=0;n<lanren._default;n++){
                lis.eq(n).appendTo(".lanren ul.list");
            }
            $(".lanren ul.list img").each(function(){
                $(this).attr('src',$(this).attr('realSrc'));
            })
            for(var i=lanren._default;i<lis.length;i++){
                _content.push(lis.eq(i));
            }
            $(".lanren .hidden").html("");
        },
        loadMore:function(){
            var mLis = $(".lanren ul.list li").length;
            for(var i =0;i<lanren._loading;i++){
                var target = _content.shift();
                if(!target){
                    $('.lanren .more').html("<p>全部加载完毕...</p>");
                    break;
                }
                $(".lanren ul.list").append(target);
                $(".lanren ul.list img").eq(mLis+i).each(function(){
                    $(this).attr('src',$(this).attr('realSrc'));
                });
            }
        }
    }
    lanren.init();
</script>
<!--代码部分end-->

我们来看看运行效果:

    数据加载中,请稍后…