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

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

藏色散人원래의: 2018-08-10 14:55:222914검색

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

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 코드 예시)

위 글에서는 주로 의 방법을 소개합니다. js를 사용하여 이미지 플로팅 효과를 얻는 방법은 특정 참조 가치가 있습니다. 필요한 친구는 이를 참조할 수 있습니다. 이러한 특수 효과는 강조 효과를 가져올 수 있습니다.

【관련 기사 추천】

플로팅 광고 코드의 JavaScript 구현 사례 요약
#🎜🎜 ## 🎜🎜#js 플로팅박스 광고 특수효과 닫는 자세한 설명

실용적이고 아름다운 웹페이지 플로팅 QR코드 특수효과 코드 5개 추천#🎜 🎜##🎜 🎜#

JS 구현 예시 이미지 센터링 및 플로팅 효과 공유

위 내용은 이미지가 웹페이지에 자유롭게 떠다니는 것처럼 보이게 만드는 방법은 무엇입니까? (js 코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JS 형식화 Json 날짜 사례 공유다음 기사：JS 형식화 Json 날짜 사례 공유