<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元宵节</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link type="text/css" rel="stylesheet" href="css/swiper.min.css" />
<link type="text/css" rel="stylesheet" href="css/animate.min.css" />
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/swiper.animate.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
font-family:"microsoft yahei";
}
.swiper-container {
/* width: 320px;
height: 480px;*/
width: 100%;
height: 100%;
background:#fff;
}
.swiper-slide{
}
.swiper-slide{
width:100%;
height:100%;
background:url(images/bg.jpg) no-repeat left top;
background-size:100% 100%;
}
img{
display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
position:absolute;
}
.txt{
position:absolute;
}
#array{
position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-------------slide1----------------->
<section class="swiper-slide">
<img src="images/s1-t2.png" class="ani resize" style="width:100px;height:110px;left:70px;top:185px;z-index:3;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" >
<img src="images/s1-t1.png" class="ani resize" style="width:60px;height:110px;left:220px;top:185px;z-index:3;" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
<img src="images/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
<img src="images/s1.png" class="ani resize" style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
</section>
<!---------------slide2-------------->
<section class="swiper-slide">
<img src="images/s2-i5.png" class="ani resize" style="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" >
<img src="images/s2-i4.png" class="ani resize" style="width:195px;height:163px;left:31px;top:48px;z-index:4;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" >
<img src="images/s2-i3.png" class="ani resize" style="width:212px;height:186px;left:24px;top:36px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
<img src="images/s2-i2.png" class="ani resize" style="width:64px;height:221px;left:237px;top:20px;z-index:2;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" >
<img src="images/s2-i1.png" class="ani resize" style="width:42px;height:192px;left:248px;top:27px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
</section>
<!----------------slide3-------------->
<section class="swiper-slide">
<img src="images/s3-i5.png" class="ani resize" style="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" >
<img src="images/s3-i4.png" class="ani resize" style="width:195px;height:163px;left:31px;top:48px;z-index:4;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" >
<img src="images/s2-i3.png" class="ani resize" style="width:212px;height:186px;left:24px;top:36px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
<img src="images/s3-i2.png" class="ani resize" style="width:64px;height:221px;left:237px;top:20px;z-index:2;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" >
<img src="images/s2-i1.png" class="ani resize" style="width:42px;height:192px;left:248px;top:27px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
</section>
<!-------------slide4----------------->
<section class="swiper-slide">
<div class="ani resize" style="width:120px;height:110px;left:110px;top:184px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
<div class="txt">
<p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">愿您羊年运旺福旺</p>
<p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">条条祝福给您送上</p>
<p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">美丽花灯传递吉祥</p>
<p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">圆圆汤圆味道芬芳</p></div>
</div>
<div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s" >
<div class="txt">
元<br>宵<br>节</div>
</div>
<img src="images/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
<img src="images/s1.png" class="ani resize" style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
</section>
</div>
<img src="images/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript">
scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
for (var j=0; j<resizes.length; j++) {
resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';
}
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
ss=scales[i].style;
ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}
var mySwiper = new Swiper ('.swiper-container', {
direction : 'vertical',
pagination: '.swiper-pagination',
mousewheelControl : true,
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
}
})
</script>
</body>
html5手机端元宵节专题页面模板源码.zip （19个子文件） 
css 
animate.min.css 60KB swiper.min.css 15KB images 
s1-t2.png 11KB s3-i4.png 23KB s3-i2.png 8KB s1-t1.png 5KB web-swipe-tip.png 3KB s2-i5.png 433KB flower.png 48KB s2-i2.png 8KB s3-i5.png 568KB
bg.jpg 52KB s2-i3.png 5KB s2-i4.png 22KB s2-i1.png 4KB s1.png 13KB
index.html 8KB js swiper.min.js 59KB swiper.animate.min.js 2KB资源评论
王乾亨2018-01-18我下载过的资源，重新下载还要积分？
