图片展示特效系列之三（网络收集）

墨染锦年 · 发表于 2019-1-19 12:59:41

说明：

此代码特效所用作品及图片均取自风晴雪音画作品和地址链接，分享目的仅展示图片浏览效果，不针对作品本身。感谢风晴雪分享精美音画！

友情提示：

鼠标光标放在每个主题名称上面时门帘自动提起，此时点击露出画面即可打开音画作品地址全图欣赏。

代码修改、图片更换及文件上传

1、代码编辑

（1）style.css文件代码修改

本特效需修改CSS目录下style.css和根目录下index.html两个文件，style.css文件可用记事本打开，主要修改门帘图片的关联文件名：即ul#menuback li#shutter1 {

background: url(../images/1.jpg) no-repeat;

}这样一段代码。其中../images/1.jpg代码为门帘图片1（也就是效果图最左面第一个门帘图片），../images/2.jpg即代表第二个门帘图片，然后以此类推。style.css文件中总共有六段这样的代码，即6个门帘图片，这6个门帘需要用PS软件逐一去制作，当然门帘的设计可以任意发挥，但尺寸必须和源文件一样，此外如果门帘图片文件名不用1、2、3....进行命名，那么../images/1.jpg代码中的1.jpg也要相应更改为您所用的文件名。

（2）index.html文件代码修改

index.html文件同样也用记事本打开，然后修改href="http://fqx0808.star2012home.com/2018/0904/wsbd.html"代码中的超链接地址，这段代码总共也有6段，每一段链接一个作品。修改时只要修改超链接地址即可，其他无需编辑。

2、图片更换

所有的图片均应放在images文件夹里，上面说过，如果图片自己命名的话，那代码中也要做相应的修改，但如果使用源文件命名，那无需修改，只要按照尺寸要求制作图片并替换即可。

3、文件上传

编辑好文件上传空间后，其目录及架构要和本地一致，否则不显示。

源码下载：