原生JSが浮遊広告を実現する方法の一つ(Demo)
9875 ワード
実現効果:ホームページを開けた後、広告ウィンドウは指定された位置からページに浮遊し始め、マウスが移動した時にウィンドウは動きを停止し、マウスが移動した後、ウィンドウは一時停止場所で元の動きの軌跡を押して移動し、ウィンドウは閉じられます.
構想:動きの効果を実現するには、位置決め属性に依存して、タイマーを使ってコードを繰り返して位置決めを変え、浮遊効果を得る必要があります.異なるx(幅)とy(高さ)方向の画素値を設定し、異なる浮遊軌跡を実現する.動きウィンドウが視認領域境界に達すると判断した場合、xまたはyの正負値を変更し、リバウンドを実現します.
—————————————更新—————————————————
冷たい風が吹いて目を覚ます(手動実験):
element.style.left(/height/top/width)の使用:
Q 1:コードを使ってブラウザの可視ウィンドウを得るにはどうすればいいですか?A 1:視認性の高いdocument.documentElement.clientHeightを得る.視認できる幅document.documentElement.client Widthを得る.Q 2:Q 1…
まだ困っています.
Q 3:JSでは、行のスタイル以外のCSS要素の内容をどのように取得し、修正しますか?(解決済み)説明:(1)element.getAttribute(");この方法は、id、classなどの特定とカスタム属性を取得できますが、styleのwidthなどはどうやって取得しますか?setAttribute(「」、「)」、方法で内容を変更しますか?(2)現在のスタイルはgetComputtedStyle(「element」)、widthまたはelement.Current Style.widthで取得できますが、どうやって変更しますか?
以上の内容は学習して後ろ盾のネットの孫ベンジー先生の公共の教育資源を参考にして、権利侵害は削除します.
歓迎します
構想:動きの効果を実現するには、位置決め属性に依存して、タイマーを使ってコードを繰り返して位置決めを変え、浮遊効果を得る必要があります.異なるx(幅)とy(高さ)方向の画素値を設定し、異なる浮遊軌跡を実現する.動きウィンドウが視認領域境界に達すると判断した場合、xまたはyの正負値を変更し、リバウンドを実現します.
—————————————更新—————————————————
冷たい風が吹いて目を覚ます(手動実験):
element.style.left(/height/top/width)の使用:
css , , element.style.left ( left ), .
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{ // reset
padding: 0;
margin: 0;
}
#advts{
position: absolute;
/*left: 0; problem
top: 0;*/
width: 300px;
height: 250px;
background: url(pics/bg.jpg) no-repeat; /* */
}
style>
<script type="text/javascript">
window.onload=function(){ //
var advts = document.getElementById("advts"); //
var std = document.getElementsByTagName("std");
var max_height = document.documentElement.clientHeight; //
var max_width = document.documentElement.clientWidth;
var h = max_height-advts.offsetHeight; // left top
var w = max_width-advts.offsetWidth;
var upright = 1; //
var cross =2;
var timer;
function run(){
var old_left = advts.style.left; // ,
var new_left = parseInt(old_left)+cross;
if (new_left>w) { // ,true ,
new_left=w;
alert(new_left);
}
if (new_left<0) {
new_left=0;
}
advts.style.left = new_left+'px';
if (new_left==w||new_left==0) {
cross=cross*(-1); //
}
var old_top = advts.style.top;
var new_top = parseInt(old_top)+upright;
if (new_top>h) {
new_top=h;
}
if (new_top<0) {
new_top=0;
}
advts.style.top = new_top+'px';
if (new_top==h||new_top==0) {
upright=upright*(-1);
}
}
timer = setInterval(run,20); // ,
advts.onmouseover=function(){ // , ,
clearInterval(timer);
}
advts.onmouseout=function(){ // , ,
timer = setInterval(run,20);
}
std.onclick=function(){ // , display ,
advts.style.display='none';
}
// advts.onclick=function(){ ,
// location.assign('http://bing.com');
// }
window.onresize=function(){ // , ,
advts.style.left=0;
advts.style.top=0;
max_height = document.documentElement.clientHeight;
max_width = document.documentElement.clientWidth;
h = max_height-advts.offsetHeight;
w = max_width-advts.offsetWidth;
upright = 1;
cross =2;
}
}
script>
head>
<body>
<div id="advts" style="left: 0;top: 0;" display='block'>
<img src="pics/shutdown.png" class="std"/>
div>
body>
html>
Q 1:コードを使ってブラウザの可視ウィンドウを得るにはどうすればいいですか?A 1:視認性の高いdocument.documentElement.clientHeightを得る.視認できる幅document.documentElement.client Widthを得る.Q 2:Q 1…
まだ困っています.
Q 3:JSでは、行のスタイル以外のCSS要素の内容をどのように取得し、修正しますか?(解決済み)説明:(1)element.getAttribute(");この方法は、id、classなどの特定とカスタム属性を取得できますが、styleのwidthなどはどうやって取得しますか?setAttribute(「」、「)」、方法で内容を変更しますか?(2)現在のスタイルはgetComputtedStyle(「element」)、widthまたはelement.Current Style.widthで取得できますが、どうやって変更しますか?
以上の内容は学習して後ろ盾のネットの孫ベンジー先生の公共の教育資源を参考にして、権利侵害は削除します.
歓迎します