المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image,بوابة بدر 2013


Eng_Badr
12-01-2014, 04:00 PM
كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image
تحميل,تنزيل,2013,2014,ماى ايجى,تحميل مباشر,عرب سيد,برابط مباشر,سريع,تورنت,عربي,معرب,مجانا,فاينال,انجليزي,فر نسي,اخر اصدار,برابط واحد,صاروخ
كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image
<div>
السلام عليكم ورحمة الله وبركاته

أثارة المواقع ذات الخلفيات المصورة محط إنتباه المبرمجين ,المصممين وحتى الزبناء , لشدة الجمالية التي تضيفها الى المواقع, حتى أصبحت موضة حديثة يتهافت على القيام بها المهتمون بعالم صناعة المواقع, وقد تعددت طرق برمجة الصورة حتى تصبح خلفية للموقع سواء عن طريق java ****** وهي طريقة معقدة نوعا ما بالنسبة للمبتدئين والمتوسطين وعيبها انها تحتوي على سطور أكواد طويلة يصعب معها التعديل إن إقتضى الحال, ولهذا ظهر في السنوات الاخيرة مايسمى الجكوري Jquery وهي مكتبة java ****** تختصر سطور أكوادها الطويلة الى سطور معدودة وسهلة التعامل معها وإذا أردت التعمق في هذه المكتبة سأحيلك على موقعهم الرسمي هنـــــا.
وبما أننا بصدد فهم كيفية جعل الصورة كخلفية للموقع فإننا سنتعامل مع هذه المكتبة للننشئ كود سهل الفهم ,التركيب والتعديل ولكم الخطوات كما يلي :


نبدأ على بركة الله بكود jquery وهذا الكود هو المسؤول الاساسي عن جعل الصورة كخلفية
للموقع :
كود:
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this);

function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();

var winwidth = $(window).width();
var winheight = $(window).height();

var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;

var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;

if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
};
})(jQuery)
الخطوت الثانية القليل من كود الــ CSS :

كود:
fullBg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}

#maincontent {
position: absolute;
top: 0;
left: 0;
z-index: 50; }


إذا أردت أن تجعل صورة خلفية الموقع ثابتة أي ان محتويات الموقع هي التي تتحرك نحو الاسفل أو الاعلى "Scrolling" فما عليك سوى أن تبدل Position :absolute بــ position :fixed :

كود:
fullBg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;}


نأتي الى الـــ HTML :

كود:
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]








الان الخطوة الاخيرة هو إستدعاء الكود الاساسي jquery الى الصفحة HTML حتى يتم تفعيله Including ضعه قبل الوسم :

كود:



هذا كل مانحتاجه لجعل الصورة كخلفية للموقع يمكنك معاينة هذا المثال مباشرة في الاسفل وأيضا تحميل الاكواد من أجل بدأ العمل بسهولة :

معاينة ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])
*******
تحميل ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

المصدر مدونة المبرمج ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])


كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image
تحميل,تنزيل,2013,2014,ماى ايجى,تحميل مباشر,عرب سيد,برابط مباشر,سريع,تورنت,عربي,معرب,مجانا,فاينال,انجليزي,فر نسي,اخر اصدار,برابط واحد,صاروخ
كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image