|
|
@@ -1,34 +1,137 @@
|
|
|
-<html >
|
|
|
+<html>
|
|
|
<head>
|
|
|
-<title>企明星-剑鱼</title>
|
|
|
-<meta charset="utf-8">
|
|
|
-<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
|
|
|
-<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" user-scalable="no" />
|
|
|
-<meta name="renderer" content="webkit">
|
|
|
-<link href="/css/bootstrap.min.css" rel="stylesheet">
|
|
|
-
|
|
|
+<title>企明星-剑鱼-演示</title>
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+<link href="/wxswordfish/style.css" rel="stylesheet">
|
|
|
+<link href="/swiper/swiper.min.css" rel="stylesheet">
|
|
|
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
|
|
|
<script src="/js/jquery.js"></script>
|
|
|
-<script src="/js/bootstrap.min.js"></script>
|
|
|
-
|
|
|
<script src="/wxswordfish/share.js"></script>
|
|
|
+<script src="/swiper/swiper.min.js"></script>
|
|
|
<script>
|
|
|
initShare({{.T.signature}},{{.T.shareid}});
|
|
|
</script>
|
|
|
</head>
|
|
|
-<body style="margin:0px; background-color:#C5F7FE;">
|
|
|
-<img src="/wxswordfish/images/share-cj.jpg" class="img-responsive" alt="Cinque Terre">
|
|
|
-<img id="img2" style="position:absolute;" class="img-responsive" src="/front/weixinshare/{{.T.shareid}}" >
|
|
|
-</body>
|
|
|
-<script>
|
|
|
+<body>
|
|
|
+<div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/guide-0.png" alt="Cinque Terre">
|
|
|
+ <img id="QRcode" style="position:absolute;z-index: 2;" src="/front/weixinshare/{{.T.shareid}}" >
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/guide-2.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/guide-3.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/guide-4.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/guide-5.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/guide-0.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 如果需要分页器 -->
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ <div class="guide-bottom">
|
|
|
+ <img class="arrow-up" src="/wxswordfish/images/up.png">
|
|
|
+ <img src="/wxswordfish/images/index.png" class="jumpGuide" onclick="backToIndex()">
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script type="text/javascript">
|
|
|
+var mySwiper = null;
|
|
|
+var currentIndex = 0;
|
|
|
$(function(){
|
|
|
- var width=$(window).width();
|
|
|
- var max=750
|
|
|
- if(width>max){
|
|
|
- width=max
|
|
|
+ initShare({{.T.signature}},{{.T.shareid}});
|
|
|
+ var width = $(window).width();
|
|
|
+ var height = $(window).height();
|
|
|
+ var defaultHeight = 416;
|
|
|
+ var max = 750;
|
|
|
+ if(width > max){
|
|
|
+ width = max;
|
|
|
}
|
|
|
- $("#img2").css({"width":width*0.48,"top":width*0.78,"left":width*0.26})
|
|
|
-
|
|
|
-})
|
|
|
+ width = width*0.48;
|
|
|
+ var top = 330;
|
|
|
+ if(height > defaultHeight){
|
|
|
+ top = top / defaultHeight * height;
|
|
|
+ }
|
|
|
+ $("#QRcode").css({"width":width,"height":width,"top": top-width,"left":"50%","margin-left": -(width/2)});
|
|
|
+ $(".bottom-toolbar,.feedback-dialog").remove();
|
|
|
+ var flag = true;
|
|
|
+ mySwiper = new Swiper('.swiper-container', {
|
|
|
+ loop: true,
|
|
|
+ pagination: '.swiper-pagination',
|
|
|
+ paginationClickable: false,
|
|
|
+ direction: 'vertical',
|
|
|
+ touchMoveStopPropagation: false,
|
|
|
+ virtualTranslate: true,
|
|
|
+ onInit: function(swiper){
|
|
|
+ $("[data-swiper-slide-index='5']>img").attr("src","/wxswordfish/images/guide-6.png");
|
|
|
+ },
|
|
|
+ onSlideChangeStart: function(swiper){
|
|
|
+ if(flag){
|
|
|
+ flag = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var prevSlide = $(swiper.slides[swiper.previousIndex]);
|
|
|
+ prevSlide.addClass("slide-active");
|
|
|
+ var activeSlide = $(swiper.slides[swiper.activeIndex]);
|
|
|
+ if(currentIndex == 0 && swiper.activeIndex == 0){
|
|
|
+ activeSlide.addClass("slide-down");
|
|
|
+ }else{
|
|
|
+ if(currentIndex > swiper.activeIndex){
|
|
|
+ activeSlide.addClass("slide-down");
|
|
|
+ }else if(currentIndex < swiper.activeIndex){
|
|
|
+ activeSlide.addClass("slide-up");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ currentIndex = swiper.activeIndex;
|
|
|
+ if(currentIndex == 7){
|
|
|
+ currentIndex = 0;
|
|
|
+ }
|
|
|
+ if(swiper.isEnd || swiper.activeIndex == 1){
|
|
|
+ $("#QRcode").show();
|
|
|
+ }else{
|
|
|
+ $("#QRcode").hide();
|
|
|
+ }
|
|
|
+ activeSlide.one("webkitAnimationEnd",function(){
|
|
|
+ $(this).removeClass("slide-up").removeClass("slide-down");
|
|
|
+ prevSlide.removeClass("slide-active");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /*
|
|
|
+ var imgHeight = 1159;
|
|
|
+ var imgWidth = 750;
|
|
|
+ var width = document.body.clientWidth;
|
|
|
+ var height = document.body.clientHeight;
|
|
|
+ if(imgWidth > width){
|
|
|
+ var h = width / imgWidth * imgHeight;
|
|
|
+ $(".swiper-slide img").css({width: width,height: h,marginTop: -(h / 2)});
|
|
|
+ }else if(imgHeight > height){
|
|
|
+ $(".swiper-slide img").css({width: height / imgHeight * imgWidth,height: height,marginTop: -(height / 2)});
|
|
|
+ }*/
|
|
|
+});
|
|
|
+function backToIndex(){
|
|
|
+ if(mySwiper == null || mySwiper.activeIndex == 1){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ currentIndex = 1;
|
|
|
+ var prevSlide = $(mySwiper.slides[mySwiper.activeIndex]);
|
|
|
+ prevSlide.addClass("slide-active");
|
|
|
+ var activeSlide = $(mySwiper.slides[1]);
|
|
|
+ activeSlide.addClass("slide-down");
|
|
|
+ activeSlide.one("webkitAnimationEnd",function(){
|
|
|
+ $(this).removeClass("slide-up").removeClass("slide-down");
|
|
|
+ prevSlide.removeClass("slide-active");
|
|
|
+ mySwiper.slideTo(1, 1000, false);
|
|
|
+ $("#QRcode").show();
|
|
|
+ });
|
|
|
+}
|
|
|
</script>
|
|
|
+</body>
|
|
|
</html>
|
