2017.3.29 dom第二天
复习前一天的内容：
bom对象：
顶级对象：window;
控制历史记录：history；
获取客户端浏览器信息：navigator；
控制地址栏：location；
定时器（计时器）：
setInterval:每隔一段时间就执行一次函数中的代码；
清理计时器的方法：clearInterval(定时器ID)；
setTimeout:隔多长时间之后执行函数中的代码，只执行一次；
clearTimeout(定时器ID)；
二、
offset系列：元素自身的宽高和位置
offsetLeft:元素距离左边的距离；
offsetTop:元素距离上边的距离；
offsetWidth:元素的宽度（有边框）；
offsetHeight:元素的高度（有边框）；
三、
scroll系列：卷曲出去的距离
scrollLeft:向左滚出去的距离
scrollTop:向上滚出去的距离；
scrollWidth：元素内容实际的宽度（实际内容小于或者等于元素内宽度就是元素的宽度，没有边框）；
scrollHeight:(元素内容实际的高度)；
今天内容：
一、点击按钮移动元素---缓动动画：
function animate(element,target){
clearInterval(element.timeId);
// 为了可以让清除的定时器只清除当前的盒子 不会影响别的盒子 如果用timer 会存在覆盖现象当调用多个盒子的时候 会发生覆盖
element.timeId=setInterval(function(){
//获取当前位置
var current=element.offsetLeft;
//每次移动的步数
var step=(target-current)/10;
//每次移动的步数都是整数（比较大的数字）；
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
//移动后的当前的像素
element.style.left=current+"px";
if(current==target){
//到达目标后停止计时器
clearInterval(element.timeId);
}
console.log("target:"+taret+",current:"+current+",step:"+step);
},30);
}
二、//获取样式计算后的值
function getStyle(element,attr){
return element.currentStyle?element.currentStyle[attr]:window.getComputedStyle(element,null)[attr];
}
//缓动动画函数增加任意多个属性和回调函数及层级和透明度
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;
for(var attr in json){
if(attr=="opacity"){
var current=getStyle(element,attr)*100;
var target=json[attr]*100;
//每次移动的步数
var step=(target-current)/10;
step=step>0?Math.floor(step);
current+=step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){
element.style[attr]=json[attr];
}else{
var current=parseInt(getStyle(element,attr));
var target=json[attr];
var step=(target-current)/10;
step=step?0?Math.ceil(step) : Math.floor(step);
current += step;//移动后的当前的像素
element.style[attr] = current + "px";
}
if (current != target) {//到达目标后停止计时器
flag=false;
}
}
if(flag){
clearInterval(element.timeId);//清理计时器
if(fn){
fn();
}
}
console.log("target:" + target + ",current:" + current + ",step:" + step);
}
},30);
}
my$("btn1").onclick = function () {
animate(my$("dv"),{"left":200,"top":300,"width":400,"height":500,"opacity":0.2},function () {
animate(my$("dv"),{"left":100,"top":100,"width":100,"height":100,"opacity":0.9});
});
三、//图片跟着鼠标飞
//关于事件参数对象的工具的代码
var evtTools={
evt:function(e){
return window.event?window.event:e;
},
//页面向左卷曲出去的距离
left:function(){
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的距离
top:function(){
return window.pageYOffset||document.scrollTop||document.documentElement.scrollTop||0;
},
//事件参数对象中的属性封装
//可视区域的横坐标
clientX:function(e){
return this.evt(e).clientX;
},
clientY:function(e){
return this.evt(e).clientY;
},
pageX:function(e){
return this.evt(e).pageX?this.evt(e).pageX:this.left()+this.clientX(e);
},
pageY:function(e){
return this.evt(e).pageY?this.evt(e).pageY:this.pop()+this.clientY(e);
}
};
document.onmousemove=function(e){
my$("im").style.left=evtTools.pageX(e)-my$("im").offsetWidth/2-100+"px";
my$("im").style.top=evtTools.pageY(e)-my$("im").offsetHeight/2+200+"px";
};
四 旋转木马案例
<script>
//数组--每一个数组元素都是一个键值对的对象
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
//页面加载事件
window.onload=function(){
var flag=true;//锁头
//让所有图片全部散开
//获取所有的li标签
var list=my$("slide").children[0].children;
function assign(){
for(var i=0;i<list.length;i++){
animate(list[i],config[i],function(){
flag=true;
});
}
}
assign();//把图片散开
//点击右边按钮
my$("arrRight").onclick=function(){
if(flag){
flag=false;
config.push(config.shift());
assign();
}
};
//点击左边按钮
my$("arrLeft").onclick=function(){
if(flag){
flag=false;
config.unshift(config.pop());
assign();
}
};
//显示和隐藏左右焦点的按钮 div
my$("wrap").onmouseover=function(
animate(my$("arrow"),{"opacity":1});
);
my$("wrap").onmouseout=function(){
animate(my$("arrow"),{"opacity":0});
};
};
</script>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" /></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
五．响应式布局的原理
//当浏览器的宽度发生变化，就获取浏览器（页面可视区域的宽度）
function getClient(){
return{
width:window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth||0,
height:window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight||0
}
}
六．总结三大系列：
offsetLeft:元素距离左边的距离
offsetTop:元素距离上边的距离
offsetHeight:元素的高度（有边框）
offsetWidth:元素的宽度（有边框）
scroll系列：
scrollLeft:元素向左滚出去的距离
scrollTop:元素向上滚出去的距离
scrollWidth:元素内容实际的宽度
scrollHeight:元素内容实际的高度
client系列：
clientX:在可视区域的横坐标
clientY:在可视区域的纵坐标
clientWidth:可视区域的宽度
clientHeight:可视区域的高度