首页 > 代码库 > 网页漂浮代码的使用方法

网页漂浮代码的使用方法

2024-08-06 13:14:49   220人阅读

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

 

网页漂浮代码的使用方法


联系
我们