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

<!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:relative;}
.promptumenu_nav a{cursor:pointer;width:20px;height:20px;text-indent:-9999px;outline:none;background:url(images/pagelink.png) 0 -20px no-repeat;display:block;float:left;position:relative;left:-50%;margin:0 2px;}
.promptumenu_nav a.active{background-position:0 0;}
</style>

	<div class="demo">

		<h1>jquery Promptu-menu菜单插件</h1>

		<h3>它是做什么呢？</h3>

		<p>这个插件的目的是创建一个带有菜单的窗口来创建iPhone或类似的Android体验。</p>

		<p>你必须熟悉iPhone或Android主屏幕概念。你有窗口。有各种实用的图标。如果图标的数量超过菜单上的空间，创建了新的一页。通过刷卡用手指，你可以看到下一个页面，并有互动的图标。</p>

		<p>这个插件不完全一样。所有你必须做的是提供元素的无序列表，你要使用的用户，产品或其他类型的数据列表。然后调用只需$（‘ul.my_list）promptumenu的插件promptumenu（）。</p>

		<p>是什么使这个插件特别的是事实，我试图保持动态的经验，你的iPhone或Android刷卡时......因此，如果用户打开一个机器人，iPhone，iPad或iPod这样的移动设备的页面，他将能够用手指轻扫。还使用鼠标时，插件需要与您移动鼠标的势头在心中......因此，清单中移动与惯性，你松开鼠标后..</p>	

		<h3>用法示例</h3>
<pre style="padding:10px;margin:0;background:#eee;">
$(‘ul‘).promptumenu({
	width:500,   //自定义滚屏宽度
	height:500, //自定义滚屏搞定
	rows:3,     //自定义滚屏排列行数
	columns:4,  //自定义滚屏单行图标个数
	direction:‘vertical‘, //水平拖动效果
	pages:false  //是否分页显示
});
</pre>

		<h2>iphone 图标水平拖动</h2>
		<div class="iphonebox">
			<ul class="promptu-menu01">
				<li><a target="_blank" ><img src="images/Books.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Browser.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calculator.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calendar.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Camera.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Clock.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Contacts.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Gallery.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/GMail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Mail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Maps.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Market.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Movie Studio.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Music.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Phone.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Settings.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Talk.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/YouTube.png" alt="" /></a></li>
			</ul>
		</div><!--iphonebox end-->

		<h2>iphone 图标垂直拖动</h2>
		<div class="iphonebox">
			<ul class="promptu-menu02">
				<li><a target="_blank" ><img src="images/Books.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Browser.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calculator.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calendar.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Camera.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Clock.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Contacts.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Gallery.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/GMail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Mail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Maps.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Market.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Movie Studio.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Music.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Phone.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Settings.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Talk.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/YouTube.png" alt="" /></a></li>
			</ul>
		</div><!--iphonebox end-->

		<h2>ipad 图标水平拖动</h2>
		<div class="ipadbox">
			<ul class="promptu-menu03">
				<li><a target="_blank" ><img src="images/Books.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Browser.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calculator.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calendar.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Camera.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Clock.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Contacts.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Gallery.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/GMail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Mail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Maps.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Market.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Movie Studio.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Music.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Phone.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Settings.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Talk.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/YouTube.png" alt="" /></a></li>
			</ul>
		</div><!--ipadbox end-->

		<h2>ipad 图标垂直拖动</h2>
		<div class="ipadbox">
			<ul class="promptu-menu04">
				<li><a target="_blank" ><img src="images/Books.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Browser.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calculator.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Calendar.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Camera.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Clock.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Contacts.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Gallery.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/GMail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Mail.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Maps.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Market.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Movie Studio.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Music.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Phone.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Settings.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/Talk.png" alt="" /></a></li>
				<li><a target="_blank" ><img src="images/YouTube.png" alt="" /></a></li>
			</ul>
		</div><!--ipadbox end-->
时间： 2024-10-12 07:47:26

jquery 仿手机屏幕切换界面效果的相关文章

高仿手机QQ5.0界面框架

这次的手机QQ更新从客观的角度来说,还是很好的,更加简约,控件也自定义了,界面也有了大的改动,但是最主要的框架还是它的左右滑动机制.让我们先来看看它的效果. 可以看到它是从左到右的一个滑动方法菜单的方式,最主要的就是这个控件类的实现吧.其他的感觉都没什么太大的问题,下面我就来看看这种效果应该怎么来实现. 第一拿到东西先分析这个效果是怎么出来的.我仔细的看了一下主要应该注意这几点. 1:菜单的出现有个放大效果而且伴随着一个apha的效果 2:主要的内容面板上面就是一个缩放的动画 3:可以看到这个菜

基于jQuery仿Flash横向切换焦点图

给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自动切换图片,也可以点击导航按钮来切换至指定的图片.该jQuery焦点图使用非常简单,而且切换效果也相当流畅.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="slide-holder"> <div id="slide-runn

Android开发之仿手机卫士悬浮窗效果

基本的实现原理,这种桌面悬浮窗的效果很类似与Widget,但是它比Widget要灵活的多.主要是通过WindowManager这个类来实现的,调用这个类的addView方法用于添加一个悬浮窗,updateViewLayout方法用于更新悬浮窗的参数,removeView用于移除悬浮窗.其中悬浮窗的参数这里有必要详细说明一下. WindowManager.LayoutParams这个类用于提供悬浮窗所需的参数,其中有几个经常会用到的变量: type值用于确定悬浮窗的类型,一般设为2002,表示在所

Android成长日记-使用ViewFlipper实现屏幕切换动画效果

(一) ViewFlipper介绍 Android系统自带的一个多页面管理控件,它可以实现子界面的自动切换 (二) 为ViewFlipper加入View 1. 静态导入:在Layout布局文件中直接导入(不推荐*不灵活) 2. 动态导入:addView()方法 Eg:flipper=(ViewFipper)findViewById(R.id.flipper); Flipper.addView(getImageView(R.drawable.pic)) (三) ViewFlipper的常用方法 a

jQuery实现手机竖直手风琴效果

效果:http://hovertree.com/texiao/jquery/65/ 效果图: 代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

android自定义View实现图片上传进度显示（仿手机QQ上传效果）

首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看一下我实现的效果: 1.效果已经看见了,下面我们来实现它.首先我创建一个android工程ProgressImageView.然后我们重写ImageView控件,创建ProcessImageView类代码如下: package com.example.processimageview; import android.annotation.SuppressLint; import android.content.Context;

仿QQ锁屏界面效果

现在新版的QQ Android客户端有个新功能,就是在锁屏界面也可以接收消息,并且接收到的消息可以显示在锁屏界面,双击之后可以进入QQ,下面简单实现这个功能. 当然正式项目中的运用还是非常复杂的,这仅仅是一个简单的Demo,可以作为参考. 直接上代码: MainActivity.java public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState)

Android的Activity屏幕切换动画(一)-左右滑动切换

这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity增加了一个方法: public void overridePendingTransition (int enterAnim, int exitAnim) 其中: enterAnim 定义A

Android的Activity屏幕切换动画-左右滑动切换

. --> 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity增加了一个方法: public void overridePendingTransition (int enterAnim, int exitAnim) 其中: enterAnim 定义Activity进入屏幕时的动画 exitAnim 定义Activity退出屏幕时的动画 overri