微信手机端背景滑动特效

OECOM

发布于 2020-07-01 18:36:54

3.5K0

发布于 2020-07-01 18:36:54

文章被收录于专栏：OECOMOECOM

随着微信平台的发展，微信公众号变的也相当火爆，成为了众多商家吸引大众眼球的一个基地。这些商家在这个平台上发布自己的活动，这些活动需要程序员来使用网页代码来实现，下面我来说一下微信平台上通过向上滑动屏幕实现整个页面变换的特效，先来看一下代码吧：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-cn" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" />
<meta content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>微信手机端滑动特效 - 落帆亭</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/page.css" />
</head>
<body>
<div id="page-hd">
  <div id="loading" style="display: none;">
    <div class="spinner">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
  </div>
  <img src="img/icon_up.png" alt="" class="arrow-up pt-page-moveIconUp" /> </div>
<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://www.luofanting。com.cn/">
     <img class="pt-page-rotateUnfoldTop hide" src="img/btn_joinus.png" alt="" /> </a><br>
      <a href="http://www.luofanting。com.cn/">
       <img class="pt-page-rotateUnfoldTop hide" src="img/btn_weixin.png" alt="" /> </a> </div>
  </div>
</div>
<div id="page-ft"></div>
<script type="text/javascript" src="js/zepto.min.js"></script> 
<script type="text/javascript" src="js/touch.js"></script> 
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

这段代码是网页的主体部分，向外界展示的任务由他完成，id为page-content的div是用来放置每个滑动页面的主背景，如果需要在每个背景上添加其他元素的话，可以在相应的div下添加即可。这个特效引入了一些其他的文件，分别为reset.css、animations.css、layout.css、page.css、zepto.min.js、touch.js和index.js，其他的文件没有必要说，在用的时候只要将其引入就可以了。我要说的就是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);}

这是配合主页上显示每个场景的图片，如果你想用别的图片，只需要将这里的图片换掉即可，本站提供所需的所有引入文件，点击下面的下载即可进入下载页面。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015-04-10，如有侵权请联系 cloudcommunity@tencent.com 删除

css