Wie kann man dafür sorgen, dass Bilder frei auf einer Webseite schweben? (JS-Codebeispiel)-js-Tutorial-php.cn

Wie kann man dafür sorgen, dass Bilder frei auf einer Webseite schweben? (JS-Codebeispiel)

藏色散人

Freigeben： 2018-08-10 14:55:22

Original

2873 Leute haben es durchsucht

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(&#39;changePos()&#39;,delay);
    }
    function pause_resume(){
        if(pause){
            clearInterval(interval);
            pause = false;}
        else{
            interval = setInterval(&#39;changePos()&#39;,delay);
            pause = true;
        }
    }
    function closediv(){
        clearInterval(interval);
        divid.style.display = "none";
    }
    start();
</script>
</body>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der obige Codetest-Screenshot ist wie folgt:

Wie kann man dafür sorgen, dass Bilder frei auf einer Webseite schweben? (JS-Codebeispiel)

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!