كيف يمكن عمل هذا التطبيق ب Jquery؟؟؟

بدأه ensana في 2 يوليو 2009 · 8 رد · 1,187 مشاهدة · في قسم البرمجة بــ Javascript

مشاركة: واتساب X فيسبوك تيليجرام

#12 يوليو 2009 في 19:47 صاحب الموضوع

السلام عليكــم ورحمـة الله وبركاتــه ،،

http://www.bluecoffee.com/

كيف يمكن عمل تطبيق مثل الموجود بهذه الصفحة باستخدام ال jquery

3 slides

interactive

designs

networks

#23 يوليو 2009 في 23:47

انظري في مكتبة mootools سوف تجدي ضالتك .

#34 يوليو 2009 في 16:16

كيف يمكنني استخدام هذه المكتبة وهل لها علاقة بال Jquery????????????

#45 يوليو 2009 في 04:56

المكتبة المستخدمة بالموقع هي mootools

ويوجد أيضاً توابع للحركة في jQuery:

http://docs.jquery.com/Effects/animate

#55 يوليو 2009 في 15:37

يمكن تنفيذ هذه الحركة باستخدام الجى كويرى

حدد لنا فى اى نقطة تريد المساعدة

#65 يوليو 2009 في 18:52

السلام عليكــم ورحمـة الله وبركاتــه ،،

قمت بعمل مثل هذا الكود كمثال لمنا موجود بالموقع السابق

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

  <script>
  $(document).ready(function(){


	$("#block1").mouseover(function(){
		$("#block0").animate({"left": "-=200px"}, "fast");
		$("#block").animate({"left": "-=100px"}, "fast");
		$("#block1").animate({"left": "-=25px"}, "fast");


	});

	  $("#block1").mouseout(function(){
		  $("#block0").animate({"left": "+=200px"}, "fast");
		  $("#block").animate({"left": "+=100px"}, "fast");
		  $("#block1").animate({"left": "+=25px"}, "fast");

	});


	$("#block0").mouseover(function(){
	  $("#block0").animate({"left": "+=100px"}, "fast");
			$("#block").animate({"left": "-=100px"}, "fast");
				  $("#block1").animate({"left": "-=100px"}, "fast");


	});


	$("#block0").mouseout(function(){
	  $("#block0").animate({"left": "-=100px"}, "fast");
			$("#block").animate({"left": "+=100px"}, "fast");

	  $("#block1").animate({"left": "+=100px"}, "fast");

	});


	  $("#block").mouseover(function(){
		  $("#block").animate({"left": "+=100px"}, "fast");
					$("#block1").animate({"left": "-=100px"}, "fast");

	  return false;
	});


	  $("#block").mouseout(function(){
		  $("#block").animate({"left": "-=100px"}, "fast");
		  $("#block1").animate({"left": "+=100px"}, "fast");
	  return false;
	});

  });

 </script>
</head>

<body dir="rtl">


<div align="left" id="block0" style="position:absolute; background-color:#0C0; color:#FFF; left:50px; width:700px; height:150px ">000000اخضر</div>

<div align="left" id="block" style="position:absolute; background-color:#006; color:#FFF; left:50px; width:400px; height:150px ">firstازرق</div>

<div align="right" id="block1" style="position:absolute; color:#FFF; background-color:#CFF; left:50px; width:200px; height:150px ">secondلبني</div>
</body>
</html>

وقمت بتجربته

هو يعمل معي ولكن اواجه مشكلة عند الضغط على المربع اللبني يتكون الزالق في الصفحة ويتجه نحو اليمين وانا اريد ان اصنع بالضبط كما الموجود بالمثال السابق ارجو تجرب الكود المرفق لمشاهدة الفرق (اريد عند مرور الماوس تجاه اي جزء بدل ما الجزء يظهر ويود سكرول بالصفحة الجزء المتسبب في السكرول يختفي .. ارجو زيارة الموقع واختبار الكود الموضح لملاحظة الفرق)

وجزاكم الله خيرا

تم تعديل هذه المشاركة بواسطة ensana في 5 يوليو 2009 في 19:08