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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
js获取height和width的方法说明
Jan 06 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
validator验证控件使用代码
2010/11/23 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
python里 super类的工作原理详解
2019/06/19 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Linux内核产生并发的原因
2012/07/13 面试题
工作自荐信
2013/12/11 职场文书
高中生期末评语
2014/01/28 职场文书
运动会拉拉队口号
2014/06/09 职场文书
学雷锋活动简报
2015/07/20 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
js实现模拟购物商城案例
2021/05/18 Javascript
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis