المصمم
15-08-2014, 10:04 PM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image
http://3.bp.blogspot.com/-9u7WNruEgnM/UlmChnjKpLI/AAAAAAAACnM/QSTqzCrbxSg/s1600/Sans+titre.png
أثارة المواقع ذات الخلفيات المصورة محط إنتباه المبرمجين ,المصممين وحتى الزبناء , لشدة الجمالية التي تضيفها الى المواقع, حتى أصبحت موضة حديثة يتهافت على القيام بها المهتمون بعالم صناعة المواقع, وقد تعددت طرق برمجة الصورة حتى تصبح خلفية للموقع سواء عن طريق java Script وهي طريقة معقدة نوعا ما بالنسبة للمبتدئين والمتوسطين وعيبها انها تحتوي على سطور أكواد طويلة يصعب معها التعديل إن إقتضى الحال, ولهذا ظهر في السنوات الاخيرة مايسمى الجكوري Jquery وهي مكتبة java Script تختصر سطور أكوادها الطويلة الى سطور معدودة وسهلة التعامل معها وإذا أردت التعمق في هذه المكتبة سأحيلك على موقعهم الرسمي هنـــــا (http://jquery.com/).
وبما أننا بصدد فهم كيفية جعل الصورة كخلفية للموقع فإننا سنتعامل مع هذه المكتبة للننشئ كود سهل الفهم ,التركيب والتعديل ولكم الخطوات كما يلي :
نبدأ على بركة الله بكود 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 :
<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
<!--
محتويات موقعك تضعها هنا وتتعامل معها كأنها
</body> <body>
-->
</div>
الان الخطوة الاخيرة هو إستدعاء الكود الاساسي jquery الى الصفحة HTML حتى يتم تفعيله Including ضعه قبل الوسم <body/> :
<script type="text/java script">
$(window).load(function() {
$("#background").fullBg();
});
</script>
هذا كل مانحتاجه لجعل الصورة كخلفية للموقع يمكنك معاينة هذا المثال مباشرة في الاسفل وأيضا تحميل الاكواد من أجل بدأ العمل بسهولة :
معاينة (https://googledrive.com/host/0B5Hl6o1jsL5lU3YtbUNHZVhfcjQ/index.html)
*******
تحميل (https://docs.google.com/file/d/0B5Hl6o1jsL5lVWtBNWQ2U1lRMkk/edit?pli=1)
منقول للفائدة
السلام عليكم ورحمة الله وبركاته
كيف تجعل الصورة كخلفية لموقعك بسهولة مع Jquery background image
http://3.bp.blogspot.com/-9u7WNruEgnM/UlmChnjKpLI/AAAAAAAACnM/QSTqzCrbxSg/s1600/Sans+titre.png
أثارة المواقع ذات الخلفيات المصورة محط إنتباه المبرمجين ,المصممين وحتى الزبناء , لشدة الجمالية التي تضيفها الى المواقع, حتى أصبحت موضة حديثة يتهافت على القيام بها المهتمون بعالم صناعة المواقع, وقد تعددت طرق برمجة الصورة حتى تصبح خلفية للموقع سواء عن طريق java Script وهي طريقة معقدة نوعا ما بالنسبة للمبتدئين والمتوسطين وعيبها انها تحتوي على سطور أكواد طويلة يصعب معها التعديل إن إقتضى الحال, ولهذا ظهر في السنوات الاخيرة مايسمى الجكوري Jquery وهي مكتبة java Script تختصر سطور أكوادها الطويلة الى سطور معدودة وسهلة التعامل معها وإذا أردت التعمق في هذه المكتبة سأحيلك على موقعهم الرسمي هنـــــا (http://jquery.com/).
وبما أننا بصدد فهم كيفية جعل الصورة كخلفية للموقع فإننا سنتعامل مع هذه المكتبة للننشئ كود سهل الفهم ,التركيب والتعديل ولكم الخطوات كما يلي :
نبدأ على بركة الله بكود 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 :
<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
<!--
محتويات موقعك تضعها هنا وتتعامل معها كأنها
</body> <body>
-->
</div>
الان الخطوة الاخيرة هو إستدعاء الكود الاساسي jquery الى الصفحة HTML حتى يتم تفعيله Including ضعه قبل الوسم <body/> :
<script type="text/java script">
$(window).load(function() {
$("#background").fullBg();
});
</script>
هذا كل مانحتاجه لجعل الصورة كخلفية للموقع يمكنك معاينة هذا المثال مباشرة في الاسفل وأيضا تحميل الاكواد من أجل بدأ العمل بسهولة :
معاينة (https://googledrive.com/host/0B5Hl6o1jsL5lU3YtbUNHZVhfcjQ/index.html)
*******
تحميل (https://docs.google.com/file/d/0B5Hl6o1jsL5lVWtBNWQ2U1lRMkk/edit?pli=1)
منقول للفائدة