CSS 网页两边的悬浮广告谁有制作代码，最好是，源文件！谢谢！！！！可追加悬赏！！！！

发布网友发布时间：2022-04-06 11:38

共4个回答

懂视网时间：2022-04-06 15:59

本文给大家介绍css如何实现酷炫的右侧悬浮菜单栏效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

默认显示效果：

鼠标悬浮效果：

HTML、JS代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-1.11.1.min.js"></script>
 <style type="text/css">
  *{margin:0;padding:0;}
  body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#fff; }
  a{text-decoration:none;color:#333;}
  .rightNav{ position:fixed; width:140px; right:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank); }
  .rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden; cursor:pointer; right:-110px; }
  .rightNav a:hover{ text-decoration:none; color:#39A4DC; }
  .rightNav a:hover em{ background:#00b700}
  .rightNav a em{ display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
  .rightNav a.new em{ background:#f60;}
 </style>
 </head>
 <body>
 <div class="rightNav">
  <a class="new" href="#effect0" style="right: -110px;"><em>0</em>综合/组合[new]</a>
  <a href="#effect1" style="right: -110px;"><em>1</em>书签切换</a>
  <a href="#effect2" style="right: -110px;"><em>2</em>幻灯片</a>
  <a href="#effect3" style="right: -110px;"><em>3</em>带按钮切换</a>
  <a class="new" href="#effect4" style="right: -110px;"><em>4</em>导航/菜单[new]</a>
  <a class="new" href="#effect5" style="right: -110px;"><em>5</em>切换加载[new]</a>
  <a href="#effectT1" style="right: -110px;"><em>6</em>其它效果</a>
  <a href="#effectT1" style="right: -110px;"><em>7</em>特殊</a>
 </div>
 <script type="text/javascript">
  
  //右侧导航
  var btb=$(".rightNav");
  var tempS;
  $(".rightNav").hover(function(){
   var thisObj = $(this);
   tempS = setTimeout(function(){
   thisObj.find("a").each(function(i){
   var tA=$(this);
   console.log(i);
   setTimeout(function(){ tA.animate({right:"0"},200);},50*i);
   });
  },200);
 
  },function(){
  if(tempS){ clearTimeout(tempS); }
  $(this).find("a").each(function(i){
   var tA=$(this);
   setTimeout(function(){ tA.animate({right:"-110"},200,function(){
   });},50*i);
  });
 
  });
 
  

 </script>
 </body>
</html>

总结：

热心网友时间：2022-04-06 13:07

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>悬浮广告</title>
</head>

<body>
<div style="height:900px; display:block;"></div>
<div id="AdLayer1" style='position: absolute; ;z-index:1; left:100px; border:1px #DDD solid; width:36px; height:200px; background-color:#CCC;'></div>
<div id="AdLayer2" style='position: absolute; ;z-index:1; right:100px; border:1px #DDD solid; width:36px; height:200px; background-color:green;'></div>

<script type="text/javascript">
// 页面初始化
function initEcAd() {
document.all.AdLayer1.style.posTop = 200;
document.all.AdLayer1.style.visibility = 'visible'
document.all.AdLayer2.style.posTop = 200;
document.all.AdLayer2.style.visibility = 'visible'
MoveLeftLayer('AdLayer1');
MoveRightLayer('AdLayer2');
}
// 移动左面的广告层
function MoveLeftLayer(layerName) {
var x = 100;
var y = 100;// 左侧广告距离页首高度
var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = parseInt(y)");
eval("document.all." + layerName + ".style.posLeft = x");
setTimeout("MoveLeftLayer('AdLayer1');", 20);
}
// 移动右边的广告层
function MoveRightLayer(layerName) {
var x = 100;
var y = 100;// 右侧广告距离页首高度
var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posRight = x");
setTimeout("MoveRightLayer('AdLayer2');", 20);
}
initEcAd()
</script>
</body>
</html>

热心网友时间：2022-04-06 14:25

<!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" lang="zh-cn">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<title>符合web标准且可单独关闭的多幅对联广告 - 网页特效观止-网页特效代码|JsCode.CN|</title>
</head>

<body>
<SCRIPT language="JavaScript">
//符合web标准且可关闭的多幅对联广告
//Modified By 在远方 www.jscode.cn
<!--
lastScrollY = 0;
function heartBeat(){

热心网友时间：2022-04-06 16:00

tion:fixed;
用固定就行。
如：
HTML
<div class="pos-fix">
<div class="links">联系我</div>
<div class="links">联系我</div>
</div>

CSS:
.pos-fix
.pos-fix .links

你就照这个模式搬进去就行了。

如果还有不明白的话，直接HI吧……

CSS 网页两边的悬浮广告 谁有制作代码，最好是，源文件！谢谢！！！！可追加悬赏！！！！

CSS 网页两边的悬浮广告谁有制作代码，最好是，源文件！谢谢！！！！可追加悬赏！！！！