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


Posted in Javascript onSeptember 02, 2015

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

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

运行效果截图如下:

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

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

Javascript 相关文章推荐
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
理解javascript模块化
Mar 28 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
jquery实现华丽的可折角广告代码
Sep 02 #Javascript
javascript学习总结之js使用技巧
Sep 02 #Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 #Javascript
自定义刻度jQuery进度条及插件
Sep 02 #Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 #Javascript
javascript中for/in循环及使用技巧
Sep 01 #Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 #Javascript
You might like
PHP针对JSON操作实例分析
2015/01/12 PHP
php集成动态口令认证
2016/07/21 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
django允许外部访问的实例讲解
2018/05/14 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
旷课检讨书3000字
2014/02/04 职场文书
粗加工管理制度
2014/02/04 职场文书
中学生操行评语大全
2014/04/24 职场文书
机关搬迁方案
2014/05/18 职场文书
2014年教师节寄语
2014/08/11 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
妈妈别哭观后感
2015/06/08 职场文书
运动会主持人开幕词
2016/03/04 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技