جابجایی محل نمایش محتوا با استفاده از جی کوئری
جابجایی محل نمایش محتوا با استفاده از جی کوئری

جابجایی محل نمایش محتوا با استفاده از جی کوئری

ما در این آموزش به شما نحوه جابجایی محل نمایش محتوا ها با استفاده از جی کوئری را خواهیم داد.ما برای ملموس شدن آموزش یک صفحه ساده با استفاده از تصاویر زیبا را برایتان ایجاد خواهیم کرد.

برای مشاهده لینک وارد شود

خوب ما کار را شروع می کنیم.

ابتدا ما یک تصویر برای پس زمینه صفحه خود انتخاب می کنیم و با استفاده از کد زیر آن را در صفحه نمایش می دهیم.

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

 سپس از تگ بعدی برای استفاده از جعبه های کوچکی که بطور تصادفی در بالا ی صفحه ایجاد کرده ایم استفاده می کنیم.ما از ۱۶ جعبه کوچک استفاده خواهیمک کرد

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

منوها و سر صفحه دارای ساختار HTML زیر خواهد بود.

<div class="mb_heading">
			<h1>    جملات ناب زندگی</h1>
		</div>
		<div id="mb_menu" class="mb_menu">
			<a href="#" data-speed="1000" data-easing="easeOutBack">    هشدار</a>
			<a href="#" data-speed="1000" data-easing="easeInExpo"    >قوانین طلایی</a>
			<a href="#" data-speed="1000" data-easing="easeOutBack"   >جملات قشنگ</a>
			<a href="#" data-speed="1000" data-easing="easeInExpo">    ارتباط با من</a>
		</div>

سپس به هریک از منوها محتوا های آزمایشی را اضافه می کنیم.

<div id="mb_content_wrapper" class="mb_content_wrapper">
	<span class="mb_close"></span>
	<div class="mb_content">
		<h2>درباره من</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>

یکی از منوها شامل تصاویری می باشد که شما میتوانید در زیر بخشی از کد مربوط به آن را مشاهده کنید.

<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>

خوب حالا به سراغ کدهای CSS می رویم.

در ابتدا ما با استفاده از redet.css تمام استایل های اعمال شده پیش فرض را پاک می کنیم و استایل های خودمان را به آن اضافه کنیم

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

سپس ما استایل مربوط به تصویر زمینه و الگوی پوشش  پس زمینه را می نویسیم

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;
}

جعبه های کوچک دارای طول و عرض ۵۰ پیکسلی و موقعیت متغییر هستند

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

همچنین هدر اصلی دارای موقعیت متغییر بوده و ما علاوه بر فونت دلخواه از مجموعه فونت های گوگل نیز استفاده کرده ایم

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

همچنین منوها به صورت متغییر در سمت راست تصویر قرار گرفته اند

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

محتواهای صفحه در داخل یک جعبه سیاه متحرک قرار خواهند داشت که با کلیک روی هر منو نمایش داده خواهند شد که ما استایل آن را در زیر برایتان آورده ایم

.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;
}

استایل بعدی مربوط به محل نمایش محتوا ها می باشد

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

استایل مربوط به علامت مربوط به بستن در زیر قرار دارد

span.mb_close{
	position:absolute;
	top:10px;
	left: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;
}

عناوین محتوا ها دارای یک زیر خط بریده بریده هستند که دارای استایل زیر است

.mb_content h2{
	font-family:"BYekan" ,'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;
}

ما برای بخش “قوانین طلایی” استایل زیر را داریم

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;
}

خوب حالا به سراغ کدهای مربوط به جاوااسکریپت می رویم.ایده اصلی این بخش این است که ما تعدادی جعبه را بصورت تصادفی با چرخش های تصادفی در بالای صفحه قرار می دهیم وآنها با کلیک کردن بر روی هر منو در یک جا جمع شده و محتوا ها را نمایش می دهند و با زدن دکمه ضربدر بالا آن دوباره به تکه های کوچک تبدیل شده و به بالای صفحه منتقل میشوند.

کار را با ذخیره کردن برخی از عناصر آغاز می کنیم.

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'),

سپس تابع مربوط به منوها را تعریف می کنیم.

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

/*
فراخوانی متد init  منو
 */
Menu.init();

در کنار تابع مربوط به منو،ما تابع اصلی را تعریف می کنیم.

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

ما در بخش “قوانین طلایی” نیاز داریم تا تصاویری را بارگذاری کنیم.این تابع به ما کمک می کند تا بفهمیم کدام تصویر مورد نیاز است

preloadImages= function() {
	$works.each(function(i) {
	    $('').attr('src' , $(this).children('img').data('bgimg'));
	});
},

سپس با استفاده از تابع زیر محل قرار گیری ۱۶ جعبه کوچک را تعیین می کنیم.

initPattern = function() {
 for(var i = 0; i < 16 ; ++i) {
 //انتخاب تصادفی مقدار شفافیت،بالا،راست و زاویه
 var o = 0.1,
 t = Math.floor(Math.random()*196) + 5, // بین ۵ و ۲۰۰
 l = Math.floor(Math.random()*696) + 5, // بین ۵ و ۷۰۰
 a = Math.floor(Math.random()*101) - 50; // بین -۵۰ و ۵۰
 
 $el = $('<div>').css({
 opacity : o,
 top : t + 'px',
 right : l + 'px'
 });
 
 if (!$.browser.msie)
 $el.transform({'rotate' : a + 'deg'});
 
 $el.appendTo($mbPattern);
 }
 $mbPattern.children().draggable(); //فقط برای سرگرمی
 },

این تابع نیز هنگام کلیک روی علامت بستن جعبه ها را به جای اولیه خود بر میگرداند.

disperse 		= function() {
						$mbPattern.children().each(function(i) {
							//انتخاب تصادفی مقدار شفافیت،بالا،راست و زاویه
							var o			= ۰.۱,
							t			= Math.floor(Math.random()*196) + 5, // بین ۵ و ۲۰۰
							l			= Math.floor(Math.random()*696) + 5, // بین ۵ و ۷۰۰
							a			= Math.floor(Math.random()*101) - 50; // بین -۵۰ و ۵۰
							$el			= $(this),
							param		= {
								width	: '۵۰px',
								height	: '۵۰px',
								opacity	: o,
								top		: t + 'px',
								right	: l + 'px'
							};
									
							if (!$.browser.msie)
								param.rotate	= a + 'deg';
									
							$el.animate(param, 1000, 'easeOutExpo');
						});
					},

تابع زیر عناصر را دستکاری می کند.

initEventsHandler	= function() {
						/*
              کلیک بر روی لینک ها ی منو
						 */
						$menuItems.bind('click', function(e) {
							var $this	= $(this),
							pos		= $this.index(),
							speed	= $this.data('speed'),
							easing	= $this.data('easing');
							//اگر آیتمی هنوز نمایش داده نشده است
							if(!$menu.data('open')){
								//اگر انیمیشن فعلی باز گردانده شود
								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;
						});
							
						/*
              با کلیک بر روی علامت بستن بالای جهیه ها ،آنها به بالای صفحه منتقل میشوند
						 */
						$mbClose.bind('click', function(e) {
							$menu.data('open', false);
							/*
                اگر ما بخواهیم تا تصویر پیش فرض هنگام بستن نمایش داده شود:
								را تغییر می دهیمBGImage('images/default.jpg');
							 */
							$mbPattern.children().fadeIn(500, function() {
								$mbContentItems.hide();
								$mbWrapper.hide();
							});
								
							disperse();
							return false;
						});
							
						/*
							با کلیک بر روی "قوانین طلایی"تصاویر در پس زمینه نمایش داده خواهند شد
						 */
						$works.bind('click', function(e) {
							var source	= $(this).children('img').data('bgimg');
							changeBGImage(source);
							return false;
						});
								
					},

ما هنگامی که روی تصاویر موجود در داخل “قوانین طلایی” کلیک می کنیم تصویر پس زمینه تغییر می کند.این کار توسط تابع زیر انجام می شود.

changeBGImage		= function(img) {
            //اگر یکی در حال بازگشت دادن باشد
						if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
							return false;
									
						var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
						$itemImage.insertBefore($mb_bgimage);
							
						$mb_bgimage.fadeOut(1000, function() {
							$(this).remove();
							$mb_bgimage = $itemImage;
						});
						$itemImage.fadeIn(1000);
					},

تابع زیر جعبه ها را از بالای صفحه به وسط صفحه برای نمایش محتوا ها منتقل می کند.

openItem= function(pos, speed, easing) {
	     return $.Deferred(
		function(dfd) {
		    $mbPattern.children().each(function(i) {
			var $el	= $(this),
				   param= {
						width	: '۱۰۰px',
						height	: '۱۰۰px',
						top	: ۱۵۴ + ۱۰۰ * Math.floor(i/4),
						right	: ۲۰۰ + ۱۰۰ * (i%4),
						opacity	: ۲۰
					    };
										
			if (!$.browser.msie)
				param.rotate	= '0deg';
										
				$el.animate(param, speed, easing, dfd.resolve);
					});
			}
		).promise();
	};

خوب کار ما دیگه تموم شد.

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


سه + 5 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>