پارس جوم :: انجمن های تخصصی جوملا

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

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>

عکسهاش رو ببینی به این صورت هستند، یعنی خودش به صورت دستی عکسی که اسکرول می شه رو در کنار عکس اصلی قرار داده،
[تصویر: img1.jpg]

کد: 

<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) جابه جا بشه و با برداشتن موس به مکان اولیش برگرده.

پارس جوم :: انجمن های تخصصی جوملا

mal2moh

صدرا حسابی