jquery带关闭按钮全屏漂浮广告实例代码

插件源码:

 代码如下 复制代码

(function($){
 $.fn.floatAd = function(options){
  var defaults = {
   imgSrc : "/20100204193850-483274619.jpg", //漂浮图片路径
   url : "http://www.111cn.net", //图片点击跳转页
   openStyle : 1, //跳转页打开方式 1为新页面打开  0为当前页打开
   speed : 10 //漂浮速度 单位毫秒
  };
  var options = $.extend(defaults,options);
  var _target = options.openStyle == 1 ?  "target='_blank'" : '' ;
  var html = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";
            html += "  <a href='" + options.imgJumpToUrl + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a> <a href='javascript:;' id='close_float_ad' style=''>x</a>";
            html += "</div>";

        $('body').append(html);

  function init(){
   var x = 0,y = 0
   var xin = true, yin = true
   var step = 1
   var delay = 10
   var obj=$("#float_ad")
   obj.find('img.float_ad_img').load(function(){
    var float = function(){
        var L = T = 0;
     var OW = obj.width();//当前广告的宽
     var OH = obj.height();//高
     var DW = $(document).width(); //浏览器窗口的宽
     var DH = $(document).height();

         x = x + step *( xin ? 1 : -1 );
     if (x < L) {
      xin = true; x = L
     }
     if (x > DW-OW-1){//-1为了ie
      xin = false; x = DW-OW-1
     }

     y = y + step * ( yin ? 1 : -1 );
     if (y > DH-OH-1) {

      yin = false; y = DH-OH-1 ;
     }
     if (y < T) {
      yin = true; y = T
     }

     var left = x ;
     var top = y;

     obj.css({'top':top,'left':left});
    }
    var itl = setInterval(float,options.speed);
    $('#float_ad').mouseover(function(){clearInterval(itl)});
    $('#float_ad').mouseout(function(){itl=setInterval(float, options.speed)} )
   });
   // 点击关闭
   $('#close_float_ad').live('click',function(){
       $('#float_ad').hide();
   });
  }

    init();

 }; //floatAd

})(jQuery);

调用非常方便的:

 代码如下 复制代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="floatAd.js"></script>
 <script type="text/javascript">
  $(function(){
   //调用漂浮插件
   $("body").floatAd({
    imgSrc : '20100204193850-483274619.jpg',
    url:'http://www.111cn.net'
   });
  })
 </script>

时间: 2024-09-18 13:38:32

jquery带关闭按钮全屏漂浮广告实例代码的相关文章

基于javascript实现全屏漂浮广告_javascript技巧

本文实例为大家分享javascript实现全屏漂浮广告,供大家参考,具体内容如下 主要使用方法 网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域宽:document.body.offsetWidth (包括边线的宽); 网页可见区域高:document.body.offsetHeight (包括边线的宽);  setInterval setInterval动作的作用是在播放动画的时,每隔一定

Javascript实现带关闭按钮的网页漂浮广告代码

 带有关闭功能的漂浮图片的实现方法有很多,下面为大家介绍下使用Javascript是如何实现的,喜欢的额朋友可以了解下  代码如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>带关闭按钮的网页漂浮广告代码</title>  </head>  <bo

Javascript实现带关闭按钮的网页漂浮广告代码_javascript技巧

复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的网页漂浮广告代码</title> </head> <body> <div id="img" style="position: absol

js实现全屏漂浮广告移入光标停止移动_广告代码

复制代码 代码如下: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS全屏漂浮广告</title><style type="text/css">div#roll{width:100px;height:10

jQuery实现带滚动导航效果的全屏滚动相册实例_jquery

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

jquery实现的弹出层登录和全屏层注册特效代码分享_jquery

本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图:                           -------------------查看效果 下载源码-----------------

Android编程设置全屏的方法实例

  Android编程设置全屏的方法实例          本文实例讲述了Android编程设置全屏的方法.分享给大家供大家参考,具体如下: 在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其一:在代码中设置(如下) package xiaohang.zhimeng; import android.app.Activity; import andr

HTML5 video播放器全屏(fullScreen)方法实例

 HTML5 video播放器全屏(fullScreen)方法实例  首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用于很多html 元素,不仅仅是video 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>全屏问题</title> <meta http-e

Android编程设置全屏的方法实例详解_Android

本文实例讲述了Android编程设置全屏的方法.分享给大家供大家参考,具体如下: 在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其一:在代码中设置(如下) package xiaohang.zhimeng; import android.app.Activity; import android.content.pm.ActivityInfo; i