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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
js实现缓动动画
Nov 25 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从文件夹随机读取文件的方法
2015/06/01 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php实现用户登陆简单实例
2017/04/04 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
VSCode配置react开发环境的步骤
2017/12/27 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python 阶乘累加和的实例
2019/02/01 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
新员工入职感言
2014/02/01 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
超市商业计划书
2014/05/04 职场文书
欢迎词怎么写
2015/01/23 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
安全教育主题班会总结
2015/08/14 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers