密码      自动登录 找回密码 立即注册(请使用中文名称)
    
查看: 4973|回复: 1

[教程] 图片展示特效系列之六(网络收集整理)

[复制链接]

19

主题

238

帖子

6839

积分

贵宾

积分
6839
发表于 2019-2-20 13:46:48 | 显示全部楼层 |阅读模式


浏览说明:
本展示特效为分类浏览方式,即把图片分为两组进行展示(亦可理解为两类)。浏览时先点击
“庄心妍写真1”或“庄心妍写真2)任何一个图片包标签,当点开图片包后,页面即显示左右箭头图片和“收缩”字样链接,而图片包里的图片也呈一字型排开,这时先点击第一张或其中某一张图片,页面中间即显示原图,接下去可以点击左右箭头浏览,也可以点击展开的小图浏览。如要浏览图片包2,则要先点击“收缩”链接返回到图片包打开前页面,然后再点击“庄心妍写真2”图片包展开浏览。




















文档代码编辑、图片制作替换及上传

1、文档代码编辑
需要编辑的文档为index.html,用记事本打开,然后找到“庄心妍写真1”修改为你要命名的分类图片包名称,同理也找到“庄心妍写真2”进行修改。
2、图片制作替换
图片放在images文件夹下的album1和album2两个文件夹里,其中album1和album2两个文件夹里分别有thumbs子文件夹,这个子文件夹里放的是小图,也就是显示页面图片包里的样图,album1和album2两个文件夹里的图片为原图,根目录下bg.jpg为底图。图片制作要求为:原图尺寸掌握在1024*768像素左右,不要太大,thumbs子文件夹里的小图控制在110*80左右。背景底图为填充方式,因此bg.jpg图片可以适当加大或缩小,至于使用1000*1000是否可以没有试过。此外,无论是原图还是小图,其数量不能超过6张,这也就意味着每个图片包里的图片总数量为6张,曾尝试过增加图片数量并添加代码,但没成功,还有待于进一步研究。
3、文件上传
文件上传空间后的目录结构要和本地一模一样,为了预防出错,最好是在上传文件前先在空间建立好目录,然后再上传,如使用FTP本地上传,则可以把整个文件夹直接拽到空间里,那样不会出错。


代码分享:

游客,如果您要查看本帖隐藏内容请回复

评分

参与人数 1金钱 +100 收起 理由
大雅 + 100

查看全部评分

回复

使用道具 举报

367

主题

1万

帖子

16万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
164169
发表于 2019-2-21 13:45:36 | 显示全部楼层
谢谢墨染
回复

使用道具 举报

本版积分规则

手机版|Archiver|雪馨苑音画论坛 ( 辽ICP备2020012594号 )

GMT+8, 2024-12-22 21:45 , Processed in 0.062662 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2011 Comsenz Inc. skin by asw6

返回顶部