三大家族屬性
- client/scroll/offset
- clientLeft 表示當前標簽距離左側(cè)的 border 值
clientTop 表示當前標簽距離頂部的 border 值
clientW = width + padding - offsetWidth = width + padding + border
offsetHeight = height + padding + border - scrollWidth 表示滾動內(nèi)容的寬度
scrollHeight 表示滾動內(nèi)容的高度
scrollTop 表示垂直滾動的距離
scrollLeft 表示水平滾動的距離 - offsetLeft 表示距離它的 offsetParent 左側(cè)的距離
獲取瀏覽器窗口的寬度
- ie9 及以上
window.innerHeight;
window.innerWidth;
- 一般瀏覽器符合 w3c
document.documentElement.clientWidth;
document.documentElement.clientHeight;
- 其他瀏覽器
document.body.clientWidth;
document.body.clientHeight;
//兼容寫法
var screenW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
封裝
function client(){
if(window.innerWidth){
return {
width:window.innerWidth,
height:window.innerHeight
}
}
else if(document.compatMode ='CSS1Compat'){
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
else{
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
//調(diào)用函數(shù)
var screenW = client().width;
窗口改變事件
window.onresize = function(){
alert(0);
}
窗口改變事件應(yīng)用
//程序運行時就觸發(fā)顏色改變
changeBg();
//對于事件源觸發(fā)事件后面的事情指令如果封裝成方法不加括號
var bgColor = '';
window.onresize = changeBg;
//封裝一個函數(shù)用來改變顏色
function changeBg(){
var screenW = client().width;
if(screenW > 900){
bgColor = 'red';
}else if(screenW > 600){
bgColor = 'green';
}else if(screenW > 300){
bgColor = 'blue';
} document.body.style.background:bgColor;
}
事件冒泡
- 如果一個控件實現(xiàn)了某個功能甥郑，那么這個事件會依次把這個事件向上傳遞給他的父對象逃魄，如果父對象也實現(xiàn)對應(yīng)的事件那么，父對象會自動觸發(fā)對應(yīng)的事件
btn.onclick = function(){
alert('我是按鈕');
}
father.onclick = function(){
alert('我是父親');
}
document.onclick = function(){
alert('我是最大事件源');
}
//alert 會彈出來三次
阻止事件冒泡
- 應(yīng)該子標簽中阻止冒泡
//普通瀏覽器阻止冒泡方法
event.stopPropagation();
//ie
event.cancelBubble = true;
冒泡事件的應(yīng)用
- 獲取點擊區(qū)域的事件源的 id 的方法
普通瀏覽器event.target
ie 瀏覽器event.srcElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡事件的應(yīng)用</title>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
html,body{
width:100%;
height: 3000px;
}
#panel{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: #000;
opacity: 0.4;
/*用來兼容ie瀏覽器*/
filter: alpha(opacity:40);
display: none;
}
#login{
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: skyblue;
display: none;
}
</style>
</head>
<body>
<button id="btn">登錄</button>
<div id="panel"></div>
<div id="login"></div>
<script>
window.onload = function(){
/*0.抽取獲取標簽的函數(shù)*/
function $(tagId){
return typeof tagId ==='string'?document.getElementById(tagId):tagId;
}
/*1.獲取標簽*/
var btn = $('btn');
var panel = $('panel');
var login = $('login');
/*2.點擊按鈕讓對應(yīng)的div顯示*/
btn.onclick = function(event){
/*2.0為了達到我們想要的效果澜搅，我們需要阻止事件冒泡*/
var event = event ||window.event;
if(event &&event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
panel.style.display = 'block';
login.style.display = 'block';
/*2.1讓對應(yīng)的滾動條隱藏*/
document.body.style.overflow = 'hidden';
}
/*3.點擊最大事件源讓對應(yīng)的div隱藏*/
document.onclick = function(event){
/*當點擊最大事件源的時候伍俘，讓出來登錄div其余的區(qū)域才會隱藏，我們需要判斷點擊的區(qū)域
* 通過拿到事件的事件源的id來判斷*/
/*3.1獲取事件對象*/
var event = event ||window.event;
/*3.2獲取點擊區(qū)域的事件源的id*/
/*普通瀏覽器*/
// event.target
// ie
// event.srcElement
var targetId = event.target?event.target.id:event.srcElement.id;
/*3.3判斷對應(yīng)的id*/
if(targetId !='login'){
panel.style.display = 'none';
login.style.display = 'none';
/*3.4讓滾動條出現(xiàn)*/
document.body.style.overflow ='auto';
}
}
}
</script>
</body>
</html>
獲取選中內(nèi)容
- 獲取選中內(nèi)容的事件對象
一般瀏覽器window.getSelection()
ie 瀏覽器document.selection.createRange().text
<script>
window.onload = function(){
/*1.獲取標簽*/
var word1 = document.getElementById('word1');
var word2 = document.getElementById('word2');
var share_text = document.getElementById('share_text');
var share_weibo = document.getElementById('share_weibo');
/*2.當選中內(nèi)容后勉躺，在鼠標抬起后出發(fā)對應(yīng)的事件*/
word1.onmouseup= function(event){
/*2.0獲取事件對象*/
var event = event||window.event;
/*2.1獲取選中內(nèi)容*/
/*一般*/
// window.getSelection()
/*ie*/
// document.selection.createRange().text;
/*2.11設(shè)置變量用來記錄選中的內(nèi)容*/
var content_text = '';
if(window.getSelection){
content_text = window.getSelection();
}else {
content_text = document.selection.createRange().text;
}
/*2.12設(shè)置div顯示以及設(shè)置他的位置和文字*/
share_text.innerHTML = content_text;
share_text.style.left = event.clientX +'px';
share_text.style.top = event.clientY +'px';
share_text.style.display = 'block';
}
var content_weibo = '';
/*2.2當在word2中抬起的時候出發(fā)對應(yīng)的事件*/
word2.onmouseup = function(event){
/*2.21獲取事件對象*/
var event = event||window.event;
if(window.getSelection){
content_weibo = window.getSelection();
}else {
content_weibo = document.selection.createRange().text;
}
/*2.22讓對應(yīng)的微博圖片顯示*/
share_weibo.style.display = 'block';
share_weibo.style.left = event.clientX +'px';
share_weibo.style.top = event.clientY +'px';
}
/*3.當點擊document的時候癌瘾，讓對應(yīng)的盒子隱藏而且讓選中的內(nèi)容不選中*/
document.onmousedown = function(event){
/*3.1讓對應(yīng)的盒子隱藏*/
/*3.11讓除了顯示內(nèi)容的區(qū)域點下去的時候隱藏，所以位哦們獲取點擊的區(qū)域的id*/
var event = event ||window.event;
var targetId = event.target?event.target.id:event.srcElement.id;
if(targetId !='word1'){
share_text.style.display = 'none';
}
if(targetId!='share_weibo'){
share_weibo.style.display = 'none';
}else {
/*表示點擊了微博饵溅，跳轉(zhuǎn)分享界面*/
window.location. + content_weibo + '&url=https://www.baidu.com'
}
/*3.2讓選中的內(nèi)容不選中*/
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
}
}
</script>
勻速動畫改造注意點
- 用 offsetLeft 來代替 begin
box.style.left = box.offsetLeft + speed +'px';
- 判斷結(jié)束條件的補全
if(target - box.offsetLeft < speed){
clearInterval(timer);
box.style.left = target + 'px';
}
//當 target 小于 boxoffsetLeft 時
if(Math.abs(target2 - box.offsetLeft) < Math.abs(speed2){
clearInterval(timer2);
box.style.left = target2 + 'px';
}
- 其中數(shù)學(xué)公式
Math.abs()是取絕對值
抽取勻速動畫函數(shù)
function constant(obj,target,speed){
clearInterval(timer);
obj.timer = setInterval(function(){
var mySpeed = target > obj.offsetLeft ? speed:-speed;
obj.style.left = obj.offsetLeft + mySpeed +'px';
if(Math.abs(target - obj.offsetLeft) < Math.abs(mySpeed)){
clearInterval(timer);
obj.style.left = target + 'px';
}
},20)
}
無限輪播圖
<script>
window.onload = function(){
/*0.設(shè)置一個值用來記錄將要顯示的圖片*/
var currentIndex = 0;
/*0.1設(shè)置一個值用來表示小圓點顯示第幾個*/
var indicateIndex = 0;
/*1.獲取標簽*/
var oul = document.getElementById('oul');
var ol = document.getElementById('ol');
/*1.0獲取oul中原來的個數(shù)*/
var lis = oul.children;
/*1.1添加最后的圖片*/
oul.appendChild(oul.children[0].cloneNode(true));
/*2.添加小的圓點*/
for(var i = 0;i < lis.length -1;i++){
var oli = document.createElement('li');
ol.appendChild(oli);
}
/*2.1s設(shè)置第一個為紅色*/
ol.children[0].className = 'curr';
/*2.2當移動到小圓點上的時候妨退，讓對應(yīng)的小圓點的顏色發(fā)生變化，就是一拍他思想*/
for(var i = 0;i < ol.children.length;i++){
/*2.2擴展屬性用來記錄i*/
ol.children[i].index = i;
ol.children[i].onmouseover = function(){
for(var j =0;j < ol.children.length;j++){
ol.children[j].className = '';
}
ol.children[this.index].className = 'curr';
/*2.3讓對應(yīng)的圖片動起來*/
constant(oul,-this.index *750,20);
/*2.4當移動到小圓點的時候蜕企，應(yīng)該切換對應(yīng)的currIndex以及indicateIndex*/
currentIndex = this.index;
indicateIndex = this.index;
}
}
/*3.讓自動動起來*/
var timer = setInterval(auto_play,1000);
function auto_play(){
currentIndex ++;
if (currentIndex > lis.length -1)
{
currentIndex = 1;
oul.style.left = 0;
}
/*動起來*/
constant(oul,-currentIndex*750,20);
/*設(shè)置小圓點的顏色*/
indicateIndex ++;
if (indicateIndex > ol.children.length -1){
indicateIndex = 0;
}
for(var i = 0;i < ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[indicateIndex].className = 'curr';
}
}
</script>
克隆節(jié)點
- cloneNode():如果不傳入?yún)?shù)咬荷，默認 false,那么只克隆節(jié)點本身，不會克隆子節(jié)點
如果傳入 true 那么子節(jié)點也會被克隆
var cloneBox = box.cloneNode(true);
//添加克隆節(jié)點
document.body.appendChild(cloneBox);
