基于zepto的微信手机端微场景HTML5页面特效
从网上收集来的,只要按需修改特定几行代码即可。
代码修改处
1、index.html
<div id="page-content">
<div class="page page-1 page-current"></div>
<div class="page page-2 hide"></div>
<div class="page page-3 hide"></div>
<div class="page page-4 hide"></div>
<div class="page page-5 hide"></div>
<div class="page page-6 hide"></div>
<div class="page page-7 hide"></div>
<div class="page page-8 hide"></div>
<div class="page page-9 hide">
<div class="btn-group"> <a href="http://windcoder.com/ <img class="pt-page-rotateUnfoldTop hide" src="img/btn_joinus.png" alt=""> </a><br>
<a href="http://windcoder.com/"> <img class="pt-page-rotateUnfoldTop hide" src="img/btn_weixin.png" alt=""> </a> </div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
page处是管理图片的,在改div中添加删除图片及图片中的相关组件,如在div标签为page page-9中添加的Button组件。
2、page.css
.page-1{ background-image: url(../img/1.png);}
.page-2{ background-image: url(../img/2.png);}
.page-3{ background-image: url(../img/3.png);}
.page-4{ background-image: url(../img/4.png);}
.page-5{ background-image: url(../img/5.png);}
.page-6{ background-image: url(../img/6.png);}
.page-7{ background-image: url(../img/7.png);}
.page-8{ background-image: url(../img/8.png);}
.page-9{ background-image: url(../img/9.png);}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
此处用来实现对默认图片的替换工作。
演示与下载
Preview
除特别注明外,本站所有文章均为 Windcoder网 原创,转载请注明出处来自: ji-yu-zepto-di-wei-xin-shou-ji-duan-wei-chang-jing-html5-ye-mian-te-xiao
Loading comments...

Preview
这些代码的作用是什么哈, 好像没明白
回复 @动漫资讯: 第一个是各个背景图的数量及相关组件的修改位置,第二个时背景图的修改位置
:twisted: 我只看看·····
回复 @Me.稀奇: 恩,这个不是一般人能吃得了的,还是看看就好 :mrgreen:
demo功能是你自己做的吗?
回复 @wys.me: 这还真不是= =