用jquery mobile 实现幻灯片效果
2024-05-18 04:43:41
需求是实现像chrome那样，左右切换app的页面效果。
代码如下
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Multi-page template</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><style type="text/css">.thumbnail{float: left;width: 64;border: 1px solid #999;margin: 0 15px 15px 0;padding: 5px;}</style>
</head>
<body><!-- Start of first page: #one --><div data-role="page" id="one"><div data-role="content"><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/1.png" alt="" width="64" height="64" /><br>icon 1</div><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/2.png" alt="" width="64" height="64" /><br>icon 2</div><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/3-icon.png" alt="" width="64"height="64" /><br>icon 3</div><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/4.png" alt="" width="64" height="64" /><br>icon 4</div><a href="#two" data-role="button" data-transition="slide" data-inline="true" data-corners="true"data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"><div class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-r ui-icon-shadow "></div></a></div><!-- /content --></div><!-- /page one --><!-- Start of second page: #two --><div data-role="page" id="two"><div data-role="content"><h2>Two</h2><div data-role="content"><a href="#one" data-role="button" data-transition="slide" data-inline="true" data-corners="true"data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"><div class="ui-btn ui-btn-icon-left ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-l ui-icon-shadow "></div></a><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/5.png" alt="" width="64" height="64" /><br>icon 5</div><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/6.png" alt="" width="64" height="64" /><br>icon 6</div><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/7-icon.png" alt="" width="64"height="64" /><br>icon 7</div><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/8.png" alt="" width="64" height="64" /><br>icon 8</div><a href="#three" data-role="button" data-transition="slide" data-inline="true" data-corners="true"data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"><div class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-r ui-icon-shadow "></div></a></div><!-- /content --></div><!-- /page three --></div><!-- Start of second page: #three --><div data-role="page" id="three"><div data-role="content"><h2>three</h2><a href="#two" data-role="button" data-transition="slide" data-inline="true" data-corners="true"data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn ui-btn-icon-left ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-l ui-icon-shadow "></span></a><br class="clearboth"><div class="thumbnail"><img src="http://www.cnblogs.com/Content/Images/webstore/9.png" alt="" width="64" height="64" /><br/>icon 9</div></div><!-- /content --></div><!-- /page three -->
</body>
</html>转载于:https://www.cnblogs.com/zhangjiang/archive/2012/05/15/2501750.html
用jquery mobile 实现幻灯片效果相关推荐
- Jquery Mobile左右滑动效果
为什么80%的码农都做不了架构师?>>> 首先,页面里有两个<div data-role="page">,捡重点的写是,省掉其中的header和 ...
- jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...
1.页面切换(data-transition) 地址:http://api.jquerymobile.com/data-attribute/ data-transition fade | f ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表
如 Kayo 之前所写的文章 <使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 内容格式> 中所述,这次介绍的是 jQuery M ...
- Jquery封装幻灯片效果
前几天 在我同事博客里面看到一篇幻灯片 所以觉得用Jqeury写幻灯片也并不是很难 就是和我在博客里面的tab自动切换的原理是一模一样的 只是形式不同而已!所以今天也写了一个常见的幻灯片效果 用Jqu ...
- html图片自动切换的幻灯片效果的,jQuery实现可自动切换的幻灯片效果插件代码...
jQuery实现可自动切换的幻灯片效果插件代码 1. 用户快速划过按钮时不触发鼠标事件; 2. 鼠标划入当前图片按钮时不闪烁; 3. 简化并优化代码. 使用方法就不详述了, 请参见源码及相关注释 $. ...
- php实现自动播放ppt,JavaScript_jquery实现简单的自动播放幻灯片效果，本文实例讲述了jquery实现简单 - phpStudy...
jquery实现简单的自动播放幻灯片效果 本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: Pretty cool eh? This s ...
- 10个用jQuery实现图片幻灯片/画廊效果和源码
jQuery作为一个应用最广泛的JavaScript框架之一,第三方开发者不断地为其开发出新的 jQuery 插件应用,从而使得jQuery可以帮助用户实现各种各样不同寻常的 Web 效果,作为最常使 ...
- jQuery Mobile 所有data-*选项，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
- 移动web前端框架一、jQuery Mobile
简述:jQuery Mobile是 jQuery发布的针对手机和平板设备.经过触控优化的Web框架.它基于jQuery,在不同移动设备平台上可提供统一的用户界面.该框架基于渐近增强技术,并利用HTML ...
最新文章
- python中的module
- 如何重置linux,linux如何重置服务器
- 8位数控分频器的设计_eda设计数控分频器（实现2~16）分频
- hexo+githup搭建属于自己的博客
- pytorch安装换源ubuntu_ubuntu 安装pytorch问题
- 国产WEB漏洞测试平台——MST
- 【论文阅读】A Gentle Introduction to Graph Neural Networks [图神经网络入门]（5）
- 数据说话，88000条数据绘制北京市地图
- 【最大流】牛棚安排（jzoj 1259）
- windows 2003负载均衡故障切换
- oppo的sd卡在哪里打开_oppo的sd卡在哪里打开
- Linux中的Total Video Converter——超级音视频转换软件：Winff
- Web服务器Nginx多方位优化策略
- 解决Win7下JMF读取摄像头错误
- 安利一个黑科技！还有两款电视盒子播影神器，放假了应该用得到~
- CSDN博客代码片黑色背景及代码高亮设置
- 记住密码的实现的2个方案
- 【白话科普】从“熊猫烧香”聊聊计算机病毒
- 开发8年的老Android才知道，赶紧收藏备战金三银四！
- 微信开放平台 安卓Android 应用签名生成