jquery移动端下拉框_使用jQuery移动框内容

jquery移动端下拉框

View demo 查看演示 Download Source 下载源

Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.

今天，我们将使用jQuery创建一个包含一些非常漂亮的动画的网站模板。 想法是在站点顶部周围散布一些小盒子，单击菜单项时，这些盒子会动画以形成主要内容区域。 我们将使用一些不同的动画效果，这些效果将作为选项添加到菜单项中。

The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. We will also use the jQuery 2d transformation plugin by Grady in order to rotate the little boxes while we animate them, and the the jQuery Easing Plugin for some spice.

内容区域将自定义滚动，我们将使用Kevin Luck的真棒jScrollPane插件。 我们还将使用Grady的jQuery 2d转换插件，以便在对小盒子进行动画处理时旋转它们，并使用jQuery Easing插件来添加一些香料。

The beautiful photos are by Jin. Visit his Flickr photostream at http://www.flickr.com/photos/jinthai/

美丽的照片是金所为。 访问他的Flickr照片流，网址为http://www.flickr.com/photos/jinthai/

So, let’s start!

所以，让我们开始吧！

标记 (The Markup)

First, we want to place the background image with the grid overlay:

首先，我们要在背景图像上放置网格覆盖：

<div id="mb_background" class="mb_background">
	<img class="mb_bgimage" src="images/default.jpg" alt="Background"/>
	<div class="mb_overlay"></div>
</div>

The next div element will be used to add the little boxes with their random position and rotation degree

下一个div元素将用于添加带有随机位置和旋转度的小盒子

<div id="mb_pattern" class="mb_pattern"></div>

We will place a total of 16 boxes (div elements) into this container. The menu and the heading will have the following HTML stucture:

我们将总共16个盒子(div元素)放入此容器中。 菜单和标题将具有以下HTML结构：

<div class="mb_heading">
	<h1>Lack of Color</h1>
</div>

<div id="mb_menu" class="mb_menu">
	<a href="#" data-speed="600" data-easing="easeOutBack">About</a>
	<a href="#" data-speed="1000" data-easing="easeInExpo">Work</a>
	<a href="#" data-speed="600" data-easing="easeOutBack">Media</a>
	<a href="#" data-speed="1000" data-easing&#