前端开发推荐-创建一个精美的jquery图片库效果
在Web和图形设计的世界,jquery它是使用最广泛的技术。 在他的帮助下,我们可以创建很多伟大的事情。丰富的jQuery插件,在互联网上,使我们能够毫不费力地创建幻灯片,表格,动画和其他各种良好的效果
在本教程中,我将展示如何创建简约 jQuery 图片库。您可以使用它来展示您最新的作品或作为相册使用。您可以通过类别菜单对项目进行排序
DEMO
HTML 代码
首先创建一个UL列表,确保每个LI里面具有唯一的类别名称
1 <ul class="portfolio-categ filter"> 2 <li>categories:</li> 3 <li class="all active"><a href="#">All</a></li> 4 <li class="cat-item-1"><a href="#" title="Category 1">Category 1</a> 5 </li> 6 <li class="cat-item-2"><a href="#" title="Category 2">Category 2</a> 7 </li> 8 <li class="cat-item-3"><a href="#" title="Category 3">Category 3</a> 9 </li> 10 <li class="cat-item-4"><a href="#" title="Category 4">Category 4</a> 11 </li> 12 </ul>
1 <li class="portfolio-item2" data-id="id-0" data-type="cat-item-4"> 2 <div> 3 <span class="image-block"> 4 <a class="image-zoom" href="images/big/pic1.jpg" rel="prettyPhoto[ gallery ]" title="Wall-E"><img width="225" height="140" src="data:images/thumbs/p1.jpg" alt="Wall-E" title="Wall-E" /> 5 </a> 6 </span> 7 <div class="home-portfolio-text"> 8 <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">Wall-E</a></h2> 9 <p class="post-subtitle-portfolio">released: 2008</p> 10 </div> 11 </div> 12 </li>
这里有3件事情你需要注意: data-id – 这里是唯一的, data-type – 指定他的CLASS类来进行分类, rel=”prettyPhoto[ gallery ]“ – 当缩略图被点击的时候张开一张大的图片.
CSS 代码
1 .image-block{ display:block;position: relative;} 2 .image-block img{border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;} 3 .image-block img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;} 4 .portfolio-area li{float: left;margin: 0 12px 20px 0;overflow: hidden;width: 245px;padding:5px;} 5 .home-portfolio-text{margin-top:10px;}
为每次类切换编写jquery代码
// Clone applications to get a second collectionvar $data = $(".portfolio-area").clone();//NOTE: Only filter on the main portfolio page, not on the subcategory pages$('.portfolio-categ li').click(function(e) {$(".filter li").removeClass("active");// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)var filterClass=$(this).attr('class').split(' ').slice(-1)[0];if (filterClass == 'all') {var $filteredData = $data.find('.portfolio-item2');} else {var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');}$(".portfolio-area").quicksand($filteredData, {duration: 600,adjustHeight: 'auto'}, function () {lightboxPhoto();});$(this).addClass("active");return false;});
这里是 prettyPhoto 属性图像预览的代码
jQuery("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:5000,theme:'light_rounded',show_title:false,overlay_gallery: false});}
DEMO
本文链接:前端开发推荐-创建一个精美的jquery图片库效果
转载于:https://www.cnblogs.com/58top/archive/2012/11/15/jquery-photo-gallery.html
前端开发推荐-创建一个精美的jquery图片库效果相关推荐
- 前端开发推荐的火狐插件扩展
前端开发推荐的火狐插件扩展 火狐好用的插件有很多,主要看你是做什么工作了,比如我是做网站前端的,有一些调试页面的插件就不可缺少了,如firebug.web developer等. 秀一下我收藏的火狐插 ...
- 树莓派Android Things物联网开发:创建一个Things项目
[转载请注明出处:http://blog.csdn.net/leytton/article/details/77854144] <树莓派Android Things物联网开发>系列文章专栏 ...
- 2D游戏开发 - SkyGameEngine2d 创建一个游戏项目
2D游戏开发 - SkyGameEngine2d 创建一个游戏项目 一.前期准备 二.获取引擎工具 2.1 下载工具集 2.2 解压并且打开工具 三.使用工具 3.1 工具界面介绍 3.2 设置引擎路 ...
- 中级前端开发推荐书籍
这些书籍适合中级前端开发者阅读,初级前端开发人员买来除了自我安慰和垫高显示器以外可能没什么用处.说是推荐书单,实际上是笔者自己的读书计划.欢迎你在阅读中与笔者交流. 1. <Redis实战> ...
- Web前端开发推荐阅读书籍-精华
学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 读书吧~相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本好书都 ...
- web前端开发推荐阅读书籍
前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 读书吧~相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本 ...
- 使用开源微前端框架 Luigi 创建一个基于微前端架构的工程
官网地址 微前端通常被称为"前端微服务". 它们允许您将大型单体前端分解为独立的.可扩展的.可以协同工作的独立部分. 微前端架构对于复杂的产品或拥有众多团队的公司尤其有用,可以帮助 ...
- python开发自动化创建一个任务下发到手机_如何利用Fabric自动化你的任务
首先让我们首先看一个例子.我们知道在*NIX下面,uname命令是查看系统的发行版. 可以写这样一个Fabric脚本: from fabric.api import run def host_type ...
- UE C++ 编辑器开发 1.创建一个简单的蓝图节点
这系列文章是为了记录我在课程中所学以及自身对知识点少量的理解,只写实现过程不会有非常详细的解释,所以可能会出现错误. 课程学习至UE4编辑器开发进阶教程:反射与蓝图| ABOUTCG视频教程 1.准备 ...
最新文章
- synchronized同步对象锁
- iqooneo5支持鸿蒙系统吗,iqooneo5活力版有双卡双待吗_iqooneo5活力版支持5g吗
- Cpp 对象模型探索 / 系列文章的索引
- 《408计算机网络》综合应用题
- 书评:Mockito Essentials
- MySQL 事务 | ACID、四种隔离级别、并发带来的隔离问题、事务的使用与实现
- php laravel 返回统一格式,封装的统一的Laravel响应类,返回数据类
- 【十万个编程篇】写文章与“写项目”的差别
- angularjs中按回车事件_浅谈angularjs中响应回车事件
- 呼叫中心几种常见质检方式的对比
- java分布式日志组件
- Sqlite数据库对时间进行比较SQL语句
- clustalw序列比对_COBALT:NCBI在线蛋白多序列比对(比ClustalW还强大的工具)
- 短网址还原 php,PHP将微博短地址还原为实际网址
- jdk11的class反射机制,将newInstance()方法设置为了不建议使用了,怎么通过反射创建新的对象
- matlab分频.m,分频器m是什么意思 音响分频器m. TW那个代表高音那个代表是低音?...
- mysql查询最后一条记录
- 2022必读的5篇行业趋势报告(内附下载)
- css动效:气泡在屏幕上随机漂浮
- 软件设计一点通 | 抽象文档模式详解
热门文章
- LeetCode 2080. 区间内查询数字的频率(哈希+二分查找)
- LeetCode 2071. 你可以安排的最多任务数目(二分查找)
- 为何Spark更高效?
- LeetCode 255. 验证前序遍历序列二叉搜索树(单调栈)*
- oracle批量联机,Oracle 12.2 使用联机重定义对表进行多处改变
- python api数据接口_python写数据api接口
- open函数返回-1_4.6 linux的系统调用执行探究(1)
- 服务器如何安装应用程序,第四节 服务器端应用程序安装
- 回顾经典,Netflix的推荐系统架构
- 美团点评酒店后台故障演练系统