jquery实现的让图片在网页的可视区域里四处漂浮的效果及在线实例演示亲测 收藏

文章标签: 图片特效
  • :
  • 05-14 14:34
  • :
  • 21次
  • :
  • 0条
  • 1赞

简介本文分享给大家一个用jquery开发的图片漂浮效果,并且附带有完整的在线实例演示。l

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})	
});


您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-13 16:17:41