Printable View
سلام وقتتون بخیر امیدوارم خوب باشین
من میخوام یه صفحه رو که با css قالبش رو تنظیم کردم به فرم واقعی نزدیک کنم برا شکلهایی که با museover
در jquery تبدیل به یه شکل دیگه میشن و مثلا یه پاراگراف توضیحی هم در کنار تعویض شکل نمایان میشه
چجوری باید این کدش رو <script ..> بنویسم؟!
یه مشکل دیگه هم دارم من یه pdf دارم از jquery فصلش4 روهم خوندم اما زیاد کمکم نمیکنه یعنی اگه امکانش هست بهم یه کتاب معرفی کنید که تا حدودی بتونم مشکلاتمو خودم حل کنم. کلیییییییی ممنون مرسی
الهام:لبخندساده:
فکر می کنم اگر یه صفحه ساده حاوی چیزی که میفرمایید رو بتونید جایی آپلود کنید و لینکش رو اینجا بزارید خیلی سریع تر و دقیقتر می تونم کمکتون کنم.
در مورد کتاب هم اگر فکر می کنید PDF یا مقالات اینگلیسی کمکتون نمیکنه فکر می کنم تا الان کتاب های فارسی خوبی در این زمینه بیرون اومده باشه؛ از بازار یک نسخه کتاب غیر الکترونیکی فارسی تهیه کنید :)
jQ متدهای زیادی داره
در ضمضمه jQuery UI روی این بخش متمرکز شده و اکثرا نیاز های گرافیکی رو بر طرف می کنه
البته در موارد مرسوم هم پلاگین زیاده مثلا :
http://www.htmldrive.net/
در مورد کتاب هم باید بگم بهترین کتابی که من توی بازار دیدم جامع و کامه و فارسیو هست کتاب ترجمه ارمان اسد سنگابیه
http://www.kianpub.com/book/292
سلام لطف کردین. من الان نمیتونم برم بازار برای خرید تازه اگر هم بتونم برم خوب اهل پول خرج کردن برا کتاب نیستم اگه pdf میشناسین لطفا راهنمایی کنید ادرس بهم بگید خوب در مورد عکس همین جا براتون میذارم 3 تا دایره اخری رو که با mouseover باز میشن نگاه کنید و لطفا راهنمایی کنید چجوری کد رو بنویسم
با css طراحیشو انجام دادم فعلا اما کد jquery رو میخوام
وقتی mouseover میشه باید چه اتفاقی بیافته؟
وقتی mouseover میشه شکل عوض میشه یه شکل هم اندازه جای این نشون میده( همون hover image در css )
یه نمونه از کدهای html و css رو بزارید.
تو جی‌کوئری یه متدی هست به نام hover که بهش دوتا تابع میدید. اولی وقتی که moseover شد اجرا میشه و دومی وقتی که mouseout شد اجرا میشه. با اون میشه کاراری زیادی انجام داد.
فک کنم منظورتون از باز شدن مثلا رنگی شدن همون ایکونه درسته؟
(اگر جواب درست و کاملی می خواهید اصلاحات و بیانتون رو درست برسونید بیشتر افراد یاد دارن اما چون شما بد نوشتین خیال می کنن نمی دونن و ج شما رو نمیدن)
کد برای برداشت خودم:
$('div.cir').hover(function(){
$(this).css('background-image','url(/*url img in mouse over */)');
},function(){
$(this).css('background-image','url(/*url img in mouse out */)');
});
این روش شما برای کسانی که سرعت اینترنت پایینی دارند مناسب نیست. چون باعث میشه وقفه ای جهت لود تصویر ایجاد بشه. ابتدا با css ، تصویر پس زمینه رو برای hover و حالت اولیه اون ایجاد کنید ، بعد با دستورات removeClass و addClass کار کنید.نقل قول:
نوشته شده توسط sinoser
دوست عزیز من وقت طراحی هیچ وقت از این جور متد ها استفاده نمی کنمنقل قول:
نوشته شده توسط meisam3322
ولی مثال گفتم فرد سوال کننده کار دستش بیاد تا بهتر سوال رو برسونه
من خودم برای هیمن مثال چند روش دارم
بدون انیمیشن
1-فقط با css تغییر عکس بک گراند میدیم
2- همون روش 1 ولی به جای تغییر عکس بک گراند پوزیشن عکس بکراند رو تغییر میدم یعنی در واقع 2 حالا در یک عکس لود و استفاده میشه
با انیمیشن
3 - مدل 1 حالت بدون انیمیشن با jQuery
4- مدل 2 حالت بدون انیمیش ولی با css 3
5- مدل 2 حالت بدون انیمیشن با jQuery
و ...
ممنون از sinoser عزیز که زحمت کشید و لطف کرد جواب سوال من رو داد ممنون ازتون :*
از جلیل اقا و میثم اقا هم ممنونم کمکم کردین متشکرم :)
برای شکل هایی که با (mousover) بزرگ میشن باید چیکار کنم تا بتونم یک عکس رو در 2 سایز بذارم که شکل اول به شکل دوم تغییر سایز بشه وقتی موس روی عکس قرار میگیره؟؟:ناراحت:
برای خیلی از کار ها اگر حالت انیمیشن و افکت رو نمیخواید میتونید از همون Pseudo class ها استفاده کنید
Div{
Background-image:url(…)
}
Div:hover{
Background-image:url(…)
}
برای تغییر سایز عکس اولا باید به صورت ابسولوت باشه
دوما با jquery طول و عرض عکس رو تغییر بدید
اگر به زبون انگلیسی تسلط دارید کتاب های خوبی به صورت PDF دارم
این سوال 3 زیر سوال داره کدومش :نقل قول:
نوشته شده توسط الهام قدوسی
1- تغییر بی وقفهه و بزرگ شدن عکس
2- بزرگ شدن عکس با یک زمان مثلا 2 ثانیه
3- تغییر عکس های بزرگ و کوچیک (منظورم اینه که خود محتوای عکس فرق کنه مثلا 2 تا عکس متفاوت باشن)
virtualstodio:
من خودم اول با همین کد در css تنظیمش کردم اما چون عکس ها رو وقتی با css برا باز شدن نمیشه سرعت براش تعریف کنی خیلی سریع از عکس کوچیک به بزرگ تبدیل میشد برا همین دارم سعی میکنم با animate در jquery
کد رو بنویسم برا mouseover هم تنظیم کردم فقط الان قسمت mouselaeveرو دارم تنظیم میکنم که مونده هنوز.
خب لطفا برام ادرس لینک رو بدین با تشکر .
اقای sinoser
همون شماره 2 اما بجای زمان سرعت تعریف شه براش :)
اولا از کجا معولمه اقا هستم یا خانوم ؟!
دوما منظور از زمان همون سرعته به میلی ثانیه زمان رو میدن و هرچه این زمان بیشتر باشه سرعت کمتر میشه
اینم کدش
فقطاینا رو بدون
این کد یک عکس با ابعاد 40*40 در حالت کوچک رو به 400*400 تبدیل می کنه در زمان 1000 میلی ثانیه یا همون یک ثانیه
بخونی متوجه میشی
بهترم هست سلکتور عکس ها رو در دایوی مشخص کنی
$('div.imgBox').hover(function(){
$(this).stop().animate({width:400,height:400},1000 );
},function(){
$(this).stop().animate({width:40,height:40},1000);
});
من تنظیم کردم اما اگه مثلا چند تا عکس رو به صورت قاب عکس بخوام بذارم کنار هم که باز بشن وقتی که یکی با mouseover باز میشه بقیه عکسها جابجا میشن چون عکس ها بزرگ هست هنگام باز شدن
با استفاده از z-index در کلاس فراخوانی شده نتونستم ثابتش کنم عکسای دیگه رو وقتی یه عکس باز میشه :(
از ایده ای که من در پلاگین http://sinoser.ir/plugins/sinoserZoomImgList استفاده کردم استفاده کنیدنقل قول:
نوشته شده توسط الهام قدوسی
هنگام mouseover یک کپی از عکس بگیرید بعد عکس اولی رو visibility:hidden کنید توجه display:none نکنید
حالا به عکس کپی شده کلاسی اختصاص بدید با محتوای
position:absolute
حالا با دستورات $(this).position().top و دستور $(this).position().top مقدار فاصله عکس های اولیه رو می گیری و به عکس جدید به عنوان margin-left وmargin-top مقدار میدی تا رو عکس باشه
البته من در پلاگین گفته شده امدم و با متد animate به میزان نصف ارتفاع بزرگ margin-top رو منفی دادم
سلام میخوام با استفاده از دستور var withi و var highti بتونم تنظیماتی رو برای عکسام بذارم مثل تنظیم اندازه عکسم جدا از animate که وقتی عکس ها باز شد بعدش بسته شد در اندازه قبل از باز شدنش قرار بگیره اخ تعداد عکسام زیاد هست کنار هم هستن الان تا وقتی موس روی عکسا میره تنظیم هست وقتی هم موس روشون هست باز میشن تنظیم هست اما هنگامی که کامل کوچیک شد عکس ها به یه اندازه خاص همه عکسام برمیگرده که با قبل از باز شدن فرق داره ؟؟؟؟؟؟؟؟؟؟؟؟؟؟!!!!!!!! لطفا کمکم کنید.
باید کدتون رو بزارید....
ببینید این بدردتون میخوره: http://jsfiddle.net/D8yYP/
شما باید همون اندازه عکسی که در حالت کلی (نمای کوچیک) در css گذاشتی براشون اینجا هم موقع کوچیک کردن با متد animate همون مقدار رو بذار تا یکی بشننقل قول:
نوشته شده توسط الهام قدوسی
اما این که می گی همه عکسام نشون میده تو همه عکس ها رو سلکت می کنی و باید به سلکتور this تنظیمات رو بدی (در تابع اکشن)
بازم کدتو بذار بهتر راهنمایی کنیم
اینم از کدش دقیق ببینید تو دستور jquery اونایی رو که // سبز کردم باید با استفاده از اونا بتونم بعد از باز شدن عکس وقتی میخواد اندازش کوچیک شه به اندازه اولیشی برگرده یعنی من اگه تو دستور pic 1 براش margin-top=20px,margin=left 10px با اندازه های width:80 ,height 100رو دادم و pic2 با یه سری اطلاعات متفاوت تا مثلا pic20 هنگامی که باز میشن برا بسته شدن همشون اونجوری که من تعریف کردم mouseover و height=50,width=50یه اندازه و جاهای مختلف از قبل از باز شدنشون قرار نگیرند ؟؟؟؟؟!!!! حالا چیکار کنم
منظور کلی من این هست قبل و بعد از باز شدن عکس ها اندازه و جاشون تغیر نکنه اگه الان موقعیت xرو داره با size s بعد از باز شدن هم همین باشه.
من با انیمیت کد رو نوشتم و اینی رو که شما گفتین انجام دادم اما برا قاب عکسایی که من مد نظر دارم خوب نشد یعنی ایراد داشت کلا :D<br> <br> <br>نقل قول:
نوشته شده توسط Javidhb
شما میری با یک متغییر سراسر مثلا مقدار پارامتر هاشو می خونی بعد توی اکشن mouselevel میای و اونا رو به عنوان اندازه های اخری میدی
اما اینو فراموش کردی که این ها متغییرن یعنی با رفتن موس از روی یک عکس به عکس بعدی مقدار داخلی این متغییر ها عوض میشه و در نتیجه عکس که بازه به حالت کوچیک عکسی که در حال باز شدن میره
شما برای حل این مشکل باید مقداری صفت ها رو (همونایی که // کردی) رو با پارامتر this توی اکشن mouselevel بخونی و به متد animate بدی
لطفا کد رو برام بذار:لبخند:
خب سورس کد رو می ذاشتی تغییراتو روش انجام میدادم بت می دادم
من هرکار میکنم اینجا نمیتونم کد بنویسم همش راست چین میشه کدهام بهم میریزه عکسشو که گذاشتم :)وردش رو گذاشتم تو ایمیلتون لطفا چک کنید.
خب راس چین بشه
بعدشم کد ها بعد از این که مطلب درج شد برای دیگران درس نشون داده میشه خودتم می خوای درست نشون داده بشه یک رفرش بعدش بزن