JavaScript实现可点击展开与关闭的左侧悬浮广告
作者:拾光时间:2026-10-29 14:34:50浏览:183
本文介绍一种基于JavaScript实现的左侧悬浮广告效果,支持点击展开与关闭操作。广告默认显示为屏幕左侧的竖条图片,点击后可完全展开或隐藏,提升用户体验。代码包含HTML结构与JS交互逻辑,适合需要动态广告展示的网站使用。
JavaScript左侧可展开关闭广告实现
本文分享了一段使用JavaScript实现的左侧广告代码,该广告支持点击展开与关闭功能,供读者参考学习。
该代码实现的效果类似于常见的对联广告,但交互方式有所不同。当用户点击时,广告会向屏幕左侧收起,仅保留一个竖条图片作为提示;再次点击“显示”按钮时,广告会重新展开。这种设计有助于提升网页的用户体验。
以下是该广告效果的运行截图展示。


如需在线查看演示效果,可访问以下链接。
http://demo.jb51.net/js/2015/js-click-show-close-style-adv-codes/
具体实现代码如下所示。
<!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="" 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="" 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处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
