1.獲取螢幕可視的大小:
標準瀏覽器及ie9+ || 低版本瀏覽器ie8以下 || 低版本混雜模式
window.innerheight || document.documentelement.clientheight || document.body.clientheight
jquery : $(window).height()
2.獲取滾動條滾動的距離:
window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop
jquery: $(document).scrolltop()
3.獲取元素的尺寸:(左邊jquery方法 右邊原生方法)
$(o).width() = 0.style.width;
$(o).innerwidth() = o.style.width + o.style.padding;
$(o).outerwidth() = o.style.width + o.style.padding + o.style.border;
4.獲取元素的位置:(左邊jquery方法 右邊原生方法)
$(o).offset.top = getoffsettop();
var imgs = document.getelementbytagname("img");
function lazyload() }}
setinterval(lazyload,1000); //設定定時器來檢查是否進行滾動,然後處理在可視視窗範圍內的。
settimeout方法是乙個定時程式,運用在延遲一段時間,只執行一次
setinterval方法是表示在一定間隔內重複執行某個操作的程式
核心基本原理:做乙個div,寬高固定,設定overflow:hidden,js**實現:在該div裡面設定乙個ul,每個li裡面放著排列的,大小就是外層div的寬高
ul的寬度設定為所有大小的總和,這樣就不會換行,
然後,js裡面設定乙個定時器setinterval,每個幾秒不斷修改ul的margin-left,大小就是為一張的寬度
效果就是向左滑動了乙個,每次切換乙個,就將ul的第乙個li copy到ul的最後一位,並刪除掉第乙個li,這個時候,li已經在可視視窗的外面,使用者看不到,然後修改ul的margin-left為零。這樣就可以實現無縫首尾切換了
window.onload = function() , i);
}//執行完之後,將第乙個li放到最後去
settimeout(function() , time);
}, speed);
};for (var i = 0; i < len; i++)
}ul.style.width = it * 78 + "px";
scroller();
ul.onmouseover = function() ;
ul.onmouseout = function() ;
};
1.觸發事件不一樣,transition需要某個事件觸發(點選,滑鼠懸停等)。animation不需要事件去觸發,文件載入完成之後就可以執行動畫。
2.迴圈次數。transition只執行一次,而animation迴圈一次或者多次動畫
3.變化形態。transition是從0-100%乙個遞進的變化。而animation可以自定義任何乙個時間段內的變化狀態樣式。
4.結合js。transition可以很好的結合js來實現乙個簡單的動畫。
結論:1.如果要靈活定製多個幀以及迴圈,就用animationcookie是**為了標識使用者身份而儲存在使用者本地終端上的資料(通常已經加密)2.如果只是簡單的form to效果,就用tranition
3.如果使用js靈活設定動畫屬性,用transition
cookie資料始終在同源的http請求中攜帶(即使不需要),會在伺服器與瀏覽器之間來回傳遞。
localstorage 和 sessionstorage不會自動把資料發給服務端,僅在本地儲存。
儲存大小:
cookie的資料大小不能夠超過4k,比較小
localstorage 和 sessionstorage雖然也有儲存大小限制,但是比cookie大的多,可以達到5m
同源策略:要求網域名稱,協議,埠都要相同1.jsonp
原理:通過動態建立script,通過script標籤引入乙個js檔案,當這個js檔案引入成功後就會執行url引數中指定的函式,並且會把我們需要的json資料作為引數傳入
function createjs(surl)
createjs('jsonp.js');
// jsonp.js
box()
function box(json)
優點:相容性好,簡單易用,支援瀏覽器和伺服器的雙向通訊,2.cors(跨源資源共享)缺點:只是支援get請求
服務端對於cors的支援,主要是通過設定access-control-allow-origin
else if(this.device()=='ios')else if(this.device()=='android')
JS相關知識總結
首先把前兩天接觸到的關於靜態方法與構造器的理解貼上來 a.建構函式 只執行一次 而可以被呼叫多次 b.構造 塊 物件建立則執行構造 塊 而且優於建構函式執行。構造 塊是給所有物件進行統一初始化,而 建構函式是給對應的物件初始化,建構函式可以為多個,構造 塊中定義的是不同物件共性的初始化內容 c.靜態...
面試知識總結一 JS知識
vue的雙向繫結,data應該是乙個函式,返回資料,這個每個資料都是單獨的副本,不會相互影響。對於陣列值的改變和物件屬性的變化,不能直接檢測到變化,原因是vue使用的defineproperty來劫持資料更新,對這類變化無法檢測,需要使用vue.set方法進行更新。session伺服器端儲存使用者狀...
js基礎知識總結
作為梳理的目錄 移動端開發相關 框架和工具相關 vue資料繫結原理 vue父子元件和兄弟元件的通訊問題 vuex的原理 vuex的action和mutation的非同步操作和同步操作問題 vue的事件監聽 vue router獲取自定義引數 vue router的go相關 vue元件設計相關 模組化...