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

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

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

淘建站为您提供更多_图片代码_图片墙_图片墙_图片排序,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 250 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:图片代码 > 图片墙 难易程度:高级

载入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.sucaiq.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.sucaiq.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
        };

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/870.html
jquery动画切换排序点击放大切换 希望对你有帮助,感谢您的支持!
  • jquery网页图片墙效果_全屏图片墙滑动切换效果代码

    jquery网页图片墙效果_全屏图片墙滑动切换效果代码

  • HTML5 图片墙_仿Win8风格

    HTML5 图片墙_仿Win8风格

  • jquery图片墙特效多张小图片集合图片墙排列布局

    jquery图片墙特效多张小图片集合图片墙排列布局

  • jquery html照片墙代码_淘宝图片墙代码_头像图片墙效果

    jquery html照片墙代码_淘宝图片墙代码_头像图片墙效果

  • 图片墙特效

    图片墙特效

  • jquery.masonry.js瀑布流图片墙点击相册图片展示大图

    jquery.masonry.js瀑布流图片墙点击相册图片展示大图

  • jquery.zoomtour图片放大查看类似望远镜查看图片变焦...

    jquery.zoomtour图片放大查看类似望远镜查看图片变焦...

  • jquery图片放大镜插件制作多种图片放大查看效果

    jquery图片放大镜插件制作多种图片放大查看效果

  • 网页特效,滑动门,点击图片放大

    网页特效,滑动门,点击图片放大

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2