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的一行代码轻松实现拖动效果
Dec 28 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
JavaScript数组操作详解
Feb 04 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
浅析Vue 中的 render 函数
Feb 28 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
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
护理专业大学生自我推荐信
2014/01/25 职场文书
环保公益策划方案
2014/08/15 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
家装电话营销开场白
2015/05/29 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP