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 相关文章推荐
jsonp原理及使用
Oct 28 Javascript
javascript验证身份证号
Mar 03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
原生js实现轮播图特效
May 04 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实现的MySQL数据浏览器
2007/03/11 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
Js sort排序使用方法
2011/10/17 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python高级property属性用法实例分析
2019/11/19 Python
Flask处理Web表单的实现方法
2021/01/31 Python
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
珠宝店促销方案
2014/03/21 职场文书
工作鉴定评语
2014/05/04 职场文书
关爱留守儿童标语
2014/06/18 职场文书
委托书的写法
2014/09/16 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
高三物理教学反思
2016/02/20 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js