JS实现可点击展开与关闭的左侧广告代码

更新时间：2015年09月02日 10:28:59 作者：企鹅

这篇文章主要介绍了JS实现可点击展开与关闭的左侧广告代码,通过鼠标onClick事件调用自定义javascript函数实现页面元素及样式的显示与隐藏效果,非常简单实用,需要的朋友可以参考下

本文实例讲述了JS实现可点击展开与关闭的左侧广告代码。分享给大家供大家参考。具体如下：

这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码，表现形式类似对联广告，不过操作方式不一样，点击时候会隐藏在屏幕在左侧，但是不是完全隐藏，仍显示一个图片竖条的广告，而且点击“显示”的时候，它会重新打开广告，这种广告可以提高网页的用户体验。

运行效果截图如下：

在线演示地址如下：

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程序设计有所帮助。

您可能感兴趣的文章:

在DWR中实现直接获取一个JAVA类的返回值的两种方法
本文主要介绍了在DWR中实现直接获取一个JAVA类的返回值的两种方法，具有一定的参考价值，下面跟着小编一起来看下吧
2016-12-12
document.documentElement的一些使用技巧
documentElement 属性可返回文档的根节点，接下来为大家详细介绍下document.documentElement的一些使用技巧，感兴趣的朋友可以参考下哈
2013-04-04
原生JS实现的简单轮播图功能【适合新手】
这篇文章主要介绍了原生JS实现的简单轮播图功能,结合实例形式分析了基于javascript定时器控制页面元素动态变换实现轮播图的相关操作技巧,需要的朋友可以参考下
2018-08-08
最新JS正则表达式验证邮箱和手机号实例(2022)
在前端开发过程中,通过使用JS的正则表达式来校验输入的邮箱或者手机号是否正确,这也是一个非常常见的业务情景需求,下面这篇文章主要给大家介绍了关于利用JS正则表达式验证邮箱和手机号的相关资料,需要的朋友可以参考下
2022-08-08
js判断背景图片是否加载成功使用img的width实现
判断背景图片是否加载成功想必大家对此很陌生吧，会了之后就可以判断css背景图片了，具体判断代码如下，感兴趣的朋友可以参考下哈
2013-05-05
一文总结JavaScript中常见的设计模式
在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。，本文将总结了JavaScript中常见的十五种设计模式，感兴趣的朋友可以参考下
2023-05-05
图解Sublime Text3使用技巧
通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识，对sublime text3技巧相关知识感兴趣的朋友一起学习吧
2015-12-12
浅析JS动态创建元素【两种方法】
下面小编就为大家带来一篇浅析JS动态创建元素【两种方法】。小编觉得挺不错的，现在分享给大家。一起跟随小编过来看看吧
2016-04-04
微信小程序实用代码段(收藏版)
这篇文章主要介绍了微信小程序实用代码段，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
JS的事件绑定深入认识
类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果，但只知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下具体的实现，会有一种豁然开朗的感觉
2014-06-06