پنهان کردن عناصر صفحه در php
در مطالب قبلی ، مطلبی با موضوع تغییر رنگ پس زمینه داشتیم. در این مطلب ، که به درخواست یکی از کاربران قرار داده شده است ، ما قرار است پس زمینه ای ایجاد کنیم که تصویر آن هر چند ثانیه ، عوض شود.
نکته: ما در این کدَک تغییرات را بر روی تگ body اعمال می کنیم. اگر شما بخواهید ، می توانید این تغییرات را روی هر المنتی از صفحه ایجاد کنید. یعنی تغییر پس زمینه برای تمام قسمت های صفحه قابل استفاده است.
برای این کار ابتدا ما باید با استفاده از Css یک مقدار پیشفرض برای پس زمینه مشخص کنیم.
<<<code>>>
<style>
body{
background: url('http://up.toolstheme.ir/up/persian/toolstheme/logo.png') no-repeat center #333;
height: 100%;
}
</style>
<<</code>>>
رنگ سبز: آدرس تصویر را در آن مشخص کرده ایم. شما می توانید به جای آدرس وارد شده ، آدرس هر تصویر دیگری را وارد کنید.
رنگ آبی: نشان می دهد که تصویر پس زمینه نباید در طول و عرض تکرار شود.
رنگ بنفش: موقعیت قرارگیری تصویر را نشان می دهد (مرکز)
رنگ قرمز: رنگ قسمت های خالی را مشخص می کند. ما در اینجا از رنگی نزدیک به مشکی استفاده کرده ایم. شما می توانید با استفاده از لینک زیر ، کد رنگ مورد نظر خود را بسازید. (البته می توانید از نام یک سری رنگ ها مثل red , blue , yellow , ... هم استفاده کنید.)
حالا بعد از این که ما حالت پیشفرض را ایجاد کردیم باید با استفاده از javascript این امکان را ایجاد کنیم که بعد از هر چند ثانیه ، تصویر عوض شود. ما یه کم از جی کوئری هم برای تغییر تصویر پس زمینه کمک می گیریم.
این هم کد جاوا اسکریپت:
<<<code>>>
<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script> <!-- کتابخانه ی جی کوئری -->
<script>
(function(){
var images = new Array( 'http://up.toolstheme.ir/up/persian/toolstheme/logo.png' , 'http://up.toolstheme.ir/view/56302/jquery-animation-functions.jpg' , 'http://up.toolstheme.ir/view/236441/online-web-code-browser-2.jpg' , 'http://up.toolstheme.ir/view/236604/loading-style.jpg' , 'http://up.toolstheme.ir/view/153676/movable-background-by-jquery.jpg' ),
nowImage = 0, // متغییری برای تشخیص این که تصویر چندم است
time = 1000,
inter = setInterval( function(){ // تابعی برای ایجاد چرخه ی همیشگی انجام یک تابع
nowImage++;
if( nowImage >= images.length ) nowImage = 0;
$('body').css( 'backgroundImage' , 'url("'+images[nowImage]+'")' );
} , time );
})();
</script>
<<</code>>>
رنگ قرمز: من در این قسمت یک متغیر آرایه ای ایجاد کرده ام که آدرس چند تصویر در آن وجود دارد. شما می توانید ، آدرس ها را به هر آدرسی که می خواهید تغییر دهید و تعداد این تصاویر را تا بی نهایت بیشتر کنید.
رنگ آبی: این متغیر مشخص می کند که هر چند میلی ثانیه یک بار تصویر عوض شود.
رنگ سبز: اگر بعد از یک واحد اضافه کردن مقدار nowImage این متغیر بزرگتر مساوی با تعداد تصاویر ما شود ، میزان آن ریست می شود (دوباره صفر می شود)
رنگ بنفش: انتخاب عضوی از آرایه ی تصاویر با عدد nowImage
پیشنهاد های تمرینی من:
1- حالا که طرز ایجاد یک پس زمینه با تغییر تصویر بعد از چند میلی ثانیه را یاد گرفتید ، حتما می توانید یک اسلایدر ساده ایجاد کنید. لازم نیست امکانات پیچیده ای برای آن ایجاد کنید. اگر تازه کار هستید ، فقط سعی کنید یک بلاک با تگ div ایجاد کنید و این استایل ها و اسکریپت ها را برای آن تعریف کنید. بهتر است از آی دی (id) یا کلاس (class) استفاده کنید.
2- سعی کنید کاری کنید که بعد از اتمام یک دور از این نمایش تصویر ، دیگر تصاویر از سر شروع نشوند. می توانید از تابع clearInterval استفاده کنید.
3- هر تغییری که به ذهنتان می رسد را ایجاد کنید و اگر به مشکلی برخوردید حتما در بخش نظرات بپرسید.
کدک انیمیشن لینک های داخلی صفحه 
بررسی خط به خط متن با جاوا اسکریپت 
کدک جعبه ی اطلاعات مطلب 
کد بررسی وجود یک آدرس وب در php 
آموزش استفاده از افزونه جاوا اسکریپت wow 
اجرای انیمیشن css با حرکت اسکرول 
کدَک ایجاد آیکون کوچک سایت (favicon) 
کدَک نمایان و مخفی کردن شی 
کدَک غیر فعال کردن انتخاب متن صفحه با css 
کدَک پس زمینه ی چشمک زن 
کدَک نمایش پیغام با ورود به سایت 
کدَک تغییر پس زمینه ی سایت و وبلاگ 
قالب ورود و عضویت در سایت به سبک ویندوز 10
قالب تماس با ما ریسپانسیو برای رزبلاگ
قالب تفریحی گرافیکی برای رزبلاگ
آموزش سریع جاوا اسکریپت - دریافت ورودی از فرم
ایجاد خودکار لینک داخلی عناوین صفحه
انواع سیستم عامل و ماشین
تعریف سیستم عامل
آموزش سریع جاوا اسکریپت - دریافت ورودی
آموزش سریع جاوا اسکریپت - شروع کد نویسی
آموزش سریع جاوا اسکریپت - مفاهیم پایه
قالب سایت ابر دانلود برای رزبلاگ
بنر تلگرام جذب اعضا full css
قالب حرفه ای گرافیکی برای رزبلاگ
آموزش ایجاد چرخش مداوم با css
معرفی چند باگ معروف و پچ آن ها در php
آموزش ساخت تصویر تصادفی امنیتی در php
آموزش C# قسمت پنجم | انواع عملگر ها
قالب واکنشگرای حرفه ای برای رزبلاگ 
پنجره ی شناور باز شونده جدید
شیوه ی بزرگنمايي تصوير با انيميشن زيبا + امکان اشتراک گذاری تصویر
نقشه ی سایت چیست؟
قالب 2 برای رزبلاگ - سه ستونه طرح زیبای رنگارنگ
ابزار رتبه سنج الکسا
شیوه ی تصویر - طرح تاریک
آشنایی با هوش مصنوعی
رنگ درخشان تصادفی نام کاربری اعضای انجمن رزبلاگ
ابزار نمایش پیغام تبریک نوروز 1394 در گوشه صفحه
آموزش C# قسمت سوم