Android App开发超实用实例 | jQuery Mobile在Android手机上自定义过渡动画的方向

原创 TiAmoZhang 2022-11-04

246

jQuery Mobile是jQuery 在手机上和平板设备上的版本，jQuery Mobile不仅包含jQuery核心库，而且提供了一个完整统一的jQuery移动UI框架，支持全球主流的移动平台；jQuery Mobile将“写得更少、做得更多”这一理念提升到了新的层次。下面这个实例演示了使用jQuery Mobile在Android手机上自定义过渡动画的方向。此实例在Android Studio开发环境中编写且运行在Android手机上。
01、实例功能
此实例主要通过设置a元素的data-direction属性，实现自定义(水平滑动)过渡动画的方向。当实例运行之后，单击“下一图书”按钮，将按照从右向左的方向滑动到下一页面(图书封面图像)；单击“上一图书”按钮，将按照从左向右的方向滑动到上一页面(图书封面图像)，效果分别如图1(a)和图1(b)所示。

■ 图1
02、实现代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <style>
img{width:100%;height:70%;position:absolute;top:120px;left:10px;}
#myPage1 a,#myPage2 a,#myPage3 a{font-size:1.1em;width:134px}
</style>
</head>
<body>
<div data-role="page" id="myPage1">
    <div data-role="header" >
        <!--设置data-transition属性为slide，以水平滑动(从右向左)切换页面-->
        <!--设置data-direction属性为reverse，以反向滑动(从左向右)切换页面-->
        <!--href属性用于指定切换显示的页面-->
        <a href="#myPage3" data-transition="slide" data-direction="reverse">上一图书</a>
        <a href="#myPage2" data-transition="slide" >下一图书</a></div>
    <div data-role="main"><img src="image\myimage1.jpg"/></div></div>
<div data-role="page" id="myPage2">
    <div data-role="header" style="height:60px">
        <a href="#myPage1" data-transition="slide"  data-direction="reverse">上一图书</a>
        <a href="#myPage3" data-transition="slide"  >下一图书</a></div>
    <div data-role="main"><img src="image\myimage2.jpg"/></div></div>
<div data-role="page" id="myPage3">
    <div data-role="header" style="height:60px">
        <a href="#myPage2" data-transition="slide"  data-direction="reverse">上一图书</a>
        <a href="#myPage1" data-transition="slide"  >下一图书</a></div>
    <div data-role="main"><img src="image\myimage3.jpg"/></div></div>
</body></html>
复制

03、代码说明

上面这段代码在MyCode＼MySampleG29＼app＼src＼main＼assets＼myPage.html文件中。在这段代码中，如果仅在a元素中设置data-transition=“slide”，则表示按照从右向左的方向滑动页面；如果同时在a元素中设置data-direction=“reverse”，则表示按照从左向右的方向滑动页面。
04、补充说明
在测试代码时，必须保持网络畅通。
05、源代码
https://www.jianguoyun.com/p/DXIrAiEQ9of0ChiS3uIEIAA

墨力计划安卓移动开发

「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」

关注作者

TA的专栏

微信小程序

收录2篇内容

java

收录0篇内容

Android App开发超实用实例 | jQuery Mobile在Android手机上自定义过渡动画的方向

评论