سلام
من خیلی وقته پست جدید ندادم و مطالبم بعد از سری آموزشهای طراحی وردپرس دیگه بسیار کم شدند و ۲ دلیل بیشتر نداره!
اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت jQuery.com آخرین ورژن این کتابخانه ی فوق العاده رو دانلود کنید و باز هم لازم نیست که بگم باید این فایل js رو در صفحه وبتون باید وارد کنید(که همه ی اینها در دموی انتهای مطلب انجام شده و به راحتی میتونید تقلب کنید!)
ما میخواهیم یک کار ساده اما زیبا کنیم و اون اینه که یک عکس رو تبدیل کنیم به یک عکس دیگه (با حرکت اشاره گر موس به روی تصویر) برای این کار میتونیم از css و خاصیت background و با استفاده از یک hover ساده انجام بدیم اما ما میخواهیم که این تبدیل به صورت آرام و به قول اجنبی ها fade و animated باشه! خوب همونطور که گفتم اول جی کوئری رو وارد میکنیم:
<script type=’text/javascript’ src=’http://yoursite.com/jquery.js’></script>
توی این کد فرض شده که فایل جی کوئری در پوشه ی اصلی سایت آپلود شده مثل تمام زمان هایی که میخواهیم از جی کوئری استفاده کنیم باید یک یا چند تابع هم داشته باشیم:
<script>
$(document).ready(function(){
$("img.a").hover( function() {
$(this).stop().animate({"opacity": "0"}, "slow");
}, function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});</script>
و استایل (سی اس اس) هم:
<style>
div.fadehover { position: relative; }
img.a { position: absolute; left: 0; top: 0; z-index: 10; }
img.b { position: absolute; left: 0; top: 0; }
</style>
و این هم کد اصلی صفحه ( کد html )
<div class=”fadehover”>
<img src=”cbavota-bw.jpg” alt=”” class=”a” />
<img src=”cbavota.jpg” alt=”” class=”b” />
</div>
توضیحات واضحات!
یک سری توضیحات کوچیک اما کلیدی میدم بقیش رو خودتون بفهمین دیگه!
در کد اول (تابع جی کوئری) به خط سوم دقت کنید:
$(“img.a”).hover()
ما اینجا تگ img رو که class اون a هست هدف قرار دادیم و opacity هم شفافیت هست که عددی بین ۰ و ۱ میتونه باشه slow هم در زبان انگلیسی به معنای آرام میباشد!! یعنی آروم fade میشه!
استایل هم نیاز به توضیح نداره(حتمن توی سری آموزش طراحی وردپرس یاد گرفتین یه چیزایی)
در کد آخر( html) هم ما دوتا عکس _که آدرسشون رو باید دقت کنین درست وارد کنید_ قرار دادیم که در صفحه اصلیمون قرار بگیرن
برای دریافت دمو روی لینک زیر کلیک کنید
jQuery fade effect demo (2281 دانلود ها)
منبع،تقریبن!:bavotasan.com
از حموم اومدی بیرون؟!
آخه موهات داره میره بالا!!!
بابا فشنه مثلن!
مثلن
تقریبن
واقعن
نمره املات تو دبستان چند بود؟
اینا چیه نوشتی ؟
درستش ایناست پسرم یاد بگیر :
مثلا
تقریبا
واقعا
یکی هزار بار از روشون بنویس تا یاد بگیر. بازم بود البته دیگه نگفتم :دی
اینجوری بهتره به نظرم، وبلاگ هم مال خودمه کسی نمیتونه غلط املایی بگیره ازم، هرکاری بخوام میکنم:))
حالا این هیچی، اما در مورد «فشن» باید بگم برات که این فشن حاصل کار بهره‌کشایی هست که یکی از صفاتشون این کلمست: «خشن»!
یابد اعتراف کنم تقریبن نصف حرفهای شما رو نصفه میفهمم، یا اگرم بفهمم شک میکنم که منظوره شما بوده باشه! :دی
سلام
خوبی
می گم الان شغلت چیه روش خط زدی
:)) درس میخونم(مثلن)
تنیس یاد میدم(مثلن تر!) بیشتر یاد میگیرم!
طراحی میکنم(سایت و وبلاگ و …)
امری باشه:دی؟
سلام من دوست دارم یاد بگیرم دارم از اول شروع می کنم
شاید تا وقتی که کامل، به قولی قشنگ، در حد ِ بنز! یاد بگیرم نیاز به کمک پیدا کنم:D
خیلی خوبه آموزش ها
۲۰
موفق باشی! :دی
راستی نمی دونم چرا ورد پرس ورژن نیو که این جا گذاشتین دان لود نمی شود!؟
اگه از سایت انگلیش ِ ورد پرس دانلودش کنم فرقی نمی کنه؟
آخه اون خیلی سریع دانلود شد، متعجب شدم که متفاوت بوده باشه
شما برین سایت wordpress.org فارسیش هست میتونین از سایت wp-persian هم دریافت کنین آخرین ورژن رو
سیاوش دنبال animal farm هستی؟! «قلعه حیوانات خودمون دیگه؟! «جورج اورول»؟
یا اینکه کتاب دیگه‌ای هست؟
بله این همون قلعه حیوانات خودتونه! و من انگلیسیش رو گرفتم اما صفحه ی اول رو که خوندم پشیمون شدم! الان فارسیش رو باید بخرم، یا شایدم الان ای بوکشو دانلود کنم :دی آره الان دانلودش میکنم!!
فوق العادست!
البته بعد ممکن بخاطر جریان‌های بعد از انتخابات یک مقدار در تحلیلش به خطا بری اما بازهم ایراد نداره.
بعدش حتما «۱۹۸۴» جورج اورول رو هم بخون.
چشم حتمن! این یکم سخته چون دارم تو یه صفحه ی ۳ اینچی میخونمش، امیدوارم این یکی نسخه ی کاغذیش گیرم بیاد :دی
برای خرید کتاب برو اینجا
http://www.adinebook.com/gp/search/707-2029062-5361550?search-alias=books&field-keywords=%D9%82%D9%84%D8%B9%D9%87+%D8%AD%D9%8A%D9%88%D8%A7%D9%86%D8%A7%D8%AA&Go.x=0&Go.y=0&Go=Go
فقط یادت باشه ترجمه امیرشاهی رو بگیری
برای خرید کارتونش برو اینجا
http://shop.iranget.com/?p=105
برای دانلودش هم برو اینجا
http://www.4shared.com/file/27613366/928b622f/_737_.html
خیلی ممنون، واقعن بعضی وقتها که نا امید میشم از این وبلاگ و به بیهوده بودنش فکر میکنم یاد شما و دوستان دیگه میافتم و دوباره جون میگیرم! یه دنیا ممنون، خیلی ارزش داره برام اینکه برام وقت گذاشتین و زحمت کشیدین، ممنون علی جان، موفق باشی
اگه تو اینارو بگی من و امثال من که مدیونتیم تو یاد گرفتن وردپرس باید چی بگیم؟
برادر من همین پرگاری که الان درست کردم از صدقه سر تو هستشا.
اگه نبودی که معلوم نبود الان برا همین وبلاگم چقدر پیاده شده بودم.
شایدم هنوز مجبور بودم عین خرچنگ ایستاتیک کار کنم!!!!
خیلی آقایی.
اینم وظیفمونه داداش.
خواهش میکنم، وظیفه بود، باعث خوشحالیمه، خیلی ممنون شرمنده کردین 😡
نظرمو وردپرس خورد!(؟!)
اتفاقن الان دارم دنبالش میگردم! دو بار خوندمش اما الان زدم رو جفنگ (روم به دیوار!!) بعد تو لیست جفنگها هم نیست :)) شما از کجا فهمیدی؟:دی
پیدا شد :دی
پست آموزشی خوبی بود
آقا دمت گرم کارت حرف نداره