برمجة صندوق المتابعة على الشبكات الاجتماعية بالجيكويري

صندوق الشبكات الاجتماعية.هو تطبيق مهم جدا ولا يكاد يخلو اي موقع من ازرار المتابعة على الشبكات الاجتماعية. التطبيق بسيط وانيق قمت ببرمجته بالجيكويري ليس معقد فقط بعض التركيز وبعض اكواد الجيكويري :) .

الخصائص :

- السلاسة في التحرك باستخدام مكتبة الجيكويري الرائعة
- زيادة وضوح الايقونة وتحركها للاسفل عد تمرير مؤشر الفأرة عليها
- ايقونات جميلة وانيقة للشبكات الاجتماعية مصممة بالفوتوشوب

كود HTML :

يحتوي على روابط الشبكات الاجتماعية بالاضافة للايقونات

<div id="social">

<a class="slinks"  href="" ><img src="image/facebook.png" title="facebook" width="70" height="70" /></a>

<a class="slinks" href=""><img src="image/google.png"title="google+" width="70" height="70"  /></a>

<a class="slinks" href=""><img src="image/twitter.png" title="twitter" width="70" height="70"  /></a>

<a class="slinks" href=""><img src="image/rss.png" title="rss" width="70" height="70"  /></a>

</div>

كود jQuery :
في كود الجيكويري استعملت خاصية "fadeTo" المسؤولة عن الشفافية .
بالنسبة لخاصية "animate" يمكن وضع فيها عدة تأثيرات انا قمت بوضع تأثير الحركة نحو الاسفل وزيادة الوضوح.

<script type="text/javascript">
$(document).ready(function(){
$(".slinks").fadeTo("slow",0.5);
$(".slinks").hover(function(){

$(this).stop().animate({

"top":"10px",
"opacity":"1"

},"fast");

},function(){

$(this).stop().animate({

"top":"2px",
"opacity":"0.5"},"fast");

});
});

</script>

كود CSS :

.slinks{
padding:2px;
position:relative;

هل أعجبك الموضوع ؟

Share

Tweet

بقلم التقنية العربية

مدون عربي مهووس بجديد التكنولوجيا والإنترنيت هدفي مشاركة تجربتي مع باقي رواد النت . تويتر . جوجل بلس