How to make images appear to float freely on a web page? (js code example)-JS Tutorial-php.cn

How to make images appear to float freely on a web page? (js code example)

藏色散人

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

Original

2860 people have browsed it

Sometimes when we open some websites, an advertising-style picture will immediately float in front of you. Of course, for webmasters, this is to allow users to see their advertisements or important information as soon as possible. etc. For users, it is naturally more important to be able to selectively view these picture information. So today’s article mainly introduces the specific demonstration of web page floating code (picture floating can be selectively turned off). Hope it helps those who are interested.

The specific example of js floating ad code is as follows:

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

Copy after login

style code is as follows:

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

Copy after login

The above code test screenshot is as follows:

How to make images appear to float freely on a web page? (js code example)

The above article mainly introduces the method of js to achieve the floating effect of pictures, and analyzes the techniques of js to realize the floating effect of pictures with examples. It has certain reference value and is needed Friends can refer to it, such special effects can have an emphasis effect!

【Recommended related articles】

Summary of examples of JavaScript implementation of floating advertising code

js implementation of closing floating box advertising special effects Detailed explanation

Recommend 5 practical and beautiful web page floating QR code special effect codes

JS implementation example sharing of centered picture floating effect

The above is the detailed content of How to make images appear to float freely on a web page? (js code example). For more information, please follow other related articles on the PHP Chinese website!