bom第二天

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bom第二天相关的知识,希望对你有一定的参考价值。

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:可视区域的高度

以上是关于bom第二天的主要内容,如果未能解决你的问题,请参考以下文章

sql第二天

javaSE第二天

代练第二天

mybatis第二天

安卓第二天笔记-数据保存

python第二天