【first day】学会用不同方法实现页面自动翻动

最新推荐文章于 2022-05-11 23:24:41 发布

季诗筱

最新推荐文章于 2022-05-11 23:24:41 发布

阅读量705

点赞数 1

分类专栏：学习收获 js库

本文链接：https://blog.csdn.net/XIAOZHUXMEN/article/details/50719169

版权

学习收获同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

js库

4 篇文章 0 订阅

订阅专栏

今天学会了使用3种方法实现前后页的自动翻动

1、使用mobilebone.js框架

参考作者页面http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/，学习了框架的使用方法。

主要是用了框架中的page out flip类，用法很简单，为每一页添加一个id，让a标签的 href属性等于下一页的id即可。

<!DOCTYPE html>
<html>
<head>
	<title>页面滑动效果</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link type="text/css" href="css/mobilebone.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
	<div id="page1" class="page out flip" data-title="1">
		<p>Page1</p>
		<a href="#page2" class="btn"><span>next</span></a>
	</div>
	<div id="page2" class="page out flip" data-title="2">
		<p>Page2</p>
		<a href="#page3" class="btn"><span>next</span></a>
	</div>
	<div id="page3" class="page out flip" data-title="3">
		<p>Page3</p>
		<a href="#page4" class="btn"><span>next</span></a>
	</div>
	<div id="page4" class="page out flip" data-title="4">
		<p>Page4</p>
		<a href="#page1"><span>back</span></a>
	</div>
	<script type="text/javascript" src="js/mobilebone.js"></script>
	
</body>
</html>

2、用jquery完成。

虽然框架很好用，但是还是希望能够自己写代码实现一下，这时候，想到了最近学的jQuery里面的hide()和show()。于是，就基于jQuery自己写了一下代码，也能实现。只是也出现了一些问题。最开始，写的js代码是注释掉的那部分，可以看到，非常啰嗦，代码非常重复，于是又重新修改，写了一个遍历来实现，这样代码非常简洁。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>不用框架的页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/myStyle.css">
	<link rel="stylesheet" type="text/css" href="css/mobilebone.css">
</head>
<body>
	<div id="home" class="page">
		<P>This is the home page.</P>
		<a class="btn" id="home-btn" data-action="go-page" data-page="home" data-next-page="page1">Next Page</a>
	</div>
	<div id="page1" class="page out">
		<P>This is the first page.</P>
		<a class="btn" id="page1-btn" data-action="go-page" data-page="page1" data-next-page="page2">Next Page</a>		
	</div>
	<div id="page2" class="page out">
		<P>This is the second page.</P>		
		<a class="btn" id="page2-btn" data-action="go-page" data-page="page2" data-next-page="page3">Next Page</a>
	</div>
	<div id="page3" class="page out">
		<P>This is the third page.</P>
		<a class="btn" id="page3-btn" data-action="go-page" data-page="page3" data-next-page="home">Back</a>		
	</div>
		<div id="page4" class="page out">
		<P>This is the last page.</P>
		<a class="btn" id="page3-btn" data-action="go-page" data-page="page3" data-next-page="home">Back</a>		
	</div>

	
	<script type="text/javascript" src="js/jquery-2.2.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			$(".btn").each(function() {
    		$(this).bind("click", function() {
    			var currentPage = $(this).attr("data-page");
    			var nextPage = $(this).attr("data-next-page");
    			$("#" + currentPage).hide();
    			$("#" + nextPage).show();
    			/*
    			$(this).parent().hide();
    			$(this).parent().next().show(); */
        		
   				 });
				});


   			 		


			/*$("#home-btn").click(function(){

				$("#home").css("display","none");
				$("#page1").css("display","block")
			});
			$("#page1-btn").click(function(){
				$("#page1").hide();
				$("#page2").show();
			});
			$("#page2-btn").click(function(){
				$("#page2").hide();
				$("#page3").show();
			});
			$("#page3-btn").click(function(){
				$("#page3").hide();
				$("#home").show();
			});*/

		});
	</script>
</body>
</html>

季诗筱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【first day】学会用不同方法实现页面自动翻动

今天学会了使用3种方法实现前后页的自动翻动1、使用mobilebone.js框架参考作者页面http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/，学习了框架的使用方法。主要是用了框架中的page out flip类，用法很简单，为每一页添加一个id，让a标签的 href属性等于下一页
复制链接

扫一扫