سلام
من خیلی وقته پست جدید ندادم و مطالبم بعد از سری آموزشهای طراحی وردپرس دیگه بسیار کم شدند و 2 دلیل بیشتر نداره!
اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت 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 هم شفافیت هست که عددی بین 0 و 1 میتونه باشه slow هم در زبان انگلیسی به معنای آرام میباشد!! یعنی آروم fade میشه!
استایل هم نیاز به توضیح نداره(حتمن توی سری آموزش طراحی وردپرس یاد گرفتین یه چیزایی)
در کد آخر( html) هم ما دوتا عکس _که آدرسشون رو باید دقت کنین درست وارد کنید_ قرار دادیم که در صفحه اصلیمون قرار بگیرن
برای دریافت دمو روی لینک زیر کلیک کنید
jQuery fade effect demo (2765 دانلود ها )
منبع،تقریبن!:bavotasan.com
از حموم اومدي بيرون؟!
آخه موهات داره ميره بالا!!!
بابا فشنه مثلن!
مثلن
تقریبن
واقعن
نمره املات تو دبستان چند بود؟
اینا چیه نوشتی ؟
درستش ایناست پسرم یاد بگیر :
مثلا
تقریبا
واقعا
یکی هزار بار از روشون بنویس تا یاد بگیر. بازم بود البته دیگه نگفتم :دی
اینجوری بهتره به نظرم، وبلاگ هم مال خودمه کسی نمیتونه غلط املایی بگیره ازم، هرکاری بخوام میکنم:))
حالا اين هيچي، اما در مورد «فشن» بايد بگم برات كه اين فشن حاصل كار بهره‌كشايي هست كه يكي از صفاتشون اين كلمست: «خشن»!
يابد اعتراف کنم تقريبن نصف حرفهاي شما رو نصفه ميفهمم، يا اگرم بفهمم شک ميکنم که منظوره شما بوده باشه! :دي
سلام
خوبي
مي گم الان شغلت چيه روش خط زدي
:)) درس ميخونم(مثلن)
تنيس ياد ميدم(مثلن تر!) بيشتر ياد ميگيرم!
طراحي ميکنم(سايت و وبلاگ و …)
امري باشه:دي؟
سلام من دوست دارم ياد بگيرم دارم از اول شروع مي کنم
شايد تا وقتي که کامل، به قولي قشنگ، در حد ِ بنز! ياد بگيرم نياز به کمک پيدا کنم:D
خيلي خوبه آموزش ها
20
موفق باشي! :دي
راستي نمي دونم چرا ورد پرس ورژن نيو که اين جا گذاشتين دان لود نمي شود!؟
اگه از سايت انگليش ِ ورد پرس دانلودش کنم فرقي نمي کنه؟
آخه اون خيلي سريع دانلود شد، متعجب شدم که متفاوت بوده باشه
شما برين سايت wordpress.org فارسيش هست ميتونين از سايت wp-persian هم دريافت کنين آخرين ورژن رو
سياوش دنبال animal farm هستي؟! «قلعه حيوانات خودمون ديگه؟! «جورج اورول»؟
يا اينكه كتاب ديگه‌اي هست؟
بله اين همون قلعه حيوانات خودتونه! و من انگليسيش رو گرفتم اما صفحه ي اول رو که خوندم پشيمون شدم! الان فارسيش رو بايد بخرم، يا شايدم الان اي بوکشو دانلود کنم :دي آره الان دانلودش ميکنم!!
فوق العادست!
البته بعد ممكن بخاطر جريان‌هاي بعد از انتخابات يك مقدار در تحليلش به خطا بري اما بازهم ايراد نداره.
بعدش حتما «1984» جورج اورول رو هم بخون.
چشم حتمن! اين يکم سخته چون دارم تو يه صفحه ي 3 اينچي ميخونمش، اميدوارم اين يکي نسخه ي کاغذيش گيرم بياد :دي
براي خريد كتاب برو اينجا
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
خيلي ممنون، واقعن بعضي وقتها که نا اميد ميشم از اين وبلاگ و به بيهوده بودنش فکر ميکنم ياد شما و دوستان ديگه ميافتم و دوباره جون ميگيرم! يه دنيا ممنون، خيلي ارزش داره برام اينکه برام وقت گذاشتين و زحمت کشيدين، ممنون علي جان، موفق باشي
اگه تو اينارو بگي من و امثال من كه مديونتيم تو ياد گرفتن وردپرس بايد چي بگيم؟
برادر من همين پرگاري كه الان درست كردم از صدقه سر تو هستشا.
اگه نبودي كه معلوم نبود الان برا همين وبلاگم چقدر پياده شده بودم.
شايدم هنوز مجبور بودم عين خرچنگ ايستاتيك كار كنم!!!!
خيلي آقايي.
اينم وظيفمونه داداش.
خواهش ميکنم، وظيفه بود، باعث خوشحاليمه، خيلي ممنون شرمنده کردين 😡
نظرمو وردپرس خورد!(؟!)
اتفاقن الان دارم دنبالش ميگردم! دو بار خوندمش اما الان زدم رو جفنگ (روم به ديوار!!) بعد تو ليست جفنگها هم نيست :)) شما از کجا فهميدي؟:دي
پيدا شد :دي
پست آموزشی خوبی بود
آقا دمت گرم کارت حرف نداره