JS实现很实用的对联广告代码(可自适应高度)


Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS实现很实用的对联广告代码(可自适应高度)。分享给大家供大家参考。具体如下:

这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能。

运行效果截图如下:

JS实现很实用的对联广告代码(可自适应高度)

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简洁对联广告代码</title>
<script language="JavaScript" type="text/javascript">
lastScrollY=0;
function heartBeat(){ 
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY); 
if(percent>0)percent=Math.ceil(percent); 
else percent=Math.floor(percent); 
document.getElementById("lovexin12").style.top=parseInt(document.getElementById
("lovexin12").style.top)+percent+"px";
document.getElementById("lovexin14").style.top=parseInt(document.getElementById
("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent; 
//alert(lastScrollY);
}
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
document.write(suspendcode12); 
document.write(suspendcode14); 
window.setInterval("heartBeat()",1);
</script>
<style type="text/css">
<!--
#lovexin12,#lovexin14{
width:100px;
height:230px;
background-color:yellow;
border:2px solid red;
}
html,body{
height:800px;
}
#mm{
height:800px;
}
-->
</style>
</head>
<body>
<div id="mm">
基于JS+CSS+DIV的网页对联广告代码
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 #Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 #Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 #Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 #Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 #Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 #Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 #Javascript
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python中__slots__用法实例
2015/06/04 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python 标准差计算的实现(std)
2019/07/29 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
车间工艺员岗位职责
2013/12/09 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
应届毕业生自荐书
2014/06/18 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书