0
我的页面html文件中有三个页面。我在按钮上点击页面现在我正在改变页面的转换，但当页面被改变时，页面转换之间会出现空白区域，并且还会产生混乱效果，我添加了所有javascript帮助图书馆应用了所有方法，但不工作。小时和小时的尝试都是徒劳的。另一个问题是，当我改变我的页面，似乎onPageChange页面的布局设置一次又一次地改变。任何身体可以帮助我解决这个问题？页面转换不能正常工作
流程是：
1 ------壹（主页---第一次加载页）此页面有两个按钮和背景图像
2页------两（此页有一些输入型图像以及可以追溯到主页按钮）
3 ------三版（此页也有一定的div和一个按钮，返回到主页页）
<meta content="width=device-width,initial-scale=0.50, user-scalable=no"
name="viewport">
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div id='home' >
<input type="image" id='button_1' src="images/image_1.png" onclick="first_function();"/>
<input type="image" id='button_2' src="images/image_2.png" onclick="second_function();" />
</div>
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two">
<div id="fullpage">
<img id="player" src="./images/rect.png"
style="margin-left: 65px" />
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 65px;"
onclick="myFunction('1','1');" id="1" value=" " name=""/>
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 30px;"
onclick="myFunction('2','1');" id="2" value=" " name=""/>
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 50px;"
onclick="myFunction('3','1'); " id="3" value=" " name=""/>
<div id="home-btn">
<input type="image" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 210px;"
src="images/home.png"
value=" " name="home" onClick="home_function();"/>
</div>
</div>
</div><!-- /page two -->
<!-- Start of second page: #three -->
<div data-role="page" id="three">
<div style='display: block; background-image: url(./images/imagee1.jpg);' >
<button class="stage1"
style="width: 280px; height: 130px; margin-top: 25px; margin-left: 40px; background: transparent;"
onclick="audio('11')" ></button>
<button class="stage1"
style="width: 280px; height: 340px; margin-top: 20px; margin-left: 960px; background: transparent;"
onclick="audio('22')" ></button>
<button id="home" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 255px; background: url('./images/home.png');" onClick="home_function();"></button>
<button class="stage1"
style="width: 220px; height: 290px; margin-top: 435px; margin-left: 40px; background: transparent;"
onclick="audio('33')"></button>
<button class="stage1"
style="width: 210px; height: 290px; margin-top: 435px; margin-left: 300px; background: transparent;"
onclick="audio('44')" ></button>
<button class="stage1"
style="width: 240px; height: 290px; margin-top: 435px; margin-left: 550px; background: transparent;"
onclick="audio('55')"></button>
<button class="stage1"
style="width: 415px; height: 290px; margin-top: 435px; margin-left: 830px; background: transparent;"
onclick="audio('66')"></button>
</div>
</div>
Javascript:
<script>
function second_function()
{
$.mobile.changePage('#two',{transition: 'slide',allowSamePageTransition: true});
}
function home_function()
{
$.mobile.changePage('#one',{transition: 'slide',reverse : true,allowSamePageTransition: true});
}
function second_function()
{
$.mobile.changePage('#three',{transition: 'slide',allowSamePageTransition: true});
}
</script>
我想你使用jQuery Mobile的，不是吗？ – mutex36
是的，我使用jQuery Mobile的 – User42590