Code publicitaire JS pour obtenir des compétences d'effet flottant élastique

Code publicitaire JS pour obtenir des compétences d'effet flottant élastique_javascript

WBOY

Libérer： 2016-05-16 15:40:55

original

1021 Les gens l'ont consulté

L'exemple de cet article décrit le code publicitaire utilisant JS pour obtenir un effet flottant élastique. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Nous introduisons ici un code publicitaire flottant élastique JS. Lorsqu'il touche le bord du navigateur Web, il flotte automatiquement dans le sens de l'élasticité et continue de flotter d'avant en arrière sur la page Web. tôt Il existe du code, il est largement utilisé et, en tant que publicité, il semble être assez efficace, car il bouge constamment, ce qui rend les gens visuellement attrayants. Vous pouvez extraire le code JS et l'enregistrer dans un fichier JS séparé, puis l'appeler lorsque vous l'utilisez.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.