|
|
@@ -0,0 +1,112 @@
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<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="/wxswordfish/share.js"></script>
|
|
|
+<script src="/swiper/swiper.min.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/wxswordfish/images/share-cj.jpg" alt="Cinque Terre">
|
|
|
+ </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-6.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="history.go(-1);">
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<img id="QRcode" style="position:absolute;z-index: 2;" src="/front/weixinshare/{{.T.shareid}}" >
|
|
|
+<script type="text/javascript">
|
|
|
+$(function(){
|
|
|
+ initShare({{.T.signature}},{{.T.shareid}});
|
|
|
+ var width = $(window).width();
|
|
|
+ var height = $(window).height();
|
|
|
+ var defaultHeight = 480;
|
|
|
+ var max = 750;
|
|
|
+ if(width > max){
|
|
|
+ width = max;
|
|
|
+ }
|
|
|
+ width = width*0.48;
|
|
|
+ var top = 380;
|
|
|
+ if(height > defaultHeight){
|
|
|
+ top = 380 / defaultHeight * height;
|
|
|
+ }
|
|
|
+ $("#QRcode").css({"width":width,"top": top-width,"left":"50%","margin-left": -(width/2)});
|
|
|
+ $(".bottom-toolbar,.feedback-dialog").remove();
|
|
|
+ var currentIndex = 0;
|
|
|
+ var flag = true;
|
|
|
+ var mySwiper = new Swiper('.swiper-container', {
|
|
|
+ loop: true,
|
|
|
+ pagination: '.swiper-pagination',
|
|
|
+ paginationClickable: false,
|
|
|
+ direction: 'vertical',
|
|
|
+ touchMoveStopPropagation: false,
|
|
|
+ virtualTranslate: true,
|
|
|
+ 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 > swiper.activeIndex){
|
|
|
+ activeSlide.addClass("slide-down");
|
|
|
+ }else if(currentIndex < swiper.activeIndex){
|
|
|
+ activeSlide.addClass("slide-up");
|
|
|
+ }
|
|
|
+ currentIndex = swiper.activeIndex;
|
|
|
+ activeSlide.one("webkitAnimationEnd",function(){
|
|
|
+ $(this).removeClass("slide-up").removeClass("slide-down");
|
|
|
+ prevSlide.removeClass("slide-active");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onSliderMove: function(swiper, event){
|
|
|
+ if(swiper.isBeginning){
|
|
|
+ $("#QRcode").show();
|
|
|
+ }else{
|
|
|
+ $("#QRcode").hide();
|
|
|
+ }
|
|
|
+ if(swiper.isEnd) {
|
|
|
+ currentIndex = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /*
|
|
|
+ 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)});
|
|
|
+ }*/
|
|
|
+});
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
