marys_farahani
جمعه 01 آذر 1392, 15:50 عصر
سلام
یه سری به این سات بزنبید.
http://www.parsiangroup.com/
به این تصویر هم یه نگا بندازید.
http://s4.picofile.com/file/7995690107/gsd.png
این منو هارو که تو تصویر دیددین چه جوری ساختن.
می شه یه توضیح مختصری در موردش بدین.
بی نهایت ممنون
<body id="main-page">
<div class="aspNetHidden">
<div class="section-wrapper">
<div id="services" class="section">
<div class="article">
<ul>
<li>
<img style="top: 35px; left: 85px;" class="icon icon1" alt="statistic" src="jquery_files/seo-1.png" height="75" width="75">
<img style="top: 35px; left: 85px;" class="icon icon2" alt="statistic" src="jquery_files/seo-2.png" height="75" width="75">
<a href="#" title="بهینه سازی وب سایت">
<img style="background-position: 0px -175px;" id="seo" title="بهینه سازی وب سایت" src="jquery_files/SEO.png" height="138" width="138">
</a>
<h3>
<a class="title" href="#" title="بهینه سازی وب سایت">بهینه سازی وب سایت</a>
</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
این دو تا تصویری هست که وقتی اشاره گر موس میره روی تصویر از اطراف دایره بیرون مییاد به صورت پیش فرصت
<img style="top: 35px; left: 85px;" class="icon icon1" alt="statistic" src="jquery_files/seo-1.png" height="75" width="75">
<img style="top: 35px; left: 85px;" class="icon icon2" alt="statistic" src="jquery_files/seo-2.png" height="75" width="75">
به صورت پیش فرض مختصات نمایش عکس رو طوری داده که زیر دایره هست دیده نمیشه
liContainer.find(".icon1").animate({ top: 35,left: 85 },{ duration: 200,easing: "easeInOutQuad" });
liContainer.find(".icon2").animate({ top: 35,left: 85 },{ duration: 200,easing: "easeInOutQuad" });
بعد تو فانکشنی تعریف کرده که اگه موس روش آمد مختصات تغییر کنه
liContainer.find(".icon1").animate({ top: -30,left: 30 },{ duration: 200,easing: "easeInOutQuad" });
liContainer.find(".icon2").animate({ top: 90,left: 150 },{ duration: 200,easing: "easeInOutQuad" });
برای تصویر ابی دایره هم که وقتی اشاره گر روش میره قرمز میشه از همین کلک استفاده کرده اون یه تصویر هست که گفته مختصات نمایشه تصویر
$("#services .article ul li a img").css("backgroundPosition","0 -175px")
و بعد از اینکه اشاره گر موس روش رفته به این شکل تغییر کنه
$(this).stop().animate({ backgroundPosition: "(0 0)" },{ duration: 200,easing: "easeInOutQuad" });
این فایل دانلود کن روی سیستم نگاه من متوجه میشی (http://up.p30parsi.com/out.php/i187145_jquery.zip)