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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
node.js中的require使用详解
Dec 15 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
node.js实现爬虫教程
Aug 25 Javascript
js简单时间比较的方法
Aug 02 Javascript
BootStrap 导航条实例代码
May 18 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
windows下安装python paramiko模块的代码
2013/02/10 Python
在Python中使用模块的教程
2015/04/27 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python 自动重连wifi windows的方法
2018/12/18 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python版中国省市经纬度
2020/02/11 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
优秀高中生事迹材料
2014/02/11 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python