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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
详细分析Node.js 多进程
Jun 22 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 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
node.js基础知识汇总
2020/08/25 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
ajax是什么及其工作原理
2012/02/08 面试题
社区活动邀请函范文
2014/01/29 职场文书
幼儿教育感言
2014/02/05 职场文书
美术教师自我鉴定
2014/02/12 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
2014年销售工作总结
2014/12/01 职场文书
学校实习推荐信
2015/03/27 职场文书
同意转租证明
2015/06/24 职场文书
放假通知怎么写
2015/08/18 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python中相见恨晚的技巧
2021/04/13 Python