cari

Rumah >hujung hadapan web >tutorial js >Kod pengiklanan JS untuk mencapai kemahiran effect_javascript terapung anjal

Kod pengiklanan JS untuk mencapai kemahiran effect_javascript terapung anjal

WBOY
WBOYasal
2016-05-16 15:40:551044semak imbas

Contoh dalam artikel ini menerangkan kod pengiklanan menggunakan JS untuk mencapai kesan terapung anjal. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami memperkenalkan kod pengiklanan terapung anjal JS Apabila ia menyentuh tepi pelayar web, ia akan terapung secara automatik ke arah keanjalan dan terus terapung ke sana ke mari di halaman web awal Terdapat beberapa kod, ia digunakan secara meluas, dan sebagai iklan, ia nampaknya agak berkesan, kerana ia sentiasa bergerak, membuatkan orang berasa menarik secara visual. Anda boleh mengekstrak kod JS dan menyimpannya dalam fail JS yang berasingan, dan kemudian memanggilnya apabila menggunakannya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk menentukan sama ada masa yang dipilih (atau masa semasa) berada dalam tempoh masa_masa dan tarikh tertentuArtikel seterusnya：js untuk menentukan sama ada masa yang dipilih (atau masa semasa) berada dalam tempoh masa_masa dan tarikh tertentu

Artikel berkaitan

Lihat lagi