网页漂浮代码的使用方法

浏览数：37 / 时间：2015年06月09日

最近在开发一个项目时，需要在在网站首页加上一个随机漂浮的广告代码。其实很简单，我就上网随便去搜了一些源码。在代码预览时都很好用，但是把代码放在我写的php代码里就不好用了。之后我就一直在找各种原因，纠结了很久都没找出错误之处。后来经理告诉我，如果网页上有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时，漂浮代码一般都会失效。因为浏览器是遵循这个协议的，而一般的漂浮代码对这个协议不支持。简单来说就是兼容性的问题。所以就不好用了，后来去网上找了一个很好的脚本，在这里跟大家分享一下。

index.html

<!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=UTF-8" />
<title>jQuery制作图片全屏随机漂浮广告代码 - xw素材网</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>
<link type="text/css" rel="stylesheet" href="css/ad.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/floatingAd.js"></script>
<script type="text/javascript">
$(function(){

    $.floatingAd({
        //频率
        delay: 60,
        //超链接后是否关闭漂浮
        isLinkClosed: true,
        //漂浮内容
        ad:    [{
            //关闭区域背景透明度(0.1-1)
            headFilter: 0.3,
            //图片
            ‘img‘: ‘images/baidu_sylogo1.gif‘,
            //图片高度
            //‘imgHeight‘: 220,
            //图片宽度
            //‘imgWidth‘: 176,
            //图片链接
            ‘linkUrl‘: ‘http://sc.chinaz.com/‘,
            //浮动层级别
            ‘z-index‘: 100,
            //标题
            ‘title‘: ‘牛立犇‘
        },{
            ‘img‘: ‘images/logo_png.png‘,
            //‘imgHeight‘: 220,
            //‘imgWidth‘: 176,
            ‘linkUrl‘: ‘http://sc.chinaz.com/‘,
            ‘z-index‘: 101,
            ‘title‘: ‘牛立犇‘,
            //关闭按键图片
            ‘closed-icon‘: ‘images/list-remove.png‘
        }],
        //关闭事件
        onClose: function(elem){
            alert(‘关闭‘);
        }
    });
    
    $("#aa").floatingAd({
        onClose:function(elem){}
    });
    
});
</script>
</head>

<body style="overflow:hidden;">


</body>
</html>

style.css

@charset "utf-8";
/* floatingAd */
.floatingAd .ad{z-index:100;background:none;position:absolute;display:none;}
.floatingAd a{color:#000000; display:inline-block;text-decoration:none;}
.floatingAd a img{border:0;}
.floatingAd .close{display:none;}
.floatingAd .opacity{position:absolute; top:0; width:100%; height:25px; background-color:#000000; opacity:0.20; filter:alpha(opacity = 20);}
.opacity1{opacity:0.90; filter:alpha(opacity = 90);}
.floatingAd .text{position:absolute; top:0; width:100%; height:25px; color:#000000; line-height:25px; }
.floatingAd .text .button{position:relative;float:right;top:5px;right:5px;width:16px;height:16px;background:url("../images/close.png") no-repeat;cursor:pointer;}
.floatingAd .text .title{position:relative;float:left;font-size:12px;margin-left:5px;}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

网页漂浮代码的使用方法