suchen

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

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

藏色散人
藏色散人Original
2018-08-10 14:55:222874Durchsuche

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>

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:

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!

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：JS-Formatierung von JSON-DatumsfällenNächster Artikel：JS-Formatierung von JSON-Datumsfällen

In Verbindung stehende Artikel

Mehr sehen