jquery对联广告

最新推荐文章于 2021-10-13 16:30:03 发布

fineline

最新推荐文章于 2021-10-13 16:30:03 发布

阅读量192

点赞数

分类专栏： js应用文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/ahook/article/details/84283248

版权

js应用专栏收录该内容

13 篇文章 0 订阅

订阅专栏

duilian.js

// JavaScript Document
(function($) { 
    $.fn.jFloat = function(o) {
    
        o = $.extend({
            top:60,  //广告距页面顶部距离
            left:0,//广告左侧距离
            right:0,//广告右侧距离
            width:100,  //广告容器的宽度
            height:360, //广告容器的高度
            minScreenW:800,//出现广告的最小屏幕宽度，当屏幕分辨率小于此，将不出现对联广告
            position:"left", //对联广告的位置left-在左侧出现,right-在右侧出现
            allowClose:true //是否允许关闭 
        }, o || {});
  var h=o.height;
      var showAd=true;
      var fDiv=$(this);
      if(o.minScreenW>=$(window).width()){
          fDiv.hide();
          showAd=false;
       }
       else{
     fDiv.css("display","block")
           var closeHtml='<div align="right" style="padding:2px;z-index:2000;font-size:12px;cursor:pointer;border-bottom:1px solid #f1f1f1; height:20px; font-family:Arial, Helvetica, sans-serif, 宋体" class="closeFloat"><span style="border:1px solid #000;height:12px;display:block;width:12px; font-family:宋体">×</span></div>';
           switch(o.position){
               case "left":
                    if(o.allowClose){
                       fDiv.prepend(closeHtml);
        $(".closeFloat",fDiv).click(function(){$(this).hide();fDiv.hide();showAd=false;})
        h+=20;
     }
                    fDiv.css({position:"absolute",left:o.left+"px",top:o.top+"px",width:o.width+"px",height:h+"px",overflow:"hidden"});
                    break;
               case "right":
                    if(o.allowClose){
                       fDiv.prepend(closeHtml)
        $(".closeFloat",fDiv).click(function(){$(this).hide();fDiv.hide();showAd=false;})
        h+=20;
     }
                    fDiv.css({position:"absolute",left:"auto",right:o.right+"px",top:o.top+"px",width:o.width+"px",height:h+"px",overflow:"hidden"});
                    break;
            };
        };
        function ylFloat(){
            if(!showAd){return}
            var windowTop=$(window).scrollTop();
            if(fDiv.css("display")!="none")
                fDiv.css("top",o.top+windowTop+"px");
        };

      $(window).scroll(ylFloat) ;
      $(document).ready(ylFloat);     
       
    }; 
})(jQuery);

正文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.8.0.min.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="duilian.js"></SCRIPT>
<title>对联广告示例</title>
</head>

<body>
<div id="adl">左侧内容</div>
<div id="adr">右侧内容</div>
<div id="ad">您的内容</div>

<script type="text/javascript">
$(document).ready(function(){
 $("#adl").jFloat({
    position:"left",
    top:0,
    height:200,
    width:100,
    left:20
  });//将页面中id为adl的容器中的内容设置为左浮动广告，广告距窗口顶部0px,距左侧20px。
 $("#adr").jFloat({
    position:"right",
    top:0,
    height:200,
    width:100,
    right:20
 });//将页面中id为adr的容器中的内容设置为右浮动广告，广告距窗口顶部0px，距右侧20px。
 $("#ad").jFloat({
    position:"left",
    top:260,
    width:100,
    height:50,
    allowClose:false
 });
						   })
</script>
</body>
</html>

fineline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery对联广告

duilian.js// JavaScript Document(function($) { $.fn.jFloat = function(o) { o = $.extend({ top:60, //广告距页面顶部距离 left:0,//广告左侧距离 right:0,/...
复制链接

扫一扫