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下组织javascript代码(js函数化)
Aug 25 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
prototype.js常用函数详解
Jun 18 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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 Cookie的一个使用注意点
2008/11/08 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP实现文件下载详解
2014/11/27 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python测试人员需要掌握的知识
2018/02/08 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python包和模块的分发详细介绍
2020/06/19 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
自我评价是什么
2014/01/04 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
小学生家长评语大全
2014/02/10 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js