首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >基于zepto的微信手机端微场景HTML5页面特效

基于zepto的微信手机端微场景HTML5页面特效

作者头像
WindCoder
发布2018-09-20 12:03:31
发布2018-09-20 12:03:31
9860
举报
文章被收录于专栏:WindCoderWindCoder

从网上收集来的,只要按需修改特定几行代码即可。

代码修改处

1、index.html
代码语言:javascript
复制
<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="https://windcoder.com/ <img class="pt-page-rotateUnfoldTop hide" src="img/btn_joinus.png" alt=""> </a><br>
      <a href="https://windcoder.com/"> <img class="pt-page-rotateUnfoldTop hide" src="img/btn_weixin.png" alt=""> </a> </div>
  </div>
</div>

page处是管理图片的,在改div中添加删除图片及图片中的相关组件,如在div标签为page page-9中添加的Button组件。

2、page.css
代码语言:javascript
复制
.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);}

此处用来实现对默认图片的替换工作。

演示与下载

相关下载

点击下载

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-04-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码修改处
    • 1、index.html
    • 2、page.css
  • 演示与下载
  • 相关下载
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档