怎么用CSS设置悬浮广告？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用CSS设置悬浮广告？相关的知识，希望对你有一定的参考价值。

我的网站doctorwin点net.
试过用CSS的position:fixed来。在我的win7 系统下是可以的，但是别人打开的时候却不知跑那里啦。有没人可以帮我解决啊？

参考技术A <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="#" />
<meta name="description" content="#" />
<meta content="#" name="keywords" />
<title>11</title>
</head>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id=duilian01 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 6px;"></div>
<div id=duilian02 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 896px;"></div>
<script language=javascript src="js/scrolljs.js" type=text/javascript></script>
<table width="778" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">
<tr>
<td></td>
</tr>
</table>
</BODY></HTML>

---------------------------------------下面是JS代码：命名scrolljs.js------------------------------------------
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;

var tmp1= tmp2= tmp3 =0;
tmp1 = document.body.clientHeight;

var isArrayRightBanner = false;
var has2ndScraper = false;
if (typeof(duilian02.length) == "number") isArrayRightBanner = true;
if (typeof(duilian01) == "object") has2ndScraper = true;

function makewing()

tmp2 = document.body.clientHeight;
if(tmp1 != tmp2)
tmp3 = tmp2 - tmp1;
tmp1 = tmp2;
if(tmp3<0)

if(IE)

diffY = document.body.scrollTop;
diffX = 0;

else if(NS)

diffY = self.pageYOffset;
diffX = self.pageXOffset;


if(diffY != lastScrollY)

percent = .1 * (diffY - lastScrollY);

if(percent > 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);

if(IE)

if (isArrayRightBanner)

if (document.all.skyflash != null)
document.all.skyflash.style.pixelTop += percent;

document.all.duilian02[0].style.pixelTop += percent;
document.all.duilian02[1].style.pixelTop += percent;

else

if (document.all.skyflash != null)
document.all.skyflash.style.pixelTop += percent;

document.all.duilian02.style.pixelTop += percent;

if (has2ndScraper) document.all.duilian01.style.pixelTop += percent;

else if(NS)

if (isArrayRightBanner)

document.skyflash.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;

else

document.skyflash.top += percent;
document.duilian02.top += percent;

if (has2ndScraper) document.duilian01.top += percent;


lastScrollY = lastScrollY + percent;


if(diffX != lastScrollX)

percent = .1 * (diffX - lastScrollX);

if(percent > 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);

if(IE)

if (isArrayRightBanner)

if (document.all.skyflash != null)
document.all.skyflash.style.pixelLeft += percent;

document.all.duilian02[0].style.pixelLeft += percent;
document.all.duilian02[1].style.pixelLeft += percent;

else

if (document.all.skyflash != null)
document.all.skyflash.style.pixelLeft += percent;

document.all.duilian02.style.pixelLeft += percent;

if (has2ndScraper) document.all.duilian01.style.pixelLeft += percent;

else if(NS)

if (isArrayRightBanner)

document.skyflasy.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;

else

document.skyflash.top += percent;
document.duilian02.top += percent;

if (has2ndScraper) document.duilian01.top += percent;

lastScrollY = lastScrollY + percent;


if(NS || IE) action = window.setInterval("makewing()",1);
单独建一个文件夹命名js，把js文件放入文件夹内，防止路径不对出错。 参考技术B 建议你在网上另找一段js代码来实现吧 参考技术C <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="#" />
<meta name="description" content="#" />
<meta content="#" name="keywords" />
<title>11</title>
</head>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id=duilian01 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 6px;"></div>
<div id=duilian02 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 896px;"></div>
<script language=JavaScript src="js/scrolljs.js" type=text/javascript></script>
<table width="778" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">
<tr>
<td></td>
</tr>
</table>
</BODY></HTML>

---------------------------------------下面是JS代码：命名scrolljs.js------------------------------------------
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;

var tmp1= tmp2= tmp3 =0;
tmp1 = document.body.clientHeight;

var isArrayRightBanner = false;
var has2ndScraper = false;
if (typeof(duilian02.length) == "number") isArrayRightBanner = true;
if (typeof(duilian01) == "object") has2ndScraper = true;

function makewing()

tmp2 = document.body.clientHeight;
if(tmp1 != tmp2)
tmp3 = tmp2 - tmp1;
tmp1 = tmp2;
if(tmp3<0)

if(IE)

diffY = document.body.scrollTop;
diffX = 0;

else if(NS)

diffY = self.pageYOffset;
diffX = self.pageXOffset;


if(diffY != lastScrollY)

percent = .1 * (diffY - lastScrollY);

if(percent > 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);

if(IE)

if (isArrayRightBanner)

if (document.all.skyflash != null)
document.all.skyflash.style.pixelTop += percent;

document.all.duilian02[0].style.pixelTop += percent;
document.all.duilian02[1].style.pixelTop += percent;

else

if (document.all.skyflash != null)
document.all.skyflash.style.pixelTop += percent;

document.all.duilian02.style.pixelTop += percent;

if (has2ndScraper) document.all.duilian01.style.pixelTop += percent;

else if(NS)

if (isArrayRightBanner)

document.skyflash.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;

else

document.skyflash.top += percent;
document.duilian02.top += percent;

if (has2ndScraper) document.duilian01.top += percent;


lastScrollY = lastScrollY + percent;


if(diffX != lastScrollX)

percent = .1 * (diffX - lastScrollX);

if(percent > 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);

if(IE)

if (isArrayRightBanner)

if (document.all.skyflash != null)
document.all.skyflash.style.pixelLeft += percent;

document.all.duilian02[0].style.pixelLeft += percent;
document.all.duilian02[1].style.pixelLeft += percent;

else

if (document.all.skyflash != null)
document.all.skyflash.style.pixelLeft += percent;

document.all.duilian02.style.pixelLeft += percent;

if (has2ndScraper) document.all.duilian01.style.pixelLeft += percent;

else if(NS)

if (isArrayRightBanner)

document.skyflasy.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;

else

document.skyflash.top += percent;
document.duilian02.top += percent;

if (has2ndScraper) document.duilian01.top += percent;

lastScrollY = lastScrollY + percent;


if(NS || IE) action = window.setInterval("makewing()",1);
单独建一个文件夹命名js，把js文件放入文件夹内，防止路径不对出错本回答被提问者采纳 参考技术D .div1
position: fixed;
top：100px；
left：100px；
 第5个回答  2010-12-01 不兼容的东西不要用。

我用css定位了导航，怎么当网页下拉到一定高度的时候变成悬浮的？

我想用css定位导航，当下拉页面到一定高度的时候把导航变成悬浮。。。

1、正常布局网站，导航栏也正常布局。
2、自定义导航栏制作（可复制原来的导航栏，也可以另制作一份），绝对定位，隐藏。
3、在页面scroll事件中进行判断，滚动到指定像素位置，自定义的导航栏出现，并且随着scroll事件对top值不断更新，一句jquery的scrollTop。
4、如果向上回滚，判断scrollTop值，隐藏自定义导航栏。 参考技术A 光用css是不能的 参考技术B 光用css是不能的,用jQuery 参考技术C

这个要用js来判断的,下面这个是例子

<!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" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../css/global.css"/>

<style type="text/css">
<!--
/***比较页***/
body_background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
_background-attachment: fixed;  /* 确保滚动条滚动时，元素不闪动*/
/***比较浮层***/
.compareDivbackground:#d6e7f5; border:1px solid #6eaadb; width:958px; font-weight:bold; padding:7px 0
.compareDiv .inBoxposition:relative; width:100%;
.compareDiv .inBox .theadfont-weight:lighter;
.compareDiv tabletable-layout:fixed
.compareDiv table tdoverflow:hidden;word-wrap:break-word;  text-align:center;
.compareDiv spanheight:18px; overflow:hidden; display:block; padding:0 5px
.bjTable .compareDiv td, .bjTable .compareDiv th background:#d6e7f5;
.comDivposition:fixed; top:0; z-index:999;_position:absolute;_top: expression(documentElement.scrollTop);overflow:visible;
.compareDiv .arrowwidth:13px; height:15px; padding:0; position:absolute; top:-2px; right:5px; display:block;background:url(../images/duibi.gif) no-repeat 0px -75px; cursor:pointer

 -->
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
  //浮动
  $(function()
   var h = $('#warpDiv').offset().top;
        $(window).scroll(function()
        if($(window).scrollTop() >h )$('#compareDiv').addClass('comDiv');
        else$('#compareDiv').removeClass('comDiv');
        );
  )
      
 -->
</script>
</head>

<body>
<div class="wrap">
<div style="height:300px;"></div>
<div id="warpDiv"></div>
<div class="compareDiv" id="compareDiv">
                    <div class="inBox">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <th class="aLink">
                            <td width="119" class="thead">产品名称</td>
                            <td width="198" class="td1"><span><a href="#" target="_blank">苹果 iPhone 4(16GB)</a></span></td>
                            <td width="173" class="td2"><span><a href="#" target="_blank">诺基亚 C5-03</a></span></td>
                            <td width="185"><a href="#" target="_blank">&nbsp;</a></td>
                            <td width="160"><a href="#" target="_blank">&nbsp;</a></td>
                            <td width="123"><a href="#" target="_blank">&nbsp;</a></td>
                          </th>
                        </table>
                    <i class="arrow" onclick="document.getElementById('compareDiv').style.visibility='hidden';"></i>
                    </div>
                </div>
                
                <div class="blank10"></div>
                <div style="height:1500px; background:#FFFFCC;"></div> 
     <div class="footer"></div>
              
 </div>               
</body>
</html>

本回答被提问者采纳 参考技术D 这个效果叫智能浮动层效果 百度出来一坨

以上是关于怎么用CSS设置悬浮广告？的主要内容，如果未能解决你的问题，请参考以下文章

悬浮广告

JS实现弹性漂浮广告代码

层的应用-悬浮的广告层

JS-特效 ～ 02. 屏幕滚动事件 DTDscroll顶部悬浮导航两侧跟随广告返回顶部小火煎

js或者CSS带关闭的漂浮广告代码

我用css定位了导航，怎么当网页下拉到一定高度的时候变成悬浮的？