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 相关文章推荐
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
详解javascript new的运行机制
Jan 26 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
python局部赋值的规则
2013/03/07 Python
python算法学习之基数排序实例
2013/12/18 Python
python列表去重的二种方法
2014/02/14 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
档案管理员岗位职责
2013/12/01 职场文书
个人安全承诺书
2014/05/22 职场文书
幸福来敲门观后感
2015/06/04 职场文书
新学期主题班会
2015/08/17 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
HDFS免重启挂载新磁盘
2022/04/06 Servers
Python进程池与进程锁之语法学习
2022/04/11 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android