jQuery瀑布流以动画animate加载图片

来源:https://www.sucaihuo.com/js/570.html 2015-11-21 04:32浏览(1262) 收藏

本文演示了瀑布流下拉加载的效果,稍微跟其他瀑布流不同的是:加载的时候以动画animate的效果。
jQuery瀑布流以动画animate加载图片
分类:其它特效 > 瀑布流 难易:初级
查看演示 下载资源 下载积分: 20 积分

在.wait_photo放置多张图片

<div class="wait_photo">
    <ul>
        <li>
            <a href="http://www.sucaihuo.com/"><img src="images/1.jpg" /></a>
            <p><span><a href="http://www.sucaihuo.com/"><img alt="" src="images/head1.jpg" style="width:24px;height:24px;" /></a><a href="http://www.sucaihuo.com/">我的作品</a></span></p>
        </li>
        <li>
            <a href="http://www.sucaihuo.com/"><img src="images/2.jpg" /></a>
            <p><span><a href="http://www.sucaihuo.com/"><img alt="" src="images/head1.jpg" style="width:24px;height:24px;" /></a><a href="http://www.sucaihuo.com/">我的作品</a></span></p>
        </li>
    </ul>
</div>

引入瀑布流插件

<script type="text/javascript" src="js/photo_water.js"></script>

当滚动条下拉的时候,若当前网页高度比滚动条滚动高度和窗口高度的和小于20的时候,加载图片

$(window).scroll(function() {
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 20) {
        loadimg();
    }
});

加载图片方法

function loadimg() {
    if (!isOk) {
        isOk = true;
        for (var i = 0; i < 10; i++) {
            var text = " <li class='photo_li" + index_photo + "'><a><img src='images/1.jpg' /></a> <p> " +
                    " <span> <a ><img   src='images/head1.jpg' style='width: 24px; height: 24px;'>" +
                    "</a>  <a >我的作品</a><br /> </span> </p> </li>";
            $(".wait_photo li").last().after(text);
            getPhotoIndex();
        }

        $(".wait_photo .photo_li" + index_photo).slideToggle(1500);
        index_photo++;
        imgHover();

        setTimeout("iSPhoto()", 1000);
    }
}

当鼠标移动到图片上加上透明度opacity效果

function imgHover() {
    $('.wait_photo li img').hover(function() {
        var $this = $(this);
        $this.stop().animate({'opacity': '0.8', 'top': '0px', 'left': '0px'});
    }, function() {
        var $this = $(this);
        $this.stop().animate({'opacity': '1.0', 'top': '-66.5px', 'left': '-150px'});
    });
}
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2