漂浮广告代码/JQuery插件
软源LOGO
讲述咱程序员自己的故事

位置:软源 »编程 »文章

漂浮广告代码/JQuery插件

coolapp;2012-12-07 16:47:25;浏览:5346

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">

注意:
  • Opera浏览器中用JQuery1.7.x测试失败,理由是Opera认为JQuery.1.7.x中有错误,导致$对象失效。
  • 换成JQuery1.8.3测试成功。 测试的浏览器版本:Opera/9.80 (Windows NT 6.1; U; zh-cn) Presto/2.10.289 Version/12.00)

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

/*coolapp@163.com,2012-12-7*/(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>
分享到:
(转载→)