父級(jí)
parentNode
兄弟 nextSibling previousSibling
子節(jié)點(diǎn) firstChild lastChild
孩子節(jié)點(diǎn) childNodes children
創(chuàng)建節(jié)點(diǎn) document.createElement(“l(fā)i”)纽匙；
插入節(jié)點(diǎn) appendChild insertBefore（插入的節(jié)點(diǎn)，參照節(jié)點(diǎn)）拍谐；
移出節(jié)點(diǎn) removeChild()
克隆節(jié)點(diǎn) cloneNode(ture&&false);
設(shè)置節(jié)點(diǎn)屬性
1.獲取節(jié)點(diǎn)屬性
getAttribute(屬性) 獲得節(jié)點(diǎn)屬性
//可以獲取屬性烛缔，沒法獲取樣式。例如href ,type轩拨，class践瓷，id,name
2. 設(shè)置節(jié)點(diǎn)屬性
SetAttribute(“屬性”，“值”)亡蓉；
比如我們想把box的class由box1改成box2晕翠，那么就
setAttribute(‘clas’，‘box2’)
3.刪除節(jié)點(diǎn)屬性
removeAttribute(‘屬性’)砍濒；
var box = document.getElementById("box");
box.getAttribute("id"); // 得到 id 屬性
alert(box.getAttribute("id"));
box.setAttribute("id","text"); // 設(shè)置/修改 id 屬性
alert(box.getAttribute("id"));
box.removeAttribute("id"); // 刪除id屬性
alert(box.getAttribute("id"));
緩動(dòng)動(dòng)畫
就是將勻速的動(dòng)畫變成由快到慢或者由慢到快的非勻速動(dòng)畫崖面；
緩動(dòng)動(dòng)畫可以通過緩動(dòng)公式來達(dá)成元咙，數(shù)學(xué)好的可以自己做都行，這里只是叫一個(gè)方法
其實(shí)就是等差數(shù)列
I= 10,10,10,10,10,10
等差數(shù)列
I=10,8,6,4,2,0巫员；
一個(gè)盒子庶香，他的初始值為0；要他緩動(dòng)的走到500px的地方
初始值設(shè)為leader ,目標(biāo)值設(shè)為target
緩動(dòng)公式：Leader=leader+(target-leader)/10;
<style>
#box{
width: 100px;
height: 100px;
background: pink;
position: relative;
}
</style>
<div id="box"></div>
<!--<button id="btn">緩動(dòng)</button>-->
<script>
// 點(diǎn)擊按鈕向右緩動(dòng)
// var btn = document.getElementById("btn");
// var box = document.getElementById("box");
// var leader = 0, targer = 1000;
// var time;
// btn.onclick = function(){
// time = setInterval(fun,30);
// };
// function fun(){
// leader = leader + (targer - leader) / 10;
// box.style.left = leader + "px";
// if(leader>1000) {
// clearInterval(time);
// }
// }
//點(diǎn)擊div 放大縮小
var box = document.getElementById("box");
var leader = 100, targer = 500;
var time = null;
var flag = true;
box.onclick = function(){
show();
};
function show(){
clearInterval(time);
flag ? targer = 500:targer = 100;
time = setInterval(fun,10);
function fun(){
leader = leader + (targer - leader) / 10;
box.style.width = leader + "px";
box.style.height = leader + "px";
console.log(leader);
if(Math.round(leader)>=500||Math.round(leader)<=100){
clearInterval(time);
}
}
flag ? flag = false : flag = true;
}
</script>
之前简识，我們講過函數(shù)自己調(diào)用自己赶掖，叫做遞歸調(diào)用
今天，學(xué)習(xí)一個(gè)新東西七扰，叫做回調(diào)函數(shù)奢赂，牢記 重要程度：**********
當(dāng)前函數(shù)執(zhí)行完之后，再執(zhí)行另一個(gè)函數(shù)颈走，就叫做回調(diào)函數(shù)
<button id="btn1">變色</button>
<button id="btn2">不變色</button>
</body>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var body = document.getElementsByTagName("body")[0];
function a(t,t2){
alert(t);
if(!t2){
b();
}else{
c();
}
}
function b (){
body.style.background = "pink";
}
function c (){
body.style.background = "";
}
btn1.onclick = function(){
a("變色")
};
btn2.onclick = function(){
a("不變色","sorry")
}
最簡(jiǎn)單的無縫焦點(diǎn)輪播圖
布局
<div class="box" id="box">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="icons"></div>
<!--<div class="btn">-->
<!--<button id="left"></button>-->
<!--<button id="right"></button>-->
<!--</div>-->
</div>
css清單
*{
margin: 0;padding: 0;
}
.box{
margin:40px auto;
width: 800px;
height: 300px;
position: relative;
overflow: hidden;
}
ul{
list-style: none;
position: absolute;
width: 4800px;
}
li{
float: left;
}
button{
border: none;
outline: none;
color: transparent;
}
.btn{
display: none;
}
.box:hover .btn{
display: block;
opacity: 0.8;
}
#left,#right{
width:39px;height:79px;
background:url(../images/left_right.png) no-repeat;
cursor:pointer;
position:absolute;
top: 36%;
}
#left{
left:0;
background-position:-17px -10px;
}
#right{
right:0;background-position:-64px -10px;
}
#icons{
position: absolute;
bottom: 10px;
left: 42%;
}
span{
display: inline-block;
width: 10px;
height: 10px;
background-color: #efefef;
border-radius: 50%;
margin: 10px;
cursor: pointer;
}
.ys{
background-color: orangered;
}
javascript清單
<script>
var ul = document.getElementsByTagName("ul")[0];
var icons = document.getElementById("icons");
// var btn_left = document.getElementById("left");
// var btn_right = document.getElementById("right");
var timer = null; // 定時(shí)器的值膳灶；
var count = 0 ; // 圖片的索引值；
var leader = 0, target;
for(var i = 1;i<ul.children.length;i++){ // 遍歷添加焦點(diǎn)
var span = document.createElement("span");
icons.appendChild(span);
}
var spans = icons.children;
spans[0].setAttribute("class","ys");
setTimeout(fun,2000);
function fun(){
count++;
if(count>5){
count = 1;
leader = 0;
ul.style.left = "0px";
}
target = count * -800;
timer = setInterval(function(){
leader = leader + (target - leader) / 10;
ul.style.left = leader + "px";
if(Math.round(leader) <= count*-800){
clearInterval(timer);
setTimeout(fun,2000);
}
},1);
for(var k = 0; k < spans.length; k++) {//循環(huán)遍歷每一個(gè)小圓點(diǎn)
spans[k].removeAttribute('class');//把所有的小圓點(diǎn)樣式清除掉
}
count>4?spans[0].setAttribute('class', 'ys'):spans[count].setAttribute('class', 'ys');
}
</script>
優(yōu)點(diǎn)立由，寫得快轧钓，無縫輪播
缺點(diǎn)，只能自己輪播锐膜，無法控制
這種寫法毕箍，只適用于自動(dòng)輪播
真正做焦點(diǎn)輪播（就是可以通過小圓點(diǎn)和左右按鈕控制的輪播，肯定要用節(jié)點(diǎn)做道盏，而不是用一排圖片做）而柑；
元素.offsetWidth
獲得元素的自身寬度
緩動(dòng)公式2
var speed;//步長(zhǎng)
Speed=(目標(biāo)值-本身)/8；
本身=本身+speed荷逞；
demo 點(diǎn)擊圖片放大縮小
<div class="box" id="box">
</div>
<div id="show"></div>
<style>
*{
margin: 0;padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.box{
width: 1100px;
}
.box img{
float: left;
}
#show{
width: 100%;
height: 100%;
background: #555;
opacity: 0.5;
z-index: 1;
display: none;
}
.cur{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<script>
var box = document.getElementById("box");
var imgs = box.getElementsByTagName("img");
var mask = document.getElementById("mask");
var timer = null;
var leader = 256;
var target = 1000;
for(var i = 0;i<imgs.length;i++){
imgs[i].onclick = function(){
var curImg = this.cloneNode(true);
document.body.appendChild(curImg);
curImg.setAttribute("class","cur");
show.style.display = "block";
animate(curImg,target);
curImg.onclick = function(){
var that = this;
animate(that,leader,function(){
that.parentNode.removeChild(that);
show.style.display = "none";
})
}
}
}
function animate(obj,dest,fun){
clearInterval(timer);
var speed;
timer = setInterval(function(){
speed = (dest - obj.offsetWidth)/8;
if(speed>0){
speed = Math.ceil(speed);
}else{
speed = Math.floor(speed);
}
if(obj.offsetWidth != dest){
obj.style.width = obj.offsetWidth + speed + "px";
}else{
clearInterval(timer);
if(fun){
fun();
}
}
},30)
}
</script>
