recherche

Maison >interface Web >js tutoriel >Code publicitaire JS pour obtenir des compétences d'effet flottant élastique_javascript

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

WBOY
WBOYoriginal
2016-05-16 15:40:551050parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js code d'implémentation pour déterminer si l'heure sélectionnée (ou l'heure actuelle) se situe dans une certaine période_heure et dateArticle suivant：js code d'implémentation pour déterminer si l'heure sélectionnée (ou l'heure actuelle) se situe dans une certaine période_heure et date

Articles Liés

Voir plus