Maison > Article > interface Web > Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)

Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)

藏色散人original: 2018-08-10 14:55:222856parcourir

Parfois, lorsque nous ouvrons certains sites Web, une image de style publicitaire flottera immédiatement devant vous. Bien sûr, pour les webmasters, cela permet aux utilisateurs de voir leurs publicités ou informations importantes le plus rapidement possible, etc. , il est naturellement plus important de pouvoir visualiser de manière sélective ces informations d'image. Ainsi, l'article d'aujourd'hui présente principalement la démonstration spécifique du code flottant de page Web (le flottement d'image peut être désactivé de manière sélective). J'espère que cela aidera ceux qui sont intéressés.

L'exemple spécifique de code d'annonce flottant js est le suivant :

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

le code de style est le suivant :

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

Le Le test de code ci-dessus est la capture d'écran suivante :

Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)

L'article ci-dessus présente principalement la méthode de js pour obtenir un effet flottant d'image et analyse le techniques de js pour obtenir un effet flottant d'image avec des exemples, qui ont une certaine valeur, les amis dans le besoin peuvent s'y référer, de tels effets spéciaux peuvent avoir un effet d'accentuation !

[Articles connexes recommandés]

Résumé des exemples de JavaScript implémentant du code publicitaire flottant

js implémentant l'effet spécial de fermeture de la publicité par boîte flottante Explication détaillée

5 pages Web recommandées, pratiques et esthétiques, codes QR flottants à effets spéciaux

Mise en œuvre JS de partage d'effet flottant au centre de l'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Formatage JS Partage de cas de date JsonArticle suivant：Formatage JS Partage de cas de date Json

Articles Liés

Voir plus