이미지가 웹페이지에 자유롭게 떠다니는 것처럼 보이게 만드는 방법은 무엇입니까? (js 코드 예시)-JS 튜토리얼-php.cn

이미지가 웹페이지에 자유롭게 떠다니는 것처럼 보이게 만드는 방법은 무엇입니까? (js 코드 예시)

藏色散人

풀어 주다： 2018-08-10 14:55:22

원래의

2860명이 탐색했습니다.

가끔 웹사이트를 열면 광고 스타일의 그림이 바로 눈앞에 떠오를 때가 있습니다. 물론 웹마스터의 경우 이는 사용자가 처음으로 광고나 중요한 콘텐츠 등을 볼 수 있도록 하기 위한 것입니다. ., 당연히 사용자에게는 이러한 사진 정보를 선택적으로 볼 수 있는 것이 더 중요합니다. 그래서 오늘 기사에서는 주로 웹 페이지 플로팅 코드의 구체적인 데모를 소개합니다(그림 플로팅은 선택적으로 끌 수 있음). 관심있는 분들에게 도움이 되길 바랍니다.

js 플로팅 광고 코드의 구체적인 예는 다음과 같습니다.

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

로그인 후 복사

# 🎜🎜#위 코드 테스트 아래 스크린샷:

이미지가 웹페이지에 자유롭게 떠다니는 것처럼 보이게 만드는 방법은 무엇입니까? (js 코드 예시)