jquery移动端下拉框

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="easeInExpo">Contact</a>
</div>

As you can see, we will add two “data-” attributes that we’ll use to define the speed and the easing effect that will be associated to the animation of the boxes. Read more about these new custom data attributes of HTML5 on John Resig’s blog: HTML 5 data- Attributes Next, we will define the structure for the content area. There will be a main wrapper with the class “mb_content_wrapper” which contains all the content containers that have the class “mb_content” and a span for the closing cross:

如您所见，我们将添加两个“数据”属性，这些属性将用于定义与盒子动画相关联的速度和缓动效果。 在John Resig的博客上了解有关HTML5的这些新的自定义数据属性的更多信息： HTML 5 data-Attributes接下来，我们将定义内容区域的结构。 将有一个主包装器，其类为“ mb_content_wrapper”，其中包含所有具有“ mb_content”类的内容容器和一个用于结束十字的跨度：

<div id="mb_content_wrapper" class="mb_content_wrapper">
	<span class="mb_close"></span>
	<div class="mb_content">
		<h2>About</h2>
		<div class="mb_content_inner">
			<p>Some text...</p>
		</div>
	</div>
	<div class="mb_content">
		...
	</div>
	<div class="mb_content">
		...
	</div>
	<div class="mb_content">
		...
	</div>
</div>

One of the content elements is going to contain a list of images:

内容元素之一将包含图像列表：

<div class="mb_content_inner">
	<p>...</p>
	<ul id="mb_imagelist" class="mb_imagelist">
		<li><img src="images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li>
		<li><img src="images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li>
		<li>...</li>
	</ul>
	<p>...</p>
</div>

And that’s all the HTML. Now, let’s make it pretty!

以上就是HTML。 现在，让它变得漂亮！

CSS (The CSS)

First, we will embed our reset.css that will reset all the basic styles, and we’ll define some main properties:

首先，我们将嵌入reset.css来重置所有基本样式，并定义一些主要属性：

@import url('reset.css');

body{
	background:#000;
	color:#fff;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
	color:#fff;
	text-decoration:none;
}

Next, we will define the styles for the image that we will use as a background and the overlay pattern:

接下来，我们将定义用作背景的图像样式和覆盖图案：

img.mb_bgimage{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	opacity:0.8;
	z-index:1;
}
.mb_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}

They will both be of fixed positioning and we will give them a low z-index so that they really stay under everything else.

它们都将处于固定位置，我们将为它们提供较低的z索引，以使它们真正处于其他条件之下。

The little boxes will all have a height and width of 50 pixel and they will have absolute positioning:

这些小盒子的高度和宽度均为50像素，并且具有绝对位置：

.mb_pattern div{
	position:absolute;
	width:50px;
	height:50px;
	background:#000;
	z-index:10;
}

The main heading will also be positioned absolutely and we will use a font-face from the collection of Google Web Fonts:

主标题也将绝对定位，我们将使用Google Web字体集合中的字体：

.mb_heading h1{
	position:absolute;
	top:10px;
	left:10px;
	font-size:86px;
	color:#000;
	text-shadow:0px 0px 1px #fff;
	font-family:"Astloch", Arial, sans-serif;
	z-index:4;
}

The menu container will be placed absolutely to the left side of the screen:

菜单容器将绝对放置在屏幕的左侧：

.mb_menu{
	position:absolute;
	top:154px;
	left:0px;
	z-index:11;
}

The link elements inside of the menu container will be black boxes with a neat transition on hover:

菜单容器内部的链接元素将是黑匣子，在悬停时有一个整齐的过渡：

.mb_menu a{
	background-color:#000;
	margin-bottom:2px;
	opacity:0.9;
	display:block;
	width:98px;
	height:98px;
	color:#fff;
	line-height:98px;
	text-align:center;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
	color:#000;
	background-color:#fff;
}

Read more about transitions in the W3 working draft at http://www.w3.org/TR/css3-transitions/ or in this great article on A List Apart by Dan Cederholm: Understanding CSS3 Transitions.

在http://www.w3.org/TR/css3-transitions/上的W3工作草案中，或在Dan Cederholm的A List Apart：理解CSS3过渡上的这篇伟大文章中，可以阅读有关过渡的更多信息。

Next step is to style the content wrapper. We will give it a fixed width and height and a semi-transparent dark background. We’ll hide it initially:

下一步是设置内容包装的样式。 我们将为它提供固定的宽度和高度以及半透明的深色背景。 最初我们将其隐藏：

.mb_content_wrapper{
	background:transparent url(../images/bg_menu.png) repeat top left;
	width:400px;
	height:400px;
	position:absolute;
	top:154px;
	left:200px;
	z-index:4;
	display:none;
}

Why don’t we just use opacity instead of a repeated background image? In some browsers all child elements will inherit that opacity level and we cannot set it higher for them. So, if we really want the inner elements to be completely opaque, it’s safer to use a background image for the surrounding container.

我们为什么不只使用不透明度而不是重复的背景图像？ 在某些浏览器中，所有子元素都将继承该不透明度级别，因此我们无法为其设置更高的透明度。 因此，如果我们确实希望内部元素完全不透明，则将背景图像用于周围的容器会更安全。

The little closing span will have the following style:

小收尾跨度将具有以下样式：

span.mb_close{
	position:absolute;
	top:10px;
	right:10px;
	width:11px;
	height:12px;
	cursor:pointer;
	background:transparent url(../images/close.png) no-repeat top left;
	opacity:0.8;
}
span.mb_close:hover{
	opacity:1.0;
}

The content area is going to have some padding and we’ll hide it:

内容区域将有一些填充，我们将其隐藏：

.mb_content{
	padding:30px;
	display:none;
}

The heading will have some background image for the stripe underline:

标题将具有条纹下划线的一些背景图像：

.mb_content h2{
	font-family:"Astloch";
	text-shadow:0px 0px 1px #fff;
	font-size:42px;
	background:transparent url(../images/line.png) repeat-x bottom left;
	padding:0px 0px 5px 0px;
	margin-bottom:10px;
}

The following container is for the resting content and it will be this element that we will apply the custom scrollbar to:

以下容器用于放置静止的内容，正是这个元素，我们将自定义滚动条应用于：

.mb_content_inner{
	line-height:24px;
	height:268px;
	outline: none;
}
.mb_content_inner p{
	padding:5px 0px;
}

For the thumbnail list in the “Work” section, we will have the following style:

对于“工作”部分中的缩略图列表，我们将采用以下样式：

ul.mb_imagelist li{
	float:left;
	margin:2px;
	cursor:pointer;
}
ul.mb_imagelist li img{
	display:block;
	opacity:0.3;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-transition: all 0.5s ease-in-out;
}
ul.mb_imagelist li img:hover{
	opacity:1.0;
}

As you can see, we will add some transition to it, making the thumbnail become opaque smoothly.

如您所见，我们将为其添加一些过渡，使缩略图平滑地变得不透明。

And that’s all the main style. (You can check out the styling for the form and the footer in the style.css file.)

这就是所有的主要风格。 (您可以在style.css文件中签出表单和页脚的样式。)

Let’s add some brio to the whole thing!

让我们在整个过程中添加一些奶油蛋卷！

JavaScript (The JavaScript)

So the main idea is to create those little boxes and scatter them around a restricted area and rotate them. When we click on a menu item, we’ll make those boxes animate to a certain position and form the main content container. Then we’ll show the container and the respective content. When clicking on the closing span, we want to make the boxes disperse again. In the “Works” content, we will have some thumbnails that will show a background image when clicking on them.

因此，主要思想是创建这些小盒子并将它们散布在受限区域内并旋转它们。 当我们单击菜单项时，我们将使这些框动画到某个位置并形成主要内容容器。 然后，我们将显示容器和相应的内容。 单击关闭范围时，我们要使框再次分散。 在“作品”内容中，我们将提供一些缩略图，当单击它们时将显示背景图像。

So, let’s start by caching some elements:

因此，让我们开始缓存一些元素：

var $menu				= $('#mb_menu'),
	$menuItems			= $menu.children('a'),
	$mbWrapper			= $('#mb_content_wrapper'),
	$mbClose			= $mbWrapper.children('.mb_close'),
	$mbContentItems		= $mbWrapper.children('.mb_content'),
	$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
	$mbPattern			= $('#mb_pattern'),
	$works				= $('#mb_imagelist > li'),
	$mb_bgimage			= $('#mb_background > img'),

Next, we will define the “Menu” function:

接下来，我们将定义“菜单”功能：

Menu		 		= (function(){
  ...
})();

/*
call the init method of Menu
 */
Menu.init();

So, inside of our “Menu” function, we’ll define our main functionality, starting with a method to initialize the whole thing:

因此，在“菜单”功能内，我们将定义主要功能，首先要初始化整个事情的方法：

var init			= function() {
	preloadImages();
	initPlugins();
	initPattern();
	initEventsHandler();
},

We want to preload the images that we have in the “Work” content. The data attribute in the thumbnails tells us, which images we need:

我们要预加载“工作”内容中的图像。 缩略图中的data属性告诉我们我们需要哪些图像：

preloadImages		= function() {
	$works.each(function(i) {
		$('
   

    ').attr('src' , $(this).children('img').data('bgimg'));
	});
},

   

The jScollPane plugin needs to be initialized, and we’ll apply the custom scroll to the inner content area of the content div when we call this:

jScollPane插件需要初始化，我们将在调用此方法时将自定义滚动应用于content div的内部内容区域：

initPlugins			= function() {
	$mbContentInnerItems.jScrollPane({
		verticalDragMinHeight: 40,
		verticalDragMaxHeight: 40
	});
},

“initPattern” will randomly place 16 boxes (div elements) into a restricted area. We restrict that area by restricting the top and left values to a certain range:

“ initPattern”将随机将16个框(div元素)放置到限制区域中。 我们通过将顶部和左侧的值限制在一定范围内来限制该区域：

initPattern			= function() {
	for(var i = 0; i < 16 ; ++i) {
		//opacity, random top, left and angle
		var o		= 0.1,
		t		= Math.floor(Math.random()*196) + 5, // between 5 and 200
		l		= Math.floor(Math.random()*696) + 5, // between 5 and 700
		a		= Math.floor(Math.random()*101) - 50; // between -50 and 50
				
		$el		= $('
   

    ').css({
			opacity			: o,
			top				: t + 'px',
			left			: l + 'px'
		});
			
		if (!$.browser.msie)
			$el.transform({'rotate'	: a + 'deg'});
			
		$el.appendTo($mbPattern);
	}
	$mbPattern.children().draggable(); //just for fun
},


    
When we close the content area we want to move the little boxes back, scattered around randomly again:

    
Let’s handle the events:

    
initEventsHandler		= function() {
	/*
		click a link in the menu
	 */
	$menuItems.bind('click', function(e) {
		var $this	= $(this),
		pos		= $this.index(),
		speed	= $this.data('speed'),
		easing	= $this.data('easing');
		//if an item is not yet shown
		if(!$menu.data('open')){
			//if current animating return
			if($menu.data('moving')) return false;
			$menu.data('moving', true);
			$.when(openItem(pos, speed, easing)).done(function(){
				$menu.data({
					open	: true,
					moving	: false
				});
				showContentItem(pos);
				$mbPattern.children().fadeOut(500);
			});
		}
		else
			showContentItem(pos);
		return false;
	});
		
	/*
		click close makes the boxes animate to the top of the page
	 */
	$mbClose.bind('click', function(e) {
		$menu.data('open', false);
		/*
			if we would want to show the default image when we close:
			changeBGImage('images/default.jpg');
		 */
		$mbPattern.children().fadeIn(500, function() {
			$mbContentItems.hide();
			$mbWrapper.hide();
		});
			
		disperse();
		return false;
	});
		
	/*
		click an image from "Works" content item,
		displays the image on the background
	 */
	$works.bind('click', function(e) {
		var source	= $(this).children('img').data('bgimg');
		changeBGImage(source);
		return false;
	});
			
},


    
When we click on one of the thumbnails in the “Work” section, we want the background image to change. So we define:

    
This shows a content item when there is already one shown:

    
showContentItem			= function(pos) {
	$mbContentItems.hide();
	$mbWrapper.show();
	$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},


    
“openItem” moves the boxes from the top to the center of the page, and shows the respective content item:

    
And that’s it! We really hope you enjoyed the tutorial and find it useful! 

   
						
						

							Tagged with: boxes CSS3 jQuery menu Navigation template website						
						

initPattern			= function() {
	for(var i = 0; i < 16 ; ++i) {
		//opacity, random top, left and angle
		var o		= 0.1,
		t		= Math.floor(Math.random()*196) + 5, // between 5 and 200
		l		= Math.floor(Math.random()*696) + 5, // between 5 and 700
		a		= Math.floor(Math.random()*101) - 50; // between -50 and 50
				
		$el		= $('
   

    ').css({
			opacity			: o,
			top				: t + 'px',
			left			: l + 'px'
		});
			
		if (!$.browser.msie)
			$el.transform({'rotate'	: a + 'deg'});
			
		$el.appendTo($mbPattern);
	}
	$mbPattern.children().draggable(); //just for fun
},


    
When we close the content area we want to move the little boxes back, scattered around randomly again:

    
Let’s handle the events:

    
initEventsHandler		= function() {
	/*
		click a link in the menu
	 */
	$menuItems.bind('click', function(e) {
		var $this	= $(this),
		pos		= $this.index(),
		speed	= $this.data('speed'),
		easing	= $this.data('easing');
		//if an item is not yet shown
		if(!$menu.data('open')){
			//if current animating return
			if($menu.data('moving')) return false;
			$menu.data('moving', true);
			$.when(openItem(pos, speed, easing)).done(function(){
				$menu.data({
					open	: true,
					moving	: false
				});
				showContentItem(pos);
				$mbPattern.children().fadeOut(500);
			});
		}
		else
			showContentItem(pos);
		return false;
	});
		
	/*
		click close makes the boxes animate to the top of the page
	 */
	$mbClose.bind('click', function(e) {
		$menu.data('open', false);
		/*
			if we would want to show the default image when we close:
			changeBGImage('images/default.jpg');
		 */
		$mbPattern.children().fadeIn(500, function() {
			$mbContentItems.hide();
			$mbWrapper.hide();
		});
			
		disperse();
		return false;
	});
		
	/*
		click an image from "Works" content item,
		displays the image on the background
	 */
	$works.bind('click', function(e) {
		var source	= $(this).children('img').data('bgimg');
		changeBGImage(source);
		return false;
	});
			
},


    
When we click on one of the thumbnails in the “Work” section, we want the background image to change. So we define:

    
This shows a content item when there is already one shown:

    
showContentItem			= function(pos) {
	$mbContentItems.hide();
	$mbWrapper.show();
	$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},


    
“openItem” moves the boxes from the top to the center of the page, and shows the respective content item:

    
And that’s it! We really hope you enjoyed the tutorial and find it useful! 

   
						
						

							Tagged with: boxes CSS3 jQuery menu Navigation template website						
						

翻译自: https://tympanus.net/codrops/2011/03/28/moving-boxes-content/

jquery移动端下拉框