cari

Rumah >hujung hadapan web >tutorial js >Melaksanakan iklan terapung skrin penuh berdasarkan kemahiran javascript_javascript

Melaksanakan iklan terapung skrin penuh berdasarkan kemahiran javascript_javascript

WBOY
WBOYasal
2016-05-16 15:07:191759semak imbas

Contoh dalam artikel ini adalah untuk berkongsi dengan anda cara melaksanakan iklan terapung skrin penuh menggunakan javascript untuk rujukan anda Kandungan khusus adalah seperti berikut

Kaedah penggunaan utama

Lebar kawasan yang boleh dilihat halaman web: document.body.clientWidth;
Ketinggian kawasan kelihatan halaman web: document.body.clientHeight;

Lebar kawasan kelihatan halaman web: document.body.offsetWidth (termasuk lebar garisan sisi); Ketinggian kawasan halaman web yang boleh dilihat: document.body.offsetHeight (termasuk lebar tepi);

setInterval

Tindakan setInterval digunakan untuk memanggil fungsi, kaedah atau objek pada selang waktu tertentu semasa memainkan animasi. Anda boleh menggunakan tindakan ini untuk mengemas kini pembolehubah daripada pangkalan data atau mengemas kini paparan masa.

Format sintaks tindakan setInterval adalah seperti berikut: 

 setInterval(function,interval[,arg1,arg2,......argn])
   setInterval(object,methodName,interval[,arg1,arg2,.....argn])
Format pertama ialah sintaks lalai bagi fungsi setInterval dalam panel tindakan standard, dan format kedua ialah kaedah yang digunakan dalam tindakan mod pakar.
Fungsi parameter ialah nama fungsi atau rujukan kepada fungsi tanpa nama.

Parameter objek menentukan objek yang diperoleh daripada objek Objek. methodName menentukan kaedah yang akan dipanggil dalam parameter objek.
Selang menentukan masa antara dua panggilan ke fungsi atau methodName, dalam milisaat. Arg1 berikut dan seterusnya ialah parameter pilihan, digunakan untuk menentukan parameter yang diluluskan kepada fungsi atau methodName.
Set selang masa Set Interval adalah kurang daripada kadar bingkai animasi (seperti 10 bingkai sesaat, bersamaan dengan 100 milisaat), dan fungsi dipanggil pada selang masa sedekat mungkin dengan selang. Dan tindakan updateAfterEvent mesti digunakan untuk memastikan bahawa skrin dimuat semula dengan kekerapan yang mencukupi. Jika selang lebih besar daripada kadar bingkai animasi, ia hanya dipanggil setiap kali kepala main memasuki bingkai tertentu untuk mengurangkan kesan setiap muat semula skrin.

clearInterval

Tindakan clearInterval adalah untuk mengosongkan panggilan ke fungsi setInterval

Format sintaksnya adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 clearSelang (selang);


Contoh kesan mudah alih pengiklanan

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>简单JS动画实例 广告移动效果</title>
  </head>
  <body>
    <div id="one" style="background-color:red; position:absolute; left:0; top:0; height:100px; height:100px; ">
      移动广告
    </div>
 
    <script type="text/javascript">
      var x=0;    //对象X轴位置
      var y=0;    //对象Y轴位置
      var xs = 10;  //对象X轴移动速度
      var ys = 10;  //对象Y轴移动速度
 
      var one = document.getElementById('one'); 
 
      function move(){
        x += xs; 
        y += ys; 
        one.style.left = x; 
        one.style.top = y; 
        if (x > document.body.clientWidth - one.offsetWidth-20 || x<0) {
          xs = -1*xs;     //速度取反
        }
 
        if (y > document.body.clientHeight - one.offsetHeight-20 || y<0){
          ys = -1*ys; 
        }
      }
      var obj = setInterval('move()', 100); 
 
      one.onmouseover = function(){  //
        clearInterval(obj); 
      }
 
      one.onmouseout = function (){
        obj = setInterval('move()', 100); 
      }
 
    </script>
  </body>
</html>
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian 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：Kod pelaksanaan JS untuk menentukan sama ada elemen berada dalam kemahiran array_javascriptArtikel seterusnya：Kod pelaksanaan JS untuk menentukan sama ada elemen berada dalam kemahiran array_javascript

Artikel berkaitan

Lihat lagi