黄卡-手机滑动效果

最新推荐文章于 2023-08-02 15:54:07 发布

置顶樱梦雪苹宝

最新推荐文章于 2023-08-02 15:54:07 发布

阅读量348

点赞数

分类专栏： java js js样式 jquery样式 html

本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/87934519

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

java

27 篇文章 0 订阅

订阅专栏

js样式

20 篇文章 0 订阅

订阅专栏

大家好，前段时间写的手机向左滑动效果：黄卡。备份一下！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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" > 
		<a href="javascript:;" onClick="javascript:history.back(-1);">
			<img height="50" width="50"  src="../img/tubiao/1.png" border="0" title="返回上一页" >
		</a>
	</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; font-weight:bold;"> 
		<div style="font-size: 30px;">
			<p style="font-size: 35px;flood-color: red;" align="center">使用说明： </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:500px;">
		        <div class="slide slide-1">
                	<img  src="../img/yellowcard/1.png" alt="黄卡1"  width="100%" height="outo"/>
                </div>
                <div class="slide slide-2" style="display:none;">
                	<img  src="../img/yellowcard/2.png" alt="黄卡2"  width="100%" height="outo"/>
                </div>
                <div class="slide slide-3" style="display:none;">
                	<img src="../img/yellowcard/3.png" alt="黄卡3"  width="100%" height="outo"/>
                </div>
                <div class="slide slide-4" style="display:none;">
                	<img src="../img/yellowcard/4.png" alt="黄卡4"  width="100%" height="outo"/>
                </div>
		</div>
	</div>
</body>
</html>

樱梦雪苹宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黄卡-手机滑动效果

大家好，前段时间写的手机向左滑动效果：黄卡。备份一下！&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type&quot
复制链接

扫一扫