本文分享给大家一个用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}) });jquery实现的让图片在网页的可视区域里四处漂浮的效果
原文地址：https://www.cnblogs.com/1906859953Lucas/p/9139075.html