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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
React四级菜单的实现
Apr 08 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
?生?D片??C字串
2006/12/06 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python yield 使用浅析
2015/05/28 Python
python语音识别实践之百度语音API
2018/08/30 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
超市中秋节活动方案
2014/02/12 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
浅谈Python数学建模之线性规划
2021/06/23 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技