سوال در مورد jQuery

[mehdivirus]

سلام به همه استادان بزرگ
یه سوال داشتم در موردjQuery
اینکه چجوری میشه که عکس کنار صفحه باشه و فقط نصفش نمایش داده بشه
بعد وقتی که موس رفت روش
تماس عکس نمایش داده بشه
نمیدونم خوب توضیح دادم یا نه
ولی اگه به این سایت برین سمت چپ یک عکس هست با نام پشتیبانی
که فقط نوشته اش پیداس
ولی وقتی میرید روش عکس به طور کامل نمایش داده میشه
و دوباره وقتی که موس رو خارج کردید از روش
میره سر جای اولیش
اینم اون سایته هست
http://farzadbaner.ir/
خیلی ممنون از کمک هایی که میکنید

 

[member99]

متوجه شدم عزیز / اسلاید اوت (Slide out) هست / که معمولا برای چت / پشتیبانی / یا آیکن های دیگه بصورت متحرک کنار سایت ها ظاهر می شود / واسه چه CMS می خوای تا بهت بگم / اسکریپت آماده و حتی ماژول اونم هم به راحتی می تونی پیدا کنی

 

[dexted]

سلام دوست عزیز

به طور اختصاصی توی این سایتی که شما فرمودین از اسکریپت استفاده نشده و فقط با css این کار به صورت زیر انجام گرفته:

<div class="h"></div>

[CSSS]
div.h{
-moz-transition: all 0.25s ease 0s;
background-attachment: scroll;
background-image: url('http://up.farzadbaner.wp-desinger.ir/uploads/bg-bg.png');
background-position: -250px 0;
background-repeat: no-repeat;
bottom: 0;
height: 92px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
right: 0;
top: 40%;
width: 20px;
}
div.h:hover{
background-position: 0px 0;
padding: 0 0 0 200px;
width: 200px;
}
[/CSSS]

من اینجا عینا همون تکنیک این سایت رو گذاشتم.
کار طراح با این صورت بوده که اول یک عرض 20پیکسل و همچنین 20پیکسل از عکس رو نشون داده و با رفتن موس روی اون عرض عکس رو 200پیکسل کرده و همچنین مقدار بیشتری از عکسو نشون داده.

اگر توی این توضیحات مشکلی بود در خدمتم
و همچنین اگر حتما اسکریپت میخاین و یا اینکه کلا میخاین یه div داشته باشین (بدون عکس زمینه) که همچین خاصیتی داشته باشه بفرمایید تا بگم خدمتتون

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

 

[mehdivirus]

خیلی مممنون از جوابی که دادید
ولی ببخشید به دلیل مبتدی بودن من میشه یه توضیحی در مورد کد ها بدید ؟؟
خیلی ممنون از شما ..

 

[dexted]

خواهش می کنم دوست من وظیفمو انجام دادم.

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

قسمت html که یه تگ div هست.در مورد css اون : برای اینکه این کادر همراه با اسکرول کردن کاربر جا به جا بشه باید از خاصیت position:fixed استفاده کرد.و همچنین خاصیت های top و left هم برای اینه که جاشو مشخص کنیم(می تونستیم ltop رو درصدی هم ندیم)
خوب نکته اصلی سر background و width هست.یک تصویر برای بکگراند قرار داده شده.با استفاده از خاصیت background-position و با width :20px وقتی موس روی عکس نیست اون قسمت کوچیک از عکس دیده میشه.
حالا وقتی میگیم div.h:hover یعنی وقتی موس میاد روی عکس : اینجا تغییراتی که میدیم اینه که میایم کل عکس رو (که تا حالا به خاطر کم بودن width فقط قسمت کمی از اون رو میدیدیم) نشون میدیم این کار با زیاد کردن width و ست کردن background-position روی 0 0 انجام می گیره.
در نهایت هم اون قسمت -moz-transition باعث میشه که به این صورت با افکت کادر وارد بشه(که به دلیل استفاده از -moz- فقط توی فایرفاکس قابل رویت هست)

در این قسمت ها هر جایی مشکل داشتین بگین که دقیقا در کدوم قسمتش مشکل وجود داره.

 

[dexted]

از اونجایی که این راه فقط css هست و از تکنیک های css3(که ممکنه در بعضی مرورگر ها به مشکل بخوره)استفاده شده من اینجا یک نمونه هم اسکریپتی رو آوردم که توی همه مرورگر ها امتحان کردم و کار کرد.

<img src="http://up.farzadbaner.wp-desinger.ir/uploads/bg-bg.png" class="g">

[CSSS]
.g{
position:fixed;
left:-240px;
top:100px;
height:100px;
width:260px;
margin:0px
}
[/CSSS]
[JSS]
$(".g").hover(function(){
$(this).animate({left:"0px"});
},
function(){
$(this).animate({left:"-240px"});
}
);
[/JSS]

خوب حالا توضیحات:

html که یک تگ عکس هست که عکس مارو میاره(که می تونست div یا هر چیز دیگه ای باشه)
css: در اینجا هم برای حرکت این عکس با اسکرول ما از position:fixed استفاده کردیم.همونطور که دیده میشه ما left رو در اینجا -240px در نظر گرفتیم یعنی در ابتدا فقط 20px از عکس معلوم هست.
js: تابع hover مجموع دو تابع mouseover و mouseout در جی کوئری هست.function اول همون mouseover و دومی هم mouseout هست.حالا ما در اولی گفتیم بیاد با استفاده از تابع animate(برای ایجاد افکت حرکتی)left مارو به 0 تغییر بده یعنی اون قسمت از عکس که بیرون از کادر بود رو نمایش بده و در حقیقت عکس باز بشه.
و در mouseout هم left رو به همون مقدار قبلی برمی گردونیم تا کار کامل بشه.


سوالی بود در خدمتم