漂浮广告代码/JQuery插件

2012-12-07  金城  5682

XHTML下运行

确认你的html页面有如下两行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

注意：

将以下代码存入一个JS文件中，用<script type="javascript"src="/jquery/jquery.floatfly.js"></srcipt>调用

(function($){
 $.fn.floatfly=function(options){
  var opts=$.extend({},$.fn.floatfly.defaults,options);
  return this.each(function(){
   var $ff=$("<div$gt;</div$gt;").append(this);
   $('body').append($ff);

   var $ctrl=$('<div$gt;<a$gt;×</a$gt;<div$gt;').css({'cursor':'pointer','display':'block','font-size':'12px','width':'14px','height':'14px','line-height':'14px'});
   if(opts.ctrlPos=='top')$ff.prepend($ctrl);
   else $ff.append($ctrl);

   if(opts.imgBorder=='none'||opts.imgBorder=='0')$ff.find('*').css('border','none');

   var D=document;var DE=D.documentElement;var A=3
   $ff.css('position','absolute');

   var ffw=$ff.width(),ffh=$ff.height();
   var rw=DE.clientWidth-ffw,rh=DE.clientHeight-ffh;
   var ffl=Math.round(rw*Math.random()+DE.scrollLeft);
   var fft=Math.round((rh)* Math.random()+DE.scrollTop);
   $ff.css({'left':ffl+'px','top':fft+'px'});
   var ffxa=(Math.random()*A+.3),ffya=(Math.random()*A+.3);
   if(Math.random()$gt;.5)ffxa=-ffxa;if(Math.random()$gt;.5)ffya=-ffya;
   setInterval(function(){
    ffxa*=(1.5-Math.random());if(Math.abs(ffxa)<.1)ffxa=ffxa$gt;0?.5:-.5;else if(Math.abs(ffxa)$gt;A)ffxa=ffxa$gt;0?A:-A;
    ffya*=(1.5-Math.random());if(Math.abs(ffya)<.1)ffxa=ffya$gt;0?.5:-.5;else if(Math.abs(ffya)$gt;A)ffya=ffya$gt;0?A:-A;
   },3000);
   var floatfly=function(){
    rw=DE.clientWidth-ffw+DE.scrollLeft,rh=DE.clientHeight-ffh+DE.scrollTop;
    ffl+=ffxa;if(ffl$gt;rw){ffl=rw-ffxa;ffxa=-ffxa}else if(ffl<DE.scrollLeft){ffl=DE.scrollLeft-ffxa;ffxa=-ffxa;}
    fft+=ffya;if(fft$gt;rh){fft=rh-ffya;ffya=-ffya}else if(fft<DE.scrollTop){fft=DE.scrollTop-ffya;ffya=-ffya;}
    $ff.css({'top':Math.round(fft)+'px','left':Math.round(ffl)+'px','display':'block','visibility':'visible'});
   }
   var hdl=setInterval(floatfly,100);


   $ctrl.click(function(){
    clearInterval(hdl);$ff.fadeOut(99,function(){$ff.reomve();});
    floatfly=null;
    return false;
 }).mouseover(function(){clearInterval(hdl);}).mouseout(function(){clearInterval(hdl);hdl=setInterval(floatfly,100);});
   $ff.mouseover(function(){clearInterval(hdl);}).mouseout(function(){clearInterval(hdl);hdl=setInterval(floatfly,100);});
  });
 };
 $.fn.floatfly.defaults={
  ctrlPos:'top',
  imgBorder:'none'
 };

 $.fn.floatfly.setDefaults=function(settings){
  $.extend( $.fn.floatfly.defaults,settings);
 };
})(jQuery);

调用举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Test</title>
<script type="text/javascript"src="/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript"src="/jquery/jquery.floatfly.js"></script>
<style type="text/css">
 #fff{width:60px;height:60px;background:#069;text-align:center;line-height:60px;}
</style>
<script type="text/javascript">
 $(function(){$('.floatfly').floatfly()});
</script>
</head>

<body>
<a class="floatfly"href=""title="漂浮的广告"><img src="http://www.mycoolapp.net/images/logo.png"alt="软源"width="106"height="52"/></a>
<div id="fff"class="floatfly">TEST</div>
</body>
</html>
javascriptjs代码JQueryhtml漂浮广告漂浮层防屏蔽xhtml文档类型插件扩展