您的位置：首页 > 其它

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

2016-02-22 21:42 323 查看
今天学会了使用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航