最近在开发一个项目时，需要在在网站首页加上一个随机漂浮的广告代码。其实很简单，我就上网随便去搜了一些源码。在代码预览时都很好用，但是把代码放在我写的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;}
时间： 2024-10-15 21:37:04