افزونه jQuery برای پس زمینه کامل!

9 دیدگاه

سلام

احتمالا تا به حال با مشکل پس زمینه بزرگ یا کوچک مواجه شده اید.یعنی یک عنصر مثل header با سایز متغییر دارید و برای آن یک عکس به عنوان پس زمینه قرار داده اید.حالا اگر وضوح صفحه نمایش کاربری بالا باشد،ممکن است تصویر شما را به صورت تکرار شده ببیند و اگر وضوح بیننده ای کم باشد،احتمالا بخش کوچکی از عکس را خواهد دید.حالا چه باید کرد؟

یکی از طراحان وب ایده جالبی ارائه داده است که مشکل را تا حدود زیادی حل می کند.بدین صورت که عکس شما چه از لحاظ طولی و چه عرضی،با توجه به وضوح صفحه نمایش و یا به عبارت بهتر با سایز مرورگر بیننده،تنظیم می شود تا در همه حال با کوچک و بزرگ کردن عکس،همواره کل عکس قابل مشاهده باشد.[امیدوارم توضیحم گیج کننده نباشد چون محشر توضیح دادم!]

برای این کار یک پلاگین کوچک برای jQuery نوشته شده است که به ترتیب زیر است:

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(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;
}

اگر می خواهید پس زمینه ثابت بماند،می توانید کد fullBg را به این شکل تغییر دهید:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

در HTML به هر تگ img می توان یک id به خصوص ارائه داد.همچنین به یک div برای نگهداری محتویات نیازمندیم و بدون آن کد ما درست کار نخواهد کرد.به صورت ساده کدی مثل این لازم داریم:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
  <!-- Your site content goes here -->
</div>

برای فراخوانی تابع jQuery بایستی آن را به آخرین قسمت صفحه،یعنی درست قبل از تگ پایانی body،اضافه کنیم:

<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
</script>

منبع

در همین رابطه :   چگونه : یک فرم تماس با ما بوسیله jQuery,PHP و Ajax ایجاد کنیم ؟!
دسته بندی : jQuery

9 نظر

  1. در بعضی سایت‌ها دیده بودم به این شکل عمل می‌کنند اما نمی‌دونستم چطوری!
    عالی بود علی جان، ممنونم… 🙂

  2. دستتون بی بلا من خیلی به این امکان نیاز داشتم خیلی عالیه.
    یه چیزی سایز تصویر مهم نیست . برای مثلا رزولوشن های فول اچ دی چه رزولوشنی بزاریم بهتر جواب میگیریم

    1. سلام آقای بجانی عزیز

      خوبین ؟ متشکرم باعث افتخاره .با اجازه تون من هم لینک می کنم شما رو
      خوشحال تر میشم بازم سر بزنید به ما ^.^
      ارادتمندم

  3. بازتاب: افزونه jQuery برای پس زمینه کامل! | پرتال جامع و خودکار اسکریپت 24
  4. این کار را بدون jquery هم می شد انجام داد. من یک پروژه داشتم ولی باید عکست انقدر بزرگ باشه که تا وقته کشیده می شه، تار نشه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *