jquery实现的让图片在网页的可视区域里四处漂浮的效果

Posted 2020-11-10 乌云上

　　本文分享给大家一个用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}) 
});