低一度{diyidu} 多图展示效果

2009-9-21 - diyidu - 网页设计 - Views

这是我今天心血来潮写的一个简单的图片调用效果。在这个基础上，下一步要做的就是实现ZBlog日志内插图的自动调用与更新，另外就是界面的进一步美化，最终形成一个功能完整的侧边插件。整个过程还是有难度的，不过还是想试试看，为我加油吧^_^。一点说明：目前这个效果（暂定为测试版本吧），只支持手动调用图片，支持列表无限延伸，图片可加链接与描述，同时同步图片说明……以后会慢慢动态化、自动化的，呵呵。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title> 低一度{diyidu} - 多图展示效果 </title>
<meta name="Author" content="Stu Nicholls" >

<script src="/UPLOAD/switch_toggle.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="/UPLOAD/more_switch.css" >

</head>

<body>

<h2>低一度{diyidu}</h2>
<h3>21nd September 2009</h3>

<div id="gallery">

<b class="switch">1</b>
<div class="hide"><a href="/post/download_tb.html">
	<img class="start" src="/UPLOAD/2009/9/232.jpg" alt="" border="0" ></a>
<p><b>演示图1</b> - 50个精美的下载按钮图标分享</p>
</div>

<b class="switch">2</b>
<div class="hide"><a href="/post/logo_design.html">
	<img src="/UPLOAD/2009/9/243.jpg" alt="" border="0" ></a>
<p><b>演示图2</b> - 从知名网站logo的演变看设计</p>
</div>

<b class="switch">3</b>
<div class="hide"><a href="/post/bl_design.html">
	<img src="/UPLOAD/2009/9/256.jpg" alt="" border="0" ></a>
<p><b>演示图3</b> - 4个最具创意的博客设计欣赏</p>
</div>

<b class="switch">4</b>
<div class="hide"><a href="/post/flash_image.html">
	<img src="/UPLOAD/2009/9/261.jpg" alt="" border="0" ></a>
<p><b>演示图4</b> - 怎样轻松提取Flash中的图片</p>
</div>

<b class="switch">5</b>
<div class="hide"><a href="/post/beat_it.html">
	<img src="/UPLOAD/2009/9/266.jpg" alt="" border="0" ></a>
<p><b>演示图5</b> - Michael Jackson《Beat it》</p>
</div>

<b class="switch">6</b>
<div class="hide"><a href="/post/autumn_health_03.html">
	<img src="/UPLOAD/2009/9/269.jpg" alt="" border="0" ></a>
<p><b>演示图6</b> - 秋季健康饮食知多少（3）</p>
</div>

<b class="switch">7</b>
<div class="hide"><a href="/post/image_so.html">
	<img src="/UPLOAD/2009/9/273.jpg" alt="" border="0" ></a>
<p><b>演示图7</b> - 7个基于相似性的图片搜索引擎</p>
</div>

<b class="switch">8</b>
<div class="hide"><a href="/post/pagebar_demo.html">
	<img src="/UPLOAD/2009/9/279.jpg" alt="" border="0" ></a>
<p><b>演示图8</b> - 13个漂亮个性的分页导航效果</p>
</div>

<b class="switch">9</b>
<div class="hide"><a href="/post/404page.html">
	<img src="/UPLOAD/2009/9/281.gif" alt="" width="475" height="264" border="0" ></a>
<p><b>演示图9</b> - 10款超个性的404页面截图</p>
</div>

<b class="switch">10</b>
<div class="hide"><a href="/post/logo_maker.html">
	<img src="/UPLOAD/2009/9/285.jpg" alt="" border="0" ></a>
<p><b>演示图10</b> - 一个不错的在线logo制作站点</p>
</div>

<b class="switch">11</b>
<div class="hide"><a href="/post/image_wztx.html">
	<img src="/UPLOAD/2009/9/286.jpg" alt="" border="0" ></a>
<p><b>演示图11</b> - 鼠标触发图片文字说明的效果</p>
</div>

<b class="switch">12</b>
<div class="hide"><a href="/post/skydrive_disk.html">
	<img src="/UPLOAD/2009/9/287.jpg" alt="" border="0" ></a>
<p><b>演示图12</b> - 25G免费网络硬盘SkyDrive</p>
</div>

<b class="switch">13</b>
<div class="hide"><a href="/post/qq_ljqlsoft.html">
	<img src="/UPLOAD/2009/9/291.jpg" alt="" border="0" ></a>
<p><b>演示图13</b> - QQ垃圾文件清理通用版V2.0</p>
</div>

<b class="switch">14</b>
<div class="hide"><a href="/post/pjskins_download.html">
	<img src="/UPLOAD/2009/9/295.jpg" alt="" border="0" ></a>
<p><b>演示图14</b> - 9款MT系列原创Skins for PJBlog</p>
</div>

<b class="switch">15</b>
<div class="hide"><a href="/post/pjskins_download.html">
	<img src="/UPLOAD/2009/9/303.jpg" alt="" border="0" ></a>
<p><b>演示图15</b> - 9款MT系列原创Skins for PJBlog</p>
</div>

<b class="switch">16</b>
<div class="hide"><a href="/post/autumn_health_06.html">
	<img src="/UPLOAD/2009/9/306.jpg" alt="" border="0" ></a>
<p><b>演示图16</b> - 秋季健康饮食知多少（6）</p>
</div>

<b class="switch">17</b>
<div class="hide"><a href="/post/url_changetool.html">
	<img src="/UPLOAD/2009/9/308.jpg" alt="" border="0" ></a>
<p><b>演示图17</b> - 1款不错的专用链接转换工具</p>
</div>

<b class="switch">18</b>
<div class="hide"><a href="/post/qq_mail.html">
	<img src="/UPLOAD/2009/9/314.jpg" alt="" border="0" ></a>
<p><b>演示图18</b> - 今天开通了QQ域名邮箱服务</p>
</div>
<br  class="clear">
</div>
<p>© 2009 <a href="http://www.diyidu.cn/">diyidu.cn</a></p>
</body>
</html>

提示：您可以先修改部分代码再运行

关键词 // Web设计低一度效果演示图片调用
出处：低一度，链接：http://www.diyidu.cn/post/images_dy.html

上一篇：今天开通了QQ域名邮箱服务下一篇：Z-Blog 1.8 Arwen 使用小贴士

随机推荐

to "低一度{diyidu} 多图展示效果"

#1 Hobo 回复该留言 2009-9-21 15:10:13

我在火狐里运行没看出效果。加油。
diyidu 于 2009-9-21 15:14:05 回复
现在应该可以了。

#2 路人乙回复该留言 2009-9-21 17:02:06

哇，要真能实现动态调用日志内图片，会有很多人崇拜你的。
diyidu 于 2009-9-21 17:04:10 回复
ha，别高兴得太早，我经常玩不出来的。

#3 夏至雨回复该留言 2009-9-22 8:31:53

做得真不错！
diyidu 于 2009-9-22 8:56:56 回复
谢谢，还要再修改的。

#4 tommyhu 回复该留言 2009-9-22 19:24:16

难得，加油。
diyidu 于 2009-9-22 20:30:01 回复
谢了，正在努力中。

#5 乌瓦回复该留言 2009-9-23 13:11:55

不错的效果。顶一个。
diyidu 于 2009-9-23 13:46:09 回复
谢谢鼓励！

#6 HCONLY 回复该留言 2010-6-9 23:15:11

我也做过庞大的颜色查询页面，您相当于一句话把所有问题都解决了，厉害厉害佩服佩服。
diyidu 于 2010-6-9 23:18:29 回复
？颜色查询页面？和这篇有啥关系？

低一度{diyidu} 多图展示效果

随机推荐

if(6==0){document.write("Have no comment")}else{if(6==1){document.write("1 comment")}else{document.write("6 comments")}}; to "低一度{diyidu} 多图展示效果"

Add comment

to "低一度{diyidu} 多图展示效果"