求助......

cjiming123 cjiming123 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
我想在图片滑到最后一页时,再向下滑就会出现一个录入信息的页面,实在想不出什么办法...拜托


<%@ 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>





...全文

相关推荐

大学生心理求助态度与心理求助行为的关系研究.docx

【大学生心理求助态度与心理求助行为的关系研究】这篇研究报告探讨了大学生在面对心理困扰时,其心理求助态度与实际求助行为之间的联系。

科技之佳

网络游戏-基于lora网络的求助杆及求助系统.zip

**求助系统设计**:详述求助系统的架构,包括硬件(如求助杆)、软件(信号处理和传输)、用户界面和后台管理系统等组成部分。5.

programyg

基于ZigBee技术的门铃及老人求助系统

《基于ZigBee技术的智能门铃及老人求助系统》随着科技的进步,智能家居产品逐渐进入人们的生活,其中,基于ZigBee技术的门铃及老人求助系统以其人性化的功能设计,解决了传统门铃及老人求助的局限性。

weixin_38716519

校园应急管理数字求助对讲系统.doc

二、对讲求助点的分布1.2.1 校园对讲求助:对讲求助点应覆盖校园的主要区域,如教学楼、图书馆、宿舍区、操场、食堂等人员密集场所。这些地点设置的求助按钮应易于识别和操作,确保在紧急情况下能被迅速触发。

evemoney

通信与网络中的地铁站内无线乘客求助系统设计方案

"通信与网络中的地铁站内无线乘客求助系统设计方案"地铁站内无线乘客求助系统是现代城市交通中不可或缺的一部分,它旨在提供快速、可靠的乘客求助服务,同时简化安装和维护过程。针对这一需求,设计了一种基于

weixin_38707240
评论 3
收藏 已收藏
分享
返回顶部
cjiming123
Web 开发 81,108 成员 341,721 内容