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);
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])
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.
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>