标签：style blog http io ar color os 使用 sp
最近在开发一个项目时，需要在在网站首页加上一个随机漂浮的广告代码。其实很简单，我就上网随便去搜了一些源码。在代码预览时都很好用，但是把代码放在我写的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;}
标签：style blog http io ar color os 使用 sp
原文地址：http://www.cnblogs.com/niuliben/p/4148470.html
