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中Array 对象相关的几个方法
Dec 22 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
JS实现前端路由功能示例【原生路由】
May 29 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python制作词云的方法
2018/01/03 Python
Python字符串对象实现原理详解
2019/07/01 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
django API 中接口的互相调用实例
2020/04/01 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
学生感冒英文请假条
2014/02/04 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
好的旅游活动方案
2014/08/19 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
大学生安全教育主题班会
2015/08/12 职场文书