求助......

cjiming123 2015-10-23 11:59:40

我想在图片滑到最后一页时,再向下滑就会出现一个录入信息的页面,实在想不出什么办法...拜托



<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>哈哈</title>



<meta name="viewport" content="initial-scale=1">

<link rel="stylesheet" href="<%=basePath%>weixin/clic/activities/resource/css/swiper.min.css">

<script type="text/javascript" src="<%=basePath%>weixin/clic/activities/resource/js/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="<%=basePath%>weixin/clic/activities/resource/js/swiper.min.js"></script>

<style>

* {

	margin: 0;

	padding: 0;

}

  .swiper-container {



  }

  .swiper-wrapper {



    -webkit-perspective: 1200px;



    -moz-perspective: 1200px;



    -ms-perspective: 1200px;



    perspective: 1200px;



  }



  .swiper-slide {





    position: relative;



    -webkit-transform-style: preserve-3d;



    -moz-transform-style: preserve-3d;



    -ms-transform-style: preserve-3d;



    transform-style: preserve-3d;



   background-size:100% auto;



   overflow:hidden;



   text-align:center;



   line-height:300px;



  }



.swiper-slide img{



	max-width:100%;

	height:inherit;



}







</style>



</head>



<body>



<div style="max-width:640px; margin:0 auto;">



<div class="swiper-container">



  <div class="swiper-wrapper">



    <div class="swiper-slide"><img src="<%=basePath%>weixin/clic/activities/resource/images/01.jpg"  ></div>



    <div class="swiper-slide"><img src="<%=basePath%>weixin/clic/activities/resource/images/02.jpg"  ></div>



    <div class="swiper-slide"><img src="<%=basePath%>weixin/clic/activities/resource/images/03.jpg"  ></div>



    <div class="swiper-slide"><img src="<%=basePath%>weixin/clic/activities/resource/images/04.jpg"  ></div>



    <div class="swiper-slide"><img src="<%=basePath%>weixin/clic/activities/resource/images/05.jpg"  ></div>



    <div class="swiper-slide"><img src="<%=basePath%>weixin/clic/activities/resource/images/06.jpg"  ></div>

    

    <div class="swiper-slide">

    <div data-role="page">

	   <form id="" class="" data-ajax="false" action="" method="post">

			   <div id="">

			   <span>姓名:</span><input type="text" data-role="none" name="Name" id="Name" value=""/>

			   </div>

			    <div id="">

			   <span>身份证号:</span><input type="text" data-role="none" name="idNo" id="idNo" value=""/>

			   </div>

			    <div id="">

			   <span>手机号码:</span><input type="text" data-role="none" name="mobile" id="mobile" value=""/>

			   </div>

			   <div style="width: 80%;text-align: center;margin: 10px auto;">

	    		<input type="submit"  data-role="none"  value="提交" />

	    	  </div>

	   </form>



      </div>

</div>

  </div>



</div>



</div>







<script type = "text/javascript">



function fixPagesHeight() {



	$('.swiper-slide,.swiper-container').css({



		height: $(window).height(),



	})



}



$(window).on('resize', function() {



	fixPagesHeight();



})



fixPagesHeight();



var mySwiper = new Swiper('.swiper-container', {



    direction: 'vertical',



	mousewheelControl: true,



	watchSlidesProgress: true,



	onInit: function(swiper) {



		swiper.myactive = 0;



	},



	onProgress: function(swiper) {



		for (var i = 0; i < swiper.slides.length; i++) {



			var slide = swiper.slides[i];



			var progress = slide.progress;



			var translate, boxShadow;



			translate = progress * swiper.height * 0.8;



			scale = 1 - Math.min(Math.abs(progress * 0.2), 1);



			boxShadowOpacity = 0;



			slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';



			if (i == swiper.myactive) {



				es = slide.style;



				es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';



				es.zIndex=0;



			}else{



				es = slide.style;



				es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform ='';



				es.zIndex=1;



			}



		}



	},



	onTransitionEnd: function(swiper, speed) {



		for (var i = 0; i < swiper.slides.length; i++) {



		}



		swiper.myactive = swiper.activeIndex;



	},



	onSetTransition: function(swiper, speed) {



		for (var i = 0; i < swiper.slides.length; i++) {



			//if (i == swiper.myactive) {



				es = swiper.slides[i].style;



				es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';



			//}



		}



	}







});



</script>







</body>



</html>