Home >Web Front-end >JS Tutorial >How to make images appear to float freely on a web page? (js code example)

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

藏色散人Original: 2018-08-10 14:55:222916browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS formatting Json date case sharingNext article：JS formatting Json date case sharing

See more

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

Related articles