用jquery mobile 实现幻灯片效果
生活随笔
收集整理的這篇文章主要介紹了
用jquery mobile 实现幻灯片效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求是實現像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 实现幻灯片效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BorderContainer的圆角问题
- 下一篇： python 装饰器入门