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

来源:https://www.sucaihuo.com/js/870.html 2016-06-07 21:01浏览(2562) 收藏

这是两个jquery 图片特效插件。一个是图片无刷新重新分组排序,一个是图片相册效果,多图展示效果j。
jquery动画切换排序点击放大切换
分类:图片代码 > 图片墙 难易:高级
查看演示 下载资源: 142 下载资源 下载积分: 20 积分

载入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
        };
评论20
头像

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

  • 头像 19楼
    04-23 16:28
    果***粒
    真的挺好看的,不错,非常喜欢
  • 头像 18楼
    01-11 21:14
    简***好
    样式不错,可以参考一下
  • 头像 17楼
    12-08 17:32
    l***
    样式挺好看的·
  • 头像 16楼
    10-02 01:52
    f***e
    好 好 好
  • 头像 15楼
    04-14 13:42
    8***m
    还可以,
  • 头像 14楼
    03-08 21:04
    p***e
    很好很强大,厉害了!
  • 头像 13楼
    02-07 18:25
    g***m
    还是一次点赞吧
  • 头像 12楼
    12-28 09:46
    a***i
    很漂亮的图片放大切换效果
  • 头像 11楼
    09-12 23:48
    s***e
    下载看看.下载看看
  • 头像 10楼
    06-29 09:16
    a***g
    牛逼,这个效果很赞vvv
1 2