Manchmal erscheint beim Öffnen einiger Websites sofort ein Bild im Werbestil, damit Benutzer ihre Werbung oder wichtige Informationen so schnell wie möglich sehen können Wichtiger ist es natürlich, diese Bildinformationen gezielt betrachten zu können. Daher stellt der heutige Artikel hauptsächlich die spezifische Demonstration des Webseiten-Floating-Codes vor (Bild-Floating kann selektiv deaktiviert werden). Ich hoffe, es hilft den Interessierten.
Das spezifische Beispiel für js-Floating-Anzeigencode lautet wie folgt:
<body>
<div id="img1" onmouseover="pause_resume()" onmouseout="pause_resume()">
<div><a href="javascript:void(0);" onclick="closediv()" title="点击关闭">关闭</a></div>
<a href=" " target="_blank"><img src="2.png" alt="可关闭的自由漂浮的图片广告特效代码"></a>
</div>
<p>网站漂浮代码测试</p>
<script type="text/javascript">
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var divid = img1; //浮动DIV的ID.
divid.style.top = yPos;
function changePos(){
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = divid.offsetHeight;
Woffset = divid.offsetWidth;
divid.style.left = xPos + document.body.scrollLeft;
divid.style.top = yPos + document.body.scrollTop;
if(yon){yPos = yPos + step;}else{yPos = yPos - step;}
if(yPos < 0){yon = 1;yPos = 0;}
if(yPos >= (height - Hoffset)){yon = 0; yPos = (height - Hoffset);}
if(xon){xPos = xPos + step;}else{xPos = xPos - step;}
if(xPos < 0){xon = 1;xPos = 0;}
if(xPos >= (width - Woffset)){xon = 0; xPos = (width - Woffset);}
}
function start(){
divid.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pause_resume(){
if(pause){
clearInterval(interval);
pause = false;}
else{
interval = setInterval('changePos()',delay);
pause = true;
}
}
function closediv(){
clearInterval(interval);
divid.style.display = "none";
}
start();
</script>
</body>Der Stilcode lautet wie folgt:
<style type="text/css">
#img1{width:59px;height:61px;position:absolute;top:43px;left:2px;z-index:10;}
#img1 div{width:80px;text-align:right;font-size:12px;}
#img1 div a:link{text-decoration:none;}
#img1 div a:hover{color:red;text-decoration:none;}
#img1 img{width:80px;height:80px;border:1px solid black;}
p{margin-top:50px;text-align:center;}
</style>Der obige Codetest-Screenshot ist wie folgt:
Der obige Artikel stellt hauptsächlich die Methode von js vor, um den schwebenden Effekt von Bildern zu erzielen, und analysiert die Techniken von js Um den schwebenden Effekt von Bildern anhand von Beispielen zu erkennen, ist ein gewisser Referenzwert erforderlich. Freunde können sich darauf beziehen. Solche Spezialeffekte können einen Schwerpunkteffekt haben!
[Empfohlene verwandte Artikel]
Zusammenfassung von Beispielen für die JavaScript-Implementierung von Floating-Werbecode
JS-Implementierung von Closing-Floating Box-Werbe-Spezialeffekte Ausführliche Erklärung
Empfohlene 5 praktische und gut aussehende Webseiten-Floating-QR-Code-Spezialeffektcodes
JS-Implementierung der Bildmitte-Floating-Effektfreigabe
Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass Bilder frei auf einer Webseite schweben? (JS-Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
