jquery 仿手机屏幕切换界面效果

最新推荐文章于 2021-10-29 15:01:29 发布

转载最新推荐文章于 2021-10-29 15:01:29 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ft-Pavilion/p/5398507.html

文章标签：

#javascript #xhtml #移动开发 #ViewUI

本文介绍了一个使用jQuery插件实现的类似手机屏幕触摸切换界面的效果。该插件可以创建带有菜单的窗口来模仿iPhone或Android设备的主屏幕触摸体验。支持手指滑动图标，并且能够进行水平或垂直方向的滑动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery仿手机屏幕触摸切换界面效果</title>
<meta name="description" content="jquery Promptu-menu菜单插件创建一个带有菜单的窗口来创建iPhone或Android的主屏幕触摸效果体验。可以用手指滑动图标、支持水平滑动和垂直滑动。jquery下载。" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.promptu-menu.js"></script>
<script type="text/javascript">
    $(function () {
 
        $('ul.promptu-menu01').promptumenu({
            width: 272,   //自定义滚屏宽度
            height: 385, //自定义滚屏搞定
            rows: 3,     //自定义滚屏排列行数
            columns: 2,  //自定义滚屏单行图标个数
            direction: 'horizontal', //水平拖动效果
            pages: false  //是否分页显示
        });
 
        $('ul.promptu-menu02').promptumenu({
            width: 272,   //自定义滚屏宽度
            height: 385, //自定义滚屏搞定
            rows: 4,     //自定义滚屏排列行数
            columns: 2,  //自定义滚屏单行图标个数
            direction: 'vertical', //水平拖动效果
            pages: true //是否分页显示
        });
 
        $('ul.promptu-menu03').promptumenu({
            width: 500,   //自定义滚屏宽度
            height: 500, //自定义滚屏搞定
            rows: 3,     //自定义滚屏排列行数
            columns: 4,  //自定义滚屏单行图标个数
            direction: 'horizontal', //水平拖动效果
            pages: true  //是否分页显示
        });
 
        $('ul.promptu-menu04').promptumenu({
            width: 500,   //自定义滚屏宽度
            height: 500, //自定义滚屏搞定
            rows: 3,     //自定义滚屏排列行数
            columns: 4,  //自定义滚屏单行图标个数
            direction: 'vertical', //水平拖动效果
            pages: false  //是否分页显示
        });
 
    });
</script>
 
 
</head>
<body>
 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.demo{width:880px;margin:0 auto;box-shadow:2px 2px 20px rgba(0,0,0,0.5);-webkit-box-shadow:2px 2px 20px rgba(0,0,0,0.5);-moz-box-shadow: 2px 2px 20px rgba(0,0,0,0.5);padding:20px 40px;}
.demo h1{font-size:16px;color:#3366cc;height:24px;line-height:24px;margin:20px 0;}
.demo h2{padding:0 20px;font-size:14px;margin:10px 0;}
.demo h3{font-size:14px;line-height:24px;margin:10px 0;}
.demo p{line-height:24px;}
.ipadbox{background:url(images/ipad.png) no-repeat;width:593px;height:682px;overflow:hidden;}
.ipadbox .promptumenu_window{margin:50px 0 0 47px;}
.iphonebox{background:url(images/iphone.png) no-repeat;width:320px;height:610px;overflow:hidden;}
.iphonebox .promptumenu_window{margin:86px 0 0 25px;}
/* 主要元素 */
.promptumenu_nav{z-index:5;position:absolute;bottom:5px;left:50%;margin-right:-50%;}
.promptumenu_window{cursor:url(images/hand.ico), move;background:#EEE;position: