السلام عليكم ورحمة الله وبركاتة
تكلمنا في الدرس السابق عن تنسيق و تحريك المعلومات المستقبلة عن طريق ملف xml بالضغط على السابق و التالي
قد يتسائل البعض ويقول لماذا لم يتم وضع التنسيق في درس و التحريق في درس مستقل ؟
اقول له القصد من ذلك هو العمل على ال الcss وال jquery في نفس الوقت
في هذا الدرس سوف نقوم بتحريك ما تم استقبالة بشكل auto بشكل افتراضي
وسوف نستخدم api jquery
mouseover وضع الماوس
mouseout ابعاد الماوس
و دوال ال java
setInterval وضع التوقيت
clearInterval حذف التوقيت
في ملف ال index.php
نقوم باضافه
كود PHP:
var all = function() {
if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"left": "-
="+width_insert+"px"}, "slow"); width_next++;}
else {$(".cont").animate({"left": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}
};
var daly = 2000;// 1000 ثانية واحدة
var times = setInterval(all,daly);
$('.cont').mouseover(function() {
times = clearInterval(times);
});
$('.cont').mouseout(function() {
times = setInterval(all,daly);
});
بحيث تكون اسفل من
كود PHP:
$('.prev').click(prev);
-------------------------
كود PHP:
var all = function() {
if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"left": "-
="+width_insert+"px"}, "slow"); width_next++;}
else {$(".cont").animate({"left": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}
};
هنا قمنا بتعريف متغير all بحيث ياخذ محتوى الداله
التي قلنا له فيها
اذا كان ( width_next ) اصغر من ( namebr_xml_item - 1 ) و ( width_next ) اكبر من او يساوي 0 قم بتحريك (.cont) الى اليسار بمقدار ( width_insert
) وقم بزيادة ( width_next ) بمقدار 1
واذا لم يكون ذلك قم بتحريك (.cont ) الى اليمين بمقدار ( width_next * width_insert ) و اجعل ( width_next ) تساوي 0
----------------------
كود PHP:
var daly = 2000;// 1000 ثانية واحدة
هنا قمنا بتعريف متغير ( daly ) بحيث ياخذ محتوى 2000 كل 1000 يساوي ثانية واحده
----------------------
كود PHP:
var times = setInterval(all,daly);
هنا قمنا بتعريف متغير times بحيث ياخذ محتوى الداله ( setInterval )وهذه الداله تاخذ بارميتر الاول : محتوى المتغير( all )والثاني محتوى المتغير( daly )
هذه الدالة تقم بتنفيذ المتغير الاول كل مره يساوي العدد الداخلي لها المتغير الثاني
----------------------
كود PHP:
$('.cont').mouseover(function() {
times = clearInterval(times);
});
هنا استخدمنا api وضع الماوس ( mouseover ) على (.cont ) يقوم وضع ال ( times ) ـ ( clearInterval ) عملها هو مسح ال( times )
----------------------
كود PHP:
$('.cont').mouseout(function() {
times = setInterval(all,daly);
});
هنا استخدمنا api ابعاد الماوس ( mouseout ) عن (.cont ) حيث ياخذ ( times )محتوى الداله ( setInterval )وهذه الداله تاخذ بارميتر الاول : محتوى المتغير( all )والثاني محتوى المتغير(
daly )
هذه الدالة تقم بتنفيذ المتغير الاول كل مره يساوي المتغير الثاني العدد الداخلي لها
----------------------
الكود كامل
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-
19991224/loose.dtd">
<!-- saved from url=(0044)http://devnet.mohe.gov.saPages/test.aspx -->
<html>
<head>
<title>test</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link type="text/css" href="CSS/style.css" rel="stylesheet" />
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui-1.8.2.custom.min.js"></script>
</head>
<body>
xml اولا : الاستقبال من ال
<br />
<script type="text/javascript">
$(document).ready(function() {
var namebr_xml_item=0;
var width_insert=100;
var width_next=0;
$.ajax({
url: "XML/xmlfile.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){ // داخل المتغير site
var id = $(this).attr('id');// استقبال متغير ال ID
var imge = $(this).find('imge').text();// استقبال متغير ال imge
var url = $(this).find('url').text();// استقبال متغير ال url
var title = $(this).find('title').text();// استقبال متغير ال title
$('<li></li>').html('<a href="'+url+'" ><img src="'+imge+'" alt="'+title+'" />'+title+'</a>').appendTo
('.conts');//
namebr_xml_item++;
});
}
});
var next = function() {if(width_next < namebr_xml_item - 1){$(".cont").animate({"left": "-
="+width_insert+"px"}, "slow"); width_next++;}};
var prev= function() {if(width_next > 0){$(".cont").animate({"left": "+="+width_insert+"px"}, "slow");
width_next--;}};
$('.next').click(next);
$('.prev').click(prev);
var all = function() {
if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"left": "-
="+width_insert+"px"}, "slow"); width_next++;}
else {$(".cont").animate({"left": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}
};
var daly = 2000;// 1000 ثانية واحدة
var times = setInterval(all,daly);
$('.cont').mouseover(function() {
times = clearInterval(times);
});
$('.cont').mouseout(function() {
times = setInterval(all,daly);
});
///////////////
});
</script>
<div class="container">
<div class="clip">
<div class="cont">
<ul class="conts">
</ul>
</div>
</div>
<div class="prev">السابق</div>
<div class="next">التالي</div>
</div>
</body>
</html>
تطبيق الدرس
ارجو عملها بحيث تكون الحركه من الاسفل الى الاعلى
تلميحات مساعده :
الطول الحركي
width_next
الحركه اتجاهها
left
اما تكون + او -
- تكون الى اليمين
نحن نريدها top
ال cont هو الذي يتحرك وعرضه يساوي عدد الصور * عرض الصوره
نفس الامر ينطبق على clip عرضه يساوي عدد الصور * عرض الصوره
نريدها بدل العرض الطول
امل ان تساعدكم هذه التلميحات
انتهاء الفصل الاول
الفصل الثاني :استخدام الصور والتبديل بينها بمرور الماوس