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 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
js替代copy(示例代码)
Nov 27 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
js 颜色选择插件
Jan 23 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
js实现无缝轮播图
Mar 09 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
vue递归实现树形组件
Jul 15 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
Python函数学习笔记
2008/10/07 Python
Python随机数random模块使用指南
2016/09/09 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
我的大学生活演讲稿
2014/04/25 职场文书
励志演讲稿大全
2014/08/21 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
违纪检讨书范文
2015/01/27 职场文书
困难补助申请报告
2015/05/19 职场文书
迎新生晚会主持词
2015/06/30 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
离婚协议书范文2016
2016/03/18 职场文书