jquery實現的讓圖片在網頁的可視區域裡四處漂浮的效果

烏雲上發表於2018-06-05
jQuery網頁

　　本文分享給大家一個用jquery開發的圖片漂浮效果。

jquery圖片漂浮效果，常見的就是網頁裡四處漂來漂去的廣告了，漂到邊緣時還會反彈和拐彎。

下面來看具體的程式碼，先看要實現漂亮效果的這個jquery外掛的原始碼：

(function($){ 
$.fn.adFloat=function(options){ 
return new AdFloat(this,options);
} 
var AdFloat=function(element,options){ 
this.element=$(element); 
this.options=$.extend({ 
width:100, //預設的廣告的寬 
height:150, //預設的廣告的高 
top:0, //預設的廣告的Y座標 
left:0, //預設的廣告的X座標 
delay:30, //延遲 
step:4 //預設的廣告每次移動的距離(畫素) 
},options); 
this.interval=null; 
this.xPos=this.options.left; 
this.yPos=this.options.top; 
this.yon=0; 
this.xon=0; 
this.isPause=false; 
this.init(); 
}; 
AdFloat.prototype={ 
init:function(){ 
var me=this; 
me.element.css("display","block"); 
me.element.css({position:"absolute",left:me.options.left,top:me.options.top,width:me.options.width,height:me.options.height,overflow:"hidden"}) 
me.element.hover(function(){clearInterval(me.interval)},function(){me.interval=setInterval(function(){me.changePos();},me.options.delay);}); 
$(document).ready(function(){me.start();}); 
}, 
changePos:function(){ 
var me=this; 
var clientWidth=$(window).width(); 
var clientHeight=$(window).height(); 
var Hoffset=me.options.height; 
var Woffset=me.options.width; 
me.element.css({left:me.xPos+$(document).scrollLeft(),top:me.yPos+$(document).scrollTop()}); 
if(me.yon){ 
me.yPos=me.yPos+me.options.step; 
}else{ 
me.yPos=me.yPos-me.options.step; 
} 
if(me.yPos<0){me.yon=1;me.yPos=0;} 
if(me.yPos>=(clientHeight-Hoffset)){me.yon=0;me.yPos=(clientHeight-Hoffset);} 
if(me.xon){ 
me.xPos=me.xPos+me.options.step; 
}else{ 
me.xPos=me.xPos-me.options.step; 
} 
if(me.xPos<0){me.xon=1;me.xPos=0;} 
if(me.xPos>=(clientWidth-Woffset)){me.xon=0;me.xPos=(clientWidth-Woffset);} 
}, 
start:function(){ 
var me=this; 
me.element.css("top",me.yPos); 
me.interval=setInterval(function(){me.changePos();},me.options.delay); 
} 
} 
})(jQuery);

要使用的時候，也是非常簡單的：

$(function(){ 
$("#aijquery").adFloat({width:161,height:55,top:0,left:0}) 
});


相關文章