jquery动画切换排序点击放大切换

这是两个jquery 图片特效插件。一个是图片无刷新重新分组排序,一个是图片相册效果,多图展示效果j。

2016-08-24 7449 37 3
软件描述

载入js

/*无刷新快速排序分类*/ 
<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
<script type="text/javascript" src="js/jquery.easing.js"></script> 
/*点击图片放大*/ 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>  
/*调用*/ 
<script type="text/javascript" src="js/script.js"></script>

图片列表html

<ul class="portfolio-categ filter"> 
            <li>选择分类:</li> 
            <li class="all active"><a href="#">All</a></li> 
            <li class="cat-item-1"><a href="#" title="Category 1">分类 1</a></li> 
            <li class="cat-item-2"><a href="#" title="Category 2">分类 2</a></li> 
            <li class="cat-item-3"><a href="#" title="Category 3">分类 3</a></li> 
            <li class="cat-item-4"><a href="#" title="Category 4">分类 4</a></li> 
            <li class="cat-item-5"><a href="#" title="Category 5">分类 5</a></li> 
        </ul> 
     
        <ul class="portfolio-area">     
            <li class="portfolio-item2" data-id="id-0" data-type="cat-item-1">     
                <div> 
                    <span class="image-block"> 
                        <a class="image-zoom" href="images/big/b1.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/1.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a> 
                    </span> 
                    <div class="home-portfolio-text"> 
                        <h2 class="post-title-portfolio"><a href="#">素材火</a></h2> 
                        <p class="post-subtitle-portfolio">www.sucaihuo.com/</p> 
                    </div> 
                </div>     
            </li>             
            <li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">     
                <div> 
                    <span class="image-block"> 
                        <a class="image-zoom" href="images/big/b2.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/2.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a> 
                    </span> 
                    <div class="home-portfolio-text"> 
                        <h2 class="post-title-portfolio"><a href="#">素材火</a></h2> 
                        <p class="post-subtitle-portfolio">www.sucaihuo.com/</p> 
                    </div> 
                </div>     
            </li>

/*图片排序js参数*/

var options = { 
            duration: 750, 
            easing: 'swing', 
            attribute: 'data-id', // attribute to recognize same items within source and dest 
            adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant 
            useScaling: true, // disable it if you're not using scaling effect or want to improve performance 
            enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements 
            selector: '> *', 
            dx: 0, 
            dy: 0 
        };


举报

资源举报

举报审核通过将会奖励威望

×
收藏 下载

jquery动画切换排序点击放大切换

我的威望:0已下载次数:37

登录、发帖、回帖、上传资源可获得威望

所需威望:5开始下载
网盘链接:  访问密码:
×

讨论这个工具(3)

kissmejj126
2017-04-21 11:04

好东西

php白白
2018-05-21 16:31

收藏啦

1111111

php白白
2018-05-21 16:31

收藏啦

1111111

请登录后发表评论