JS实现很实用的对联广告代码(可自适应高度)_javascript技巧

本文实例讲述了JS实现很实用的对联广告代码(可自适应高度)。分享给大家供大家参考。具体如下:

这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/

具体代码如下:

<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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
对联广告
javascript 自适应、iframe 自适应高度、div高度自适应、textarea高度自适应、css 高度自适应,以便于您获取更多的相关知识。

时间: 2024-07-28 13:36:20

JS实现很实用的对联广告代码(可自适应高度)_javascript技巧的相关文章

js和jquery如何获取图片真实的宽度和高度_javascript技巧

1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 1 复制代码 代码如下: .news img{margin:5px auto; display:block;width:100%; height:auto;} 但是这种方式有另外

JS实现可关闭的对联广告效果代码_javascript技巧

本文实例讲述了JS实现可关闭的对联广告效果代码.分享给大家供大家参考.具体如下: 这是非常经典的一款对联广告代码,带有关闭按钮,用户可以自行关掉广告,另外,广告的垂直位置会随着滚动条的变化自动定位,也就是拖动浏览器滚动条的时候广告始终显示,不会被隐藏掉,现在很多网站都在用的对联广告代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-2adv-style-codes/ 具体代码如下: <html> <head

js浮动对联广告代码[支持flash]

提示:您可以先修改部分代码再运行 js浮动对联广告代码[支持flash] 对联广告带同时关闭的

JS实现弹性漂浮效果的广告代码_javascript技巧

本文实例讲述了JS实现弹性漂浮效果的广告代码.分享给大家供大家参考.具体如下: 这里介绍一款JS弹性漂浮广告代码,碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去,不停的在网页上漂来漂去,漂浮广告代码是很早时候就有的代码了,使用广泛,而且做为广告来说,好像效果还不错,因为它在不停的动,让人在视觉上感觉到有一种吸引力.其中的JS代码你可以扣出来保存在一个单独的JS文件中,使用时调用即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mo

js实现拉幕效果的广告代码_javascript技巧

本文实例讲述了js实现拉幕效果的广告代码.分享给大家供大家参考.具体如下: 这是一款拉幕效果的广告代码,广告图片像窗帘的幕布一样慢慢的被拉上去了,缩小至一定大小后定格,目前来说,在一些大型的门户网站中仍然可以见到这种效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lm-style-adv-pic-style-codes/ 具体代码如下: <html> <head> <meta http-equiv="C

兼容ie7 ie6 ie8 ff对联广告代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

javascript 滑动进入对联广告代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css 高度自适应代码与自适应高度css兼容ie,firefox

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css 高度自适应代码与自适应高度css兼容ie,firefox</title> </head> <style t

js左右弹性滚动对联广告代码分享

 这个对联广告与其它的有所区别,这个是页面加载时先没看到广告,然后从左边快速飞进来的两个对联广告哦,下面我们一起来看看对联广告效果代码    代码如下: <p> <meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/css">   .shuoming {margin-top:20px; bo