حالت موضوعی | حالت خطی

**صدرا حسابی**

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