هاور مثل نمونه

[mal2moh]

سلام
در دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

5 باکس پایین که هاور هستن رو چطور میتونم درست کنم ؟

[صدرا حسابی]

فکر می کنم ماژول مشابهش وجود داشته باشه، ولی حالا کلیتش رو بخوای با فایرباگ هم می تونی راحت در بیاری کداشو، اول از همه ساختار htmlاش به این صورت می شه:

کد: (انتخاب همه)

<div id="horizontal" class="clear">
<div style="margin-right:20px;">
<a href="?current=viewprod&st=1">
<img class="midClass" alt="" src="images/img1.jpg" style="left: 0px;">
</a>
</div>
<div style="margin-right:20px;">
<a href="?current=viewprod&st=2">
<img class="midClass" alt="" src="images/img5.jpg" style="left: 0px;">
</a>
</div>
<div style="margin-right:20px;">
<a href="?current=news&Sel=129">
<img class="midClass" alt="" src="images/img2.jpg" style="left: 0px;">
</a>
</div>
<div style="margin-right:20px;">
<a href="?current=view&Sel=121">
<img class="midClass" alt="" src="images/img3.jpg" style="left: 0px;">
</a>
</div>
<div>
<a href="?current=view&Sel=126">
<img class="midClass" alt="" src="images/img4.jpg" style="left: 0px;">
</a>
</div>
</div>

عکسهاش رو ببینی به این صورت هستند، یعنی خودش به صورت دستی عکسی که اسکرول می شه رو در کنار عکس اصلی قرار داده،

کد: (انتخاب همه)

<script type="text/javascript">
$(function(){
$("#horizontal div a").hover(function(){
$("img", this).stop().animate({left:"-172px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({left:"0px"},{queue:false,duration:200});
});
});
</script>

در آخر اسکریپت جاوا اسکریپت بالا به این صورت تعریف شده که زمانی که موس روی تگ های a داخل div های زیرمجموعه آی دی horizontal قرار گرفت، عکس با سرعت تعریف شده به میزان نصف عرض تصویر(372px/2) جابه جا بشه و با برداشتن موس به مکان اولیش برگرده.