创建一个可调大小的图片网格系统(译).
1. 创建网格
首先我们创建一个静态的图片网格. 我准备了6张照片, 把它们裁剪成宽高不大于500像素的图片. 我们会生成一个ul列表, 把图片放在li标签里.
- <ul id="grid">
- <li><img src="1deadsea.jpg"/></li>
- <li><img src="2akko.jpg"/></li>
- <li><img src="3jordan.jpg"/></li>
- <li><img src="4petra.jpg"/></li>
- <li><img src="5pyramids.jpg"/></li>
- <li><img src="6deadsea.jpg"/></li>
- </ul>
然后, 我们使这些li浮动, 这样它们就会换行, 同时给它们的右侧和底部加一些白边. 当图片水平,竖直都居中的排列在网格中时是很好看的. 所以我们可以为图片设置宽, 高, 行距, 并在ul标签上声明text-align:center, 在图片上声明vertical-align:middle(更多关于这方面的技术请看iBloom的文章).
- ul#grid li {
- list-style: none outside;
- float: left;
- margin-right: 20px;
- margin-bottom: 20px;
- width: 500px;
- height: 500px;
- line-height: 500px;
- text-align: center;
- }
- ul#grid li img {
- vertical-align: middle;
- }
例1: 基础的图片网格.(这个时候图片有点大, 但我们一会儿会解决.)
Demo1 :http://demos.webdesignledger.com/jquery_image_grid/example1.htm
2. 爱上em
这是最令人兴奋的一个部分. 还记得em这个单位么?一个em等于当前字体大小. 所以如果字体大小是10像素, 那么1em也是10像素.这个小单位就是我们的神奇要素. 我们接下来要做的是用em而不是像素来设定图片以及它们父级li的宽高. 我们会用jQuery测量每个图片的像素大小, 然后把结果转换成以em为单位的尺寸, 在用内联CSS把这些新尺寸加到每一张图片上.
- $(document).ready(initializeGrid);
- function initializeGrid() {
- $("ul#grid li img").each(function() {
- var width = $(this).width() / 100 + "em";
- var height = $(this).height() / 100 + "em";
- $(this).css("width",width);
- $(this).css("height",height);
- });
- }
你会发现我们用宽和高分别除以100得到新尺寸. 也就是说如果字体大小设置为100像素, 宽和高就是5em. 在这个例子里, 我们把字体大小设置为50像素. 同时, 我们把li的宽, 高, 行距从500px转换为5em.
- ul#grid li {
- ...
- font-size: 50px;
- width: 5em;
- height: 5em;
- line-height: 5em;
- }
3. 添加滑动条
jQuery UI提供了一个轻量级的滑动条, 我们可以把它和li的字体大小绑定. 也许你猜到了: 当字体变大时, 图片变大; 变小时, 图片缩小. 很灵活, 对么?
创建滑动条的第一步是要包含jQuery和jQuery UI的JavaScript文件, 还有jQuery UI的CSS文件.
- <link rel="stylesheet" href="ui.all.css" type="text/css">
- <script src="jquery.js" type="text/javascript"></script>
- <script src="jquery-ui.js" type="text/javascript"></script>
然后我们为滑动条写一些简单的HTML:
- <div id="grid_slider">
- <div class='ui-slider-handle'></div>
- </div>
我们还要初始化滑动条, 比如调用一个叫initializeGrid()的方法. 设置最大值为100, 最小值为10, 初始化的值设置为50.
转眼我们就有了这样一个可以自由伸展的图片网格, 并且对于浏览器来讲它是轻量级的.
最终效果：http://demos.webdesignledger.com/jquery_image_grid/example2.htm
原文出处: http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery
原创文章如转载请注明：转载自心诺设计风尚 xvdesign.com 欢迎订阅心诺设计风尚
本文链接：http://xvdesign.com/post/135.html [复制链接]
分类：我爱设计| 发布：心诺设计| 查看： | 发表时间：2009-6-17
引用：点击这里获取该日志的TrackBack引用地址
上一篇：准备入手多普达S600
下一篇：友情放送最新Sean主题
- 看图读文
- 最新酷站
相关文章
- 设计漂亮的样式表是一门艺术(译)(2009-6-2 12:0:38)
- CSS3备受期待的8大功能(2009-5-6 15:17:2)
- 即将发布一款黑色主题（Beta版）(2009-4-14 14:7:16)
- 项目进程60%(2009-4-4 0:29:6)
- Sean主题居中样式下载(2009-3-18 11:59:0)
- JavaScript是否为创造游戏准备好了(2009-3-11 15:21:40)
- Sean主题最后一次更新(含PSD文件)(2009-2-25 22:14:41)
- 利用jQuery制作一个自动播放的幻灯片(2009-2-24 11:18:24)
- jQuery 3 岁了(2009-1-15 15:12:41)
- CSS加载方式对页面优化的影响(2008-4-6 16:20:38)
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
广告赞助
本类更新
广告宣传
- 七嘴八舌
- 最新评论
- 最新留言
- 社区动态
- 热门游戏
- 热门讨论