原生JS實現漂浮廣告的一種方法(Demo)
實現效果 : 開啟網頁後,廣告窗從指定位置開始在頁面漂浮,當滑鼠移入時視窗暫停運動,滑鼠移出後,視窗在暫停處按原運動軌跡運動,視窗可關閉.
思路 : 實現運動效果需要依託定位屬性,使用定時器重複執行程式碼改變定位,獲得漂浮效果;設定不同的x(寬度)和y(高度)方向上每次改變的畫素值,實現不同的漂浮軌跡;判斷運動視窗達到可視區域邊界時,改變x或y的正負值,實現反彈.
———————————更新———————————-
冷風吹醒(手動實驗) :
element.style.left(/height/top/width)的使用 :
在元素的css樣式被初始賦值,未經後續賦值,此時element.style.left值為空(無論left初始值為多少),經過後續賦值後才會有值.
完整程式碼如下:
<!DOCTYPE html>
<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>
曾令我不知所措的有 :
Q1 : 如何使用程式碼獲得瀏覽器可視視窗?
A1 : 獲得可視高度 document.documentElement.clientHeight;
獲得可視寬度 document.documentElement.clientWidth;
Q2 : Q1…
依舊困擾的還有:
Q3 : 在JS中如何獲取和修改除行內樣式以外的CSS元素內容?(已解決)
說明: (1)element.getAttribute(“”);方法可以獲取如id,class等特定和自定義屬性,但是style中的如width如何獲取?用setAttribute(“”,”“);方法修改內容?
(2)當前樣式可用getComputedStyle(‘element’).width或element.CurrentStyle.width獲取,那麼如何修改呢?
Q4 : 若給廣告視窗加< a >標籤,或者繫結事件使其跳轉(關閉圖示在視窗內),那麼如何實現點選關閉圖示時隱藏視窗而不跳轉到鏈
接呢?
以上內容學習參考了後盾網孫琪崢老師的公共教學資源,侵權刪.
歡迎指導交流.
相關推薦
原生JS實現漂浮廣告的一種方法(Demo)
實現效果 : 開啟網頁後,廣告窗從指定位置開始在頁面漂浮,當滑鼠移入時視窗暫停運動,滑鼠移出後,視窗在暫停處按原運動軌跡運動,視窗可關閉. 思路 : 實現運動效果需要依託定位屬性,使用定時器重複執行程式碼改變定位,獲得漂浮效果;設定不同的x(寬度)和y(高
Python爬蟲處理JS翻頁的一種方法,利用Ajax非同步請求
前端方面知識不是很好,只是想解決有關Python爬蟲翻頁的問題 =。= 如有不對,還望指正 瀏覽器:Google 利用區域性更新這種翻頁的方式,同樣需要進行一個url請求,因此我們的目的就是找到這個url 1.分析 如圖所示,頁面翻頁採用了JS的方法 &nb
Python實現"用佇列實現棧"的一種方法
使用佇列實現棧的下列操作: push(x) -- 元素 x 入棧 pop() -- 移除棧頂元素 top() -- 獲取棧頂元素 empty() -- 返回棧是否為空 Example: MyStack stack = new MyStack(); stack.p
用node.js實現ORM的一種思路
ORM是O和R的對映。O代表面向物件,R代表關係型資料庫。二者有相似之處同時也各有特色。就是因為這種即是又非的情況,才需要做對映的。 理想情況是,根據關係型資料庫(含業務需求)的特點來設計資料庫。同時根據面向物件(含業務需求)的特點來設計模型(實體類)。然後再去考慮如何做對映。但是理想很骨jia
js 合併陣列的一種方法
function a(first, second) { var len = +second.length, j = 0, i = first.length; console.log(len); for (; j < len; j++) { //很巧妙的在
原生JS去重(一)--兩種方法去掉重複字元
所謂“去重”,即是去掉重複的字元。本篇部落格講述兩種方式去重,一種是比較簡單但程式碼比較囉嗦點的,另一種是有點深度但是簡潔的。 我直接寫JavaScript程式碼了。 方式一: function deleteRepetionChar(arr){ //先判斷輸入進
(一)原生JS實現判斷碰撞的方法!
這次為大家例項講述了JS實現判斷碰撞的方法。碰撞的應用場景非常多比如,放煙花、小球碰壁反彈、畫素鳥等,所以我們先要弄清除如何進行碰撞判斷,才能進行以後的操作。 HTML頁面程式碼: <div
原生js實現outerWidth()方法,用到getComputedStyle
turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at
JS實現數組去重方法總結(極速PC蛋蛋六種方法)
組元 urn 合並 ++i push oop tarray 開始 實現 方法一: 雙層循環,外層循環元素極速PC蛋蛋QQ2952777280【話仙源碼論壇】hxforum.com【木瓜源碼論壇】papayabbs.com,內層循環時比較值 如果有相同的值則跳過,不相同則pu
原生Js實現複製功能的方法總結,execCommand和clipboardData的使用
原生Js實現複製(Copy)的兩種方法,一種是利用 clipboardData,另外一種則是用 execCommand(),今天將統一講解一下關於他們的使用方法。 document.execCommand 當一個HTML文件切換到設計模式(designMode)時,文件物件
原生Js實現複製(Copy)的方法總結:execCommand和clipboardData的使用
原生Js實現複製(Copy)的兩種方法,一種是利用 clipboardData,另外一種則是用 execCommand(),今天將統一講解一下關於他們的使用方法。 document.execCommand 當一個HTML文件切換到設計模式(designMode)時,文件物件
Python實現"階乘後的零"的一種方法
給定一個整數n,返回n!尾部0的個數 Example 1: Input: 3 Output: 0 Explanation: 3! = 6, no trailing zero. Example 2: Input: 5 Output: 1 Explanation: 5!
Python實現"旋轉陣列"的一種方法
給定一個數組,向右旋轉陣列k步,k非負 Example 1: Input: [1,2,3,4,5,6,7] and k = 3 Output: [5,6,7,1,2,3,4] Explanation: rotate 1 steps to the right: [7,1,
Python實現"快樂的數"的一種方法
寫一個演算法判斷一個數字是不是快樂數 快樂數由下面的過程定義:任何正數,用它數字的平方和替換它,重複這個過程直至結果為1,或者以一個環無線迴圈,環中的正數不包括1。這個過程以1結束就可以認為是快樂的數 Example: Input: 19 Output: true
使用思事標籤,實現包含GTD模式的一種方法
GTD(Getting Things Done)工作法,很多軟體採用了這個模式。它具體做法可以分成收集、整理、組織、回顧與行動五個步驟。我使用思事的標籤,預設標籤很方便的實現了GTD模式,同時還設定了一些自己需要的、常用的標籤,請參考。 下圖為我的標籤截圖: 關
Python實現"醜數"的一種方法
寫一個程式判斷給定的整數是否為醜數 醜數就是隻包含質因數 2, 3, 5 的正整數 Example 1: Input: 6 Output: true Explanation: 6 = 2 × 3 Example 2: Input: 8 Output: true E
一、多執行緒基礎概念、實現執行緒三種方法、中斷執行緒方法,以及執行緒狀態轉化
1、CPU核心數和執行緒數的關係 1:1的關係,引入超執行緒之後,就是1:2 2、cpu時間輪轉機制,即RR排程 3、程序和執行緒 程序:程式執行資源分配最小單位,程序內部有多個執行緒,多個執行緒之間會共享程序資源 執行緒:CPU排程的最小單位 4、並行和併發
Python實現"二進位制手錶"的一種方法
二進位制手錶頂部有 4 個 LED 代表小時(0-11),底部的 6 個 LED 代表分鐘(0-59)。 每個 LED 代表一個 0 或 1,最低位在右側。 例如,上面的二進位制手錶讀取 “3:25”。 給定一個非負整數 n 代表當前 LED 亮著的數量,返回所有
C#-一種方法工廠的實現
來源 當時在做銷售資料報表功能,需要提供多種報表的資料。每一種報表我都寫了一個方法用於查詢對應的資料。 這些方法有一個共同的特點:出參入參型別一致。方法的名稱我也做了格式化處理。 但是入口只有一個,就是對外提供的呼叫介面只有一個,具體是要獲取那個報表的資料需要根據其中一個數據來做判斷。
五種js實現陣列去重的方法
第一種 刪除後面重複元素 function removeRepeat1(arr){ var a1=((new Date).getTime()) for(