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 相关文章推荐
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
什么是短波收听SWL
2021/03/01 无线电
PHP中ADODB类详解
2008/03/25 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
微信支付的开发流程详解
2016/09/13 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python实现快速多线程ping的方法
2015/07/15 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python性能测试工具locust的使用
2020/12/28 Python
《月光启蒙》教学反思
2014/03/01 职场文书
网络编辑岗位职责
2014/03/18 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
小学班级口号
2014/06/09 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书