曼陀罗训练datura-card.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>曼陀罗</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet" type="text/css" href="../css/yellow.css" charset="utf-8">
<script src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//页面加载执行
window.onload=function(){
$("#m_mask").show();//显示遮罩层
closebt.onclick=function(){ //点击确定，隐藏遮罩层。
$("#m_mask").hide();
$("#i_show").show();
}
}
//touchmove:/手指在屏幕上滑动式触发
$(document).ready(function (){
var flag =1;//标识第几张图片
var sum = $("div").children("div").children("div").length;//获取div下元素个数
console.log("sum = "+sum);
//左右滑动
var startX, moveEndX, X;//Y:上下滑动
$( "body" ).on( "touchstart", function ( e ) {//touchstart://手指放到屏幕上时触发
startX = e.originalEvent.changedTouches[ 0 ].pageX;
});
$( "body" ).on( "touchend", function ( e ) {//touchend://手指离开屏幕时触发
moveEndX = e.originalEvent.changedTouches[ 0 ].pageX;
X = moveEndX - startX;
if ( X < 0 ) {//向右滑动
if(flag>=sum){
flag =1;
$(".slide-"+sum).hide();//隐藏
$(".slide-"+flag).show();//显示
}else{
$(".slide-"+flag).hide();//隐藏
flag++;
$(".slide-"+flag).show();//隐藏
}
}
});
});
</script>
</head>
<body>
<div align="left" >
<img height="50" width="50" src="../img/tubiao/1.png" border="0" title="返回上一页" style="background-repeat: no-repeat" onClick="javascript：history.back(-1);">
<div style="position:absolute;z-index: 10;left: 150px;top: -20px;">
<p align="center" style="font-size: 30px;color: black;font-weight:bold;">曼陀罗</p>
</div>
</div>
<!--遮罩层显示-->
<div id="m_mask" align="center" style="top:0%; left:0%; padding:16px; border:3px solid orange; background-color:wheat;position:absolute;z-index:1002; overflow:auto; max-width: 100%;height:100%;display: block;">
<div style="font-size: 30px;flood-color: black;">
<p align="center" style="font-size: 35px;flood-color: red;">使用说明： </p>
<br />
<p>1：曼陀罗：</p>
<p>盯着图片看30秒，闭上眼睛，眼前将出现相应三基色的颜色及形状</p>
<p>2：每天任务：</p>
<p>每天练习 1 到 2 分钟。</p>
<a href="javascript：void(0)" id="closebt" style="flood-color: blue;" >确定 </a>
</div>
</div>
<div id="i_show" style="display: none;">
<div style="height: 50px;border-radius:100px;font-size:1rem;">
<p align="center" style="color:red;font-weight:bold;font-size:26px">
向左滑动，切换图片
</p>
</div>
<!--图片显示 -->
<div class="m-slider" align="center" style="max-width: 100%;height:100%;" >
<div class="slide-1" >
<img src="../img/mantuoluo/5.png" >
</div>
<div class="slide-2" style="display:none;">
<img src="../img/mantuoluo/6.png" >
</div>
<div class="slide-3" style="display:none;">
<img src="../img/mantuoluo/7.png" >
</div>
<div class="slide-4" style="display:none;">
<img src="../img/mantuoluo/8.png" >
</div>
<div class="slide-5" style="display:none;">
<img src="../img/mantuoluo/9.png" >
</div>
<div class="slide-6" style="display:none;">
<img src="../img/mantuoluo/10.png" >
</div>
</div>
</div>
</body>
</html>
如果觉得《HTML5-右脑开发项目-基础训练-曼陀罗训练datura-card.html》对你有帮助，请点赞、收藏，并留下你的观点哦！
