پلاگین جی کوئری Background Position برای ورژن +1.8 - طراحی سایت | ساخت سایت | قالب وردپرس

پلاگین جی کوئری Background Position برای ورژن +۱٫۸

۲۰ مرداد ۱۳۹۲
813 بازدید
فاقددیدگاه
jQuery-Background-Position

یکی از افکتهای زیبایی که با جی کوئری می توان ایجاد کرد تغییر موقعیت پس زمینه است یا همان Background Position است مانند این مثال اما از ورژن ۱٫۸ جی کوئری این امکان دچار مشکل شده است و اگر شما کد جی کوئری مثل این داشته باشید کار نمی کند:

<script type="text/javascript">
var dty = jQuery.noConflict();
dty(document).ready(function() {
dty("#menu1 li a").css("background-position","0px -13px");
dty("#menu1 li a").mouseover(function(){  
dty(this).stop().animate({'background-position': '-153px -13px'}, 300, 'linear');
	});	
dty("#menu1 li a").mouseout(function(){  
dty(this).stop().animate({'background-position': '0px -13px'}, 200, 'linear');
    });
});
</script>

تنها ۲ راه دارید یا اینکه آن را به صورت درصدی بنویسید مثل حالت زیر،که البته تنظیم کردن آن مشکل است:

<script type="text/javascript">
var dty = jQuery.noConflict();
dty(document).ready(function() {
dty("#menu1 li a").css("background-position","0%");
dty("#menu1 li a").mouseover(function(){  
dty(this).stop().animate({'background-position': '80%'}, 300, 'linear');
	});	
dty("#menu1 li a").mouseout(function(){  
dty(this).stop().animate({'background-position': '0%'}, 200, 'linear');
    });
});
</script>

اما راه بهتر آن استفاده از کد اصلاحی زیر است که با اضافه کردن آن به راحتی می توانید از تنظیمات عادی ، مثل کدی که ابتدا توضیح داده شد ، استفاده کنید:

(function($) {
   if(!document.defaultView || !document.defaultView.getComputedStyle){
       var oldcss = jQuery.css;
       jQuery.css = function(elem, name, force){
           if(name === 'background-position'){
               name = 'backgroundPosition';
           }
           if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
               return oldcss.apply(this, arguments);
           }
           var style = elem.style;
           if ( !force && style && style[ name ] ){
               return style[ name ];
           }
           return oldcss(elem, 'backgroundPositionX', force) +' '+ oldcss(elem, 'backgroundPositionY', force);
       };
   }

   var oldAnim = $.fn.animate;
   $.fn.animate = function(prop){
       if('background-position' in prop){
           prop.backgroundPosition = prop['background-position'];
           delete prop['background-position'];
       }
       if('backgroundPosition' in prop){
           prop.backgroundPosition = '('+ prop.backgroundPosition + ')';
       }
       return oldAnim.apply(this, arguments);
   };

   function toArray(strg){
       strg = strg.replace(/left|top/g,'0px');
       strg = strg.replace(/right|bottom/g,'100%');
       strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
       var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
       return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
   }

   $.fx.step.backgroundPosition = function(fx) {
       if (!fx.bgPosReady) {
           var start = $.css(fx.elem,'backgroundPosition');

           if(!start){//FF2 no inline-style fallback
               start = '0px 0px';
           }

           start = toArray(start);

           fx.start = [start[0],start[2]];

           var end = toArray(fx.end);
           fx.end = [end[0],end[2]];

           fx.unit = [end[1],end[3]];
           fx.bgPosReady = true;
       }

       var nowPosX = [];
       nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
       nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
       fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
   };
})(jQuery);

یا اینکه از لینک زیر پلاگین را دریافت کنید:

دانلود

امتیاز:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...
اشتراک گذاری:
مطالب مرتبط
دیدگاه شما