Home > Article > Web Front-end > JS advertising code to achieve elastic floating effect_javascript skills

JS advertising code to achieve elastic floating effect_javascript skills

WBOYOriginal: 2016-05-16 15:40:551019browse

The example in this article describes the advertising code using JS to achieve elastic floating effect. Share it with everyone for your reference. The details are as follows:

Here we introduce a JS elastic floating advertising code. When it touches the edge of the web browser, it will automatically float in the direction of elasticity and keep floating back and forth on the web page. The floating advertising code was developed very early There is some code, it is widely used, and as an advertisement, it seems to be quite effective, because it is constantly moving, making people feel visually attractive. You can extract the JS code and save it in a separate JS file, and then call it when using it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

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

I hope this article will be helpful to everyone’s JavaScript programming design.

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 implementation code to determine whether the selected time (or current time) is within a certain time period_time and dateNext article：js implementation code to determine whether the selected time (or current time) is within a certain time period_time and date

See more

JS advertising code to achieve elastic floating effect_javascript skills

Related articles