JS advertising code to achieve elastic floating effect_javascript skills-JS Tutorial-php.cn

JS advertising code to achieve elastic floating effect_javascript skills

WBOY

Release： 2016-05-16 15:40:55

Original

1049 people have browsed it

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>

Copy after login

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