suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert sehr praktische Javascript-Fähigkeiten für Couplet-Werbecode (adaptive Höhe).

JS implementiert sehr praktische Javascript-Fähigkeiten für Couplet-Werbecode (adaptive Höhe).

WBOY
WBOYOriginal
2016-05-16 15:38:541293Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung eines sehr praktischen Couplet-Werbecodes (mit adaptiver Höhe). Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein sehr praktischer Webseiten-Couplet-Werbecode, der auf JS CSS DIV basiert. Er passt sich der Höhe der Webseite an, das heißt, er behält immer eine gewisse Debugging-Funktion bei Sein.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery-Implementierung des kaskadierenden Dropdown-Box-Effekts, Beispiel erklärt_jqueryNächster Artikel：JQuery-Implementierung des kaskadierenden Dropdown-Box-Effekts, Beispiel erklärt_jquery

In Verbindung stehende Artikel

Mehr sehen