Home >Web Front-end >JS Tutorial >JS implements very practical couplet advertising code (adaptive height)_javascript skills

JS implements very practical couplet advertising code (adaptive height)_javascript skills

WBOYOriginal: 2016-05-16 15:38:541288browse

The example in this article describes the JS implementation of a very practical couplet advertising code (with adaptive height). Share it with everyone for your reference. The details are as follows:

This is a very practical web page couplet advertising code based on JS CSS DIV. It adapts to the height of the web page, that is, it always maintains a certain debugging. This one does not have a closing function for the time being.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<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>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery implementation of cascading drop-down box effect example explanation_jqueryNext article：JQuery implementation of cascading drop-down box effect example explanation_jquery

See more

JS implements very practical couplet advertising code (adaptive height)_javascript skills

Related articles