Day11（节点属性，缓动动画，无缝焦点轮播）
2017-09-26 本文已影响0人
AnnQi
父级
parentNode
兄弟 nextSibling previousSibling
子节点 firstChild lastChild
孩子节点 childNodes children
创建节点 document.createElement(“li”)；
插入节点 appendChild insertBefore（插入的节点，参照节点）；
移出节点 removeChild()
克隆节点 cloneNode(ture&&false);
设置节点属性
1.获取节点属性
getAttribute(属性) 获得节点属性
//可以获取属性，没法获取样式。例如href ,type，class，id,name
2. 设置节点属性
SetAttribute(“属性”，“值”)；
比如我们想把box的class由box1改成box2，那么就
setAttribute(‘clas’，‘box2’)
3.删除节点属性
removeAttribute(‘属性’)；
var box = document.getElementById("box");
box.getAttribute("id"); // 得到 id 属性
alert(box.getAttribute("id"));
box.setAttribute("id","text"); // 设置/修改 id 属性
alert(box.getAttribute("id"));
box.removeAttribute("id"); // 删除id属性
alert(box.getAttribute("id"));
缓动动画
就是将匀速的动画变成由快到慢或者由慢到快的非匀速动画；
缓动动画可以通过缓动公式来达成，数学好的可以自己做都行，这里只是叫一个方法
其实就是等差数列
I= 10,10,10,10,10,10
等差数列
I=10,8,6,4,2,0；
一个盒子，他的初始值为0；要他缓动的走到500px的地方
初始值设为leader ,目标值设为target
缓动公式：Leader=leader+(target-leader)/10;
<style>
#box{
width: 100px;
height: 100px;
background: pink;
position: relative;
}
</style>
<div id="box"></div>
<!--<button id="btn">缓动</button>-->
<script>
// 点击按钮向右缓动
// 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);
// }
// }
//点击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>
之前，我们讲过函数自己调用自己，叫做递归调用
今天，学习一个新东西，叫做回调函数，牢记 重要程度：**********
当前函数执行完之后，再执行另一个函数，就叫做回调函数
<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")
}
最简单的无缝焦点轮播图
布局
<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; // 定时器的值；
var count = 0 ; // 图片的索引值；
var leader = 0, target;
for(var i = 1;i<ul.children.length;i++){ // 遍历添加焦点
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++) {//循环遍历每一个小圆点
spans[k].removeAttribute('class');//把所有的小圆点样式清除掉
}
count>4?spans[0].setAttribute('class', 'ys'):spans[count].setAttribute('class', 'ys');
}
</script>
优点，写得快，无缝轮播
缺点，只能自己轮播，无法控制
这种写法，只适用于自动轮播
真正做焦点轮播（就是可以通过小圆点和左右按钮控制的轮播，肯定要用节点做，而不是用一排图片做）；
元素.offsetWidth
获得元素的自身宽度
缓动公式2
var speed;//步长
Speed=(目标值-本身)/8；
本身=本身+speed；
demo 点击图片放大缩小
<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>
