پارس جوم :: انجمن های تخصصی جوملا
هاور مثل نمونه - نسخه‌ی قابل چاپ

+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: پشتیبانی (/forum-70.html)
+--- انجمن: درخواست الحاقات (/forum-18.html)
+---- انجمن: درخواست افزونه های جوملا (/forum-20.html)
+---- موضوع: هاور مثل نمونه (/thread-15920.html)

هاور مثل نمونه - mal2moh - ۲۶-۵-۱۳۹۳ ۰۷:۳۳ عصر

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

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

RE: هاور مثل نمونه - صدرا حسابی - ۲۷-۵-۱۳۹۳ ۰۴:۳۶ عصر

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