您只怕感兴趣的稿子:

  • js
    左右漂移对联广告特效代码
  • js
    左右浮动对联广告代码示例
  • js写出遮罩层登录框和楹联广告并机关跟随滚动条滚动
  • w3c证明下可运转包容性比较好的js对联广告集合
  • js
    对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
  • 符合规范的js对联广告
  • [对联广告] JS脚本类
  • JS右下角广告窗口代码(可减弱、张开及停业)
  • js达成网址最上部可关闭的转移广告条代码
  • JS落成可关闭的对联广告效应代码

JS实现可点击张开与关闭的左臂广告代码,js代码

本文实例陈述了JS实现可点击张开与关闭的侧边广告代码。分享给大家供大家参谋。具体如下:

那边介绍的是JS完毕网页上可点击展开、关闭的右臂广告代码,展现情势类似对联广告,可是操作形式差异等,点击时候会暗藏在显示屏在侧边,可是否完全隐形,仍显示三个图片竖条的广告,并且点击“呈现”的时候,它会再度打开广告,这种广告方可升高网页的用户体验。

运转作效果果截图如下:

图片 1

图片 2

在线演示地址如下:

实际代码如下:

<!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>
<title>网页上可点击展开、关闭的左侧广告代码</title>
</head>
<body>
<div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;">
<div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="图片 3" border="0"></a>
</div>
<div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">关 闭</a> 
</div>
</div>
<div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;">
<div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="图片 4" border="0"></a>
</div>
<div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展开</a>
</div>
</div>
<script type="text/javascript">
function bar1190_show(){
document.getElementById('Bar1190_big').style.display='';
document.getElementById('Bar1190_small').style.display='none';
}
function bar1190_hidden(){
document.getElementById('Bar1190_big').style.display='none';
document.getElementById('Bar1190_small').style.display='';
}
var autohide1190 = setTimeout("bar1190_hidden()",6000);
</script>
</body>
</html>

盼望本文所述对我们的javascript程序设计有着协理。

本文实例呈报了JS落成可点击展开与关闭的左侧广告代码。分享给大家供大家参谋。具体如…

可望本文所述对我们的JavaScript程序设计有所帮衬。

1

图片 5

在线演示地址如下:

1

此间介绍的是JS达成网页上可点击展开、关闭的左边手广告代码,表现情势类似对联广告,可是操作格局不相同等,点击时候会暗藏在荧屏在侧面,然并非截然隐形,仍显得二个图片竖条的广告,并且点击“展现”的时候,它会重新张开广告,这种广告方可加强网页的用户体验。

那是一款自行定位顶端的悬浮菜单栏代码,不管您什么拉动滚动条,它会平素呈现在网页的最最上端,用作网址的头号导航或公告等等的可比适中吧。

符合标准的正规干活的楹联广告

正文实例叙述了JS达成可点击张开与关闭的左侧广告代码。分享给我们供大家参谋。具体如下:

1

运维作效果果截图如下:

<!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>
<title>自动固定顶部的悬浮菜单栏代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#content{width:600px;margin:0 auto;border:1px solid #f00;}
ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;font-size:14px;font-weight:bold;height:100px;line-height:100px;}
#float_banner{position:absolute;top:0;left:50%;width:900px;margin-left:-450px;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;}
</style>
</head>
<body>
<div id="float_banner">这里是顶部的横幅,随着页面滚动而浮动</div> 
<ul id="content">
 <li class="item">第一块内容</li>
 <li class="item">第二块内容</li>
 <li class="item">第三块内容</li>
 <li class="item">第四块内容</li>
 <li class="item">第五块内容</li>
 <li class="item">第六块内容</li>
 <li class="item">第七块内容</li>
 <li class="item">第八块内容</li>
 <li class="item">第九块内容</li>
 <li class="item">第十块内容</li>
</ul>
<script language="javascript">
var speed = 100;
var scrollTop = null;
var hold = 0;
var float_banner;
var pos = null;
var timer = null;
var moveHeight = null;
float_banner = document.getElementById("float_banner");
window.onscroll=scroll_ad;
function scroll_ad(){
 scrollTop = document.documentElement.scrollTop+document.body.scrollTop;
 pos = scrollTop - float_banner.offsetTop;
 pos = pos/10
 moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);
 if(moveHeight!=0){
  float_banner.style.top = float_banner.offsetTop+moveHeight+"px";
  setTimeout(scroll_ad,speed);
 }
//alert(scrollTop);
}
</script>
</body>
</html>

1

<!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>
<title>网页上可点击展开、关闭的左侧广告代码</title>
</head>
<body>
<div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;">
<div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="图片 6" border="0"></a>
</div>
<div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">关 闭</a> 
</div>
</div>
<div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;">
<div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="图片 7" border="0"></a>
</div>
<div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展开</a>
</div>
</div>
<script type="text/javascript">
function bar1190_show(){
document.getElementById('Bar1190_big').style.display='';
document.getElementById('Bar1190_small').style.display='none';
}
function bar1190_hidden(){
document.getElementById('Bar1190_big').style.display='none';
document.getElementById('Bar1190_small').style.display='';
}
var autohide1190 = setTimeout("bar1190_hidden()",6000);
</script>
</body>
</html>

正文实例陈诉了JS完结全自动定位最上部的上浮菜单栏效果。分享给大家供大家仿效。具体如下:

1

希望本文所述对我们的javascript程序设计有所帮忙。

图片 8

1

实际代码如下:

运作效果截图如下:

1

您大概感兴趣的篇章:

  • JS实现悬浮移动窗口(悬浮广告)的特效
  • JavaScript
    悬浮窗口达成代码
  • JS调节弹出悬浮窗口(一览画面)的实例代码
  • JS达成侧悬浮浮动实例代码
  • javascript 鼠标悬浮图片展现原图
    移出鼠标后原图消失(多图)
  • js
    固定悬浮效果落实思路代码
  • js点击出现悬浮窗效果不利用JQuery插件
  • js
    左右浮动对联广告特效代码
  • js制作的鼠标悬浮时爆发的下拉框效果
  • javaScript兑现鼠标在文字上漂移时弹出悬浮层效果

[Ctrl+A 全选
注:如需引进外界Js需刷新本事执行]

在线演示地址如下:

切实代码如下:

接待待上访谈脚本之家 www.jb51.net

图片 9

1

1

1

1

1