집 > 기사 > 웹 프론트엔드 > 탄력적인 플로팅 효과를 달성하기 위한 JS 광고 코드_javascript 기술

탄력적인 플로팅 효과를 달성하기 위한 JS 광고 코드_javascript 기술

WBOY원래의: 2016-05-16 15:40:55985검색

이 기사의 예에서는 JS를 사용하여 탄력적인 플로팅 효과를 구현하는 광고 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

JS 탄성 플로팅 광고 코드를 소개합니다. 웹 브라우저의 가장자리에 닿으면 자동으로 탄력 있는 방향으로 플로팅되며 웹 페이지에서 계속 앞뒤로 떠다니는 플로팅 광고 코드는 매우 개발되었습니다. 초기에 코드가 좀 있어서 많이 쓰이는데, 광고로서도 끊임없이 움직여서 시각적으로 매력을 느끼게 해주기 때문에 꽤 효과적인 것 같습니다. JS 코드를 추출하여 별도의 JS 파일에 저장한 후 사용시 호출할 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-move-pic-style-adv-codes/

구체적인 코드는 다음과 같습니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js弹性漂浮广告代码</title>
</head>
<body>
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
 visibility: visible;"><a href="#" target="_blank"><img src="images/pic.gif" width="80" height="80" border="0"></a></DIV>
<SCRIPT language="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;
img1.style.top = yPos;
function changePos() 
{
 width = document.body.clientWidth;
 height = document.body.clientHeight;
 Hoffset = img1.offsetHeight;
 Woffset = img1.offsetWidth;
 img1.style.left = xPos + document.body.scrollLeft;
 img1.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()
  {
   img1.visibility = "visible";
  interval = setInterval('changePos()', delay);
 }
 function pause_resume() 
 {
  if(pause) 
  {
   clearInterval(interval);
   pause = false;}
  else 
  {
   interval = setInterval('changePos()',delay);
   pause = true; 
   }
  }
 start();
</SCRIPT>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：선택한 시간(또는 현재 시간)이 특정 기간 내에 있는지 확인하는 js 구현 코드입니다.다음 기사：선택한 시간(또는 현재 시간)이 특정 기간 내에 있는지 확인하는 js 구현 코드입니다.

탄력적인 플로팅 효과를 달성하기 위한 JS 광고 코드_javascript 기술

관련 기사