图片展示特效系列之六（网络收集整理）
<div align="center"><a href="http://cswz.hyyhzyw.com/tujcxl/flll//index.html" target="_blank"><font face="微软雅黑"><font size="4">点击全屏欣赏</font></font></a></div><br><br><font face="黑体" size="4">浏览说明：</font><div><font face="黑体" size="4">本展示特效为分类浏览方式，即把图片分为两组进行展示（亦可理解为两类）。浏览时先点击<br></font><font face="黑体" size="4">“庄心妍写真1”或“庄心妍写真2）任何一个图片包标签，当点开图片包后，页面即显示左右箭头图片和“收缩”字样链接，而图片包里的图片也呈一字型排开，这时先点击第一张或其中某一张图片，页面中间即显示原图，接下去可以点击左右箭头浏览，也可以点击展开的小图浏览。如要浏览图片包2，则要先点击“收缩”链接返回到图片包打开前页面，然后再点击“庄心妍写真2”图片包展开浏览。</font><br><br><br><br><br><br><br><br><br><br>
<div style="left:-210px; width:1000px; position:relative; top:190px;">
<iframe marginwidth="0" marginheight="0" src="http://cswz.hyyhzyw.com/tujcxl/flll//index.html" frameborder="0" width="1000" scrolling="no" height="1000"></iframe></div>
<br><br><br><br><br><br><br><br><br><br><br><font face="新宋体" size="5">文档代码编辑、图片制作替换及上传</font></div><div><br></div><div><font face="新宋体" size="4">1、文档代码编辑</font></div><div><font face="新宋体" size="4">需要编辑的文档为index.html，用记事本打开，然后找到“庄心妍写真1”修改为你要命名的分类图片包名称，同理也找到“庄心妍写真2”进行修改。</font></div><div><font face="新宋体" size="4">2、图片制作替换</font></div><div><font size="4"><font face="新宋体">图片放在images文件夹下的</font>album1和album2两个文件夹里，其中album1和album2两个文件夹里分别有thumbs子文件夹，这个子文件夹里放的是小图，也就是显示页面图片包里的样图，album1和album2两个文件夹里的图片为原图，根目录下bg.jpg为底图。图片制作要求为：原图</font><span style="font-size: large;">尺寸掌握在1024*768像素左右，不要太大，thumbs子文件夹里的小图控制在110*80左右。背景底图为填充方式，因此</span><span style="font-size: large;">bg.jpg图片可以适当加大或缩小，至于使用1000*1000是否可以没有试过。</span><span style="font-size: large;">此外，无论是原图还是小图，其数量不能超过6张，这也就意味着每个图片包里的图片总数量为6张，曾尝试过增加图片数量并添加代码，但没成功，还有待于进一步研究。</span></div><div><font size="4">3、文件上传</font></div><div><font size="4">文件上传空间后的目录结构要和本地一模一样，为了预防出错，最好是在上传文件前先在空间建立好目录，然后再上传，如使用FTP本地上传，则可以把整个文件夹直接拽到空间里，那样不会出错。</font></div><div><font size="4"><br></font></div><div><font size="4"><br></font></div><div><font size="4">代码分享：</font></div><div><a href="https://pan.baidu.com/s/1W1V0iCMYcFlqLA1-TgqpSA">https://pan.baidu.com/s/1W1V0iCMYcFlqLA1-TgqpSA</a> 提取码：</div><div><br>
</div>**** Hidden Message ***** 谢谢墨染{:2_196:}
页:
[1]