美文网首页
JS-WEB-API-Day6

JS-WEB-API-Day6

作者: 小可_34e0 | 来源:发表于2019-07-31 21:36 被阅读0次

    scroll系列

    图片发布于简书APP

    //时时的获取向上卷曲出去的距离的值

    //div的滚动事件

    my$('dv').onscroll=function(){

    console.log(this.scrollTop);

    }；

    案例：变速动画封装

    <body>
    <div id="dv"></div>
    <input type="button" name="" value="移动到400" id="btn1" >
    <input type="button" name="" value="移动到800" id="btn2" >
</body>
<script src="xiec.js"></script>
<script>

    my$('btn1').onclick=function(){ 
        animate(my$('dv'),400);
    };

    my$('btn2').onclick=function(){
        animate(my$('dv'),800);
    };

    //动画函数：
    function animate (element,target){
        //先清理定时器
        clearInterval(element.timeId);//------------->是element.timeId;

        element.timeId=setInterval (function(){
            //获取当前位置
            
            var current=element.offsetLeft;//数字类型，没有px
            //div每次移动多少像素

            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+"，当前位置："+current+"，每次移动步数："+step);
        },20);
    }
</script>

    获取元素计算后的样式属性值

    <style >
        *{
            padding: 0%;
            margin:0%;
        }
        div{
            width:200px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: pink;
            margin-top: 30px;
        }

    </style>
    
    
</head>
<body>
    <div id="dv"></div>
    <input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
    my$('btn').onclick=function(){
        //获取元素距离左边位置的距离
        console.log(my$('dv').offsetLeft);

        //谷歌，火狐支持
        //console.log(window.getComputedStyle(my$('dv'),null).left);
        //console.log(window.getComputedStyle(my$('dv'),null)['left']);
        //ie8支持
        //console.log(my$('dv').currentStyle.left);
    };

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(element,attr){
        //判断浏览器是否支持这个方法
        if(window.getComputedStyle){
            return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
        }
        my$('btn').onclick=function(){
            console.log(getStyle(my$('dv'),"top"));
        };
    };

</script>

    封装缓动动画增加任意多个属性

    <style >
        *{
            padding: 0%;
            margin:0%;
        }
        div{
            width:200px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: pink;
            margin-top: 30px;
        }

    </style>
    
    
</head>
<body>
    <div id="dv"></div>
    <input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
    

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(element,attr){
        //判断浏览器是否支持这个方法
        return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
    }

    function animate(element,json){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var flag=true;//默认，假设全部达到目标

            for(var attr in json){
                //获取元素这个属性的当前的值
                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(current==target){
                //清除定时器
                clearInterval(element,attr);
            }

            
            //测试
            console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
        },20);
    }

    my$('btn').onclick=function(){
        animate(my$('dv'),{"width":400,"height":500,"left":500,"top":80});
    }



</script>

    封装缓动动画函数增加回调函数

    <style >
        *{
            padding: 0%;
            margin:0%;
        }
        div{
            width:200px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: pink;
            margin-top: 30px;
        }

    </style>
    
    
</head>
<body>
    <div id="dv"></div>
    <input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
    

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(element,attr){
        //判断浏览器是否支持这个方法
        return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
    }

    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var flag=true;//默认，假设全部达到目标

            for(var attr in json){
                //获取元素这个属性的当前的值
                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(current==target){
                //清除定时器
                clearInterval(element,attr);
                if (fn) {
                    fn();
                }
            }

            
            //测试
            console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
        },20);
    }

    my$('btn').onclick=function(){
        var json1={"width":300,"height":300,"top":200,"left":100};
        animate(my$('dv'),json1,function(){
            var json2={"width":100,"height":200,"top":400,"left":300};
            animate(my$('dv'),json2,function(){
                var json3={"width":300,"height":300,"top":200,"left":100};
                animate(my$('dv'),json3);

            });
        });
    };



</script>

    动画函数增加透明度和层级

    <style >
        *{
            padding: 0%;
            margin:0%;
        }
        div{
            width:200px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: pink;
            
        }
        input{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

    </style>
    
    
</head>
<body>
    <div id="dv"></div>
    <input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
    

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(element,attr){
        //判断浏览器是否支持这个方法
        return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
    }

    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var flag=true;//默认，假设全部达到目标

            for(var attr in json){

                //判断这个属性attr是不是opacity
                if(attr=="opacity"){
                    //获取当前元素的透明度，并放大一百倍
                    var current=getStyle(element,attr)*100;
                    //获取当前属性对应的目标值
                    var target=json[attr]*100;
                    //移动步数
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):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(current==target){
                //清除定时器
                clearInterval(element,attr);
                if (fn) {
                    fn();
                }
            }

            
            //测试
            console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
        },20);
    }

    my$('btn').onclick=function(){
        var json1={"width":300,"height":300,"top":200,"left":100,"opacity":0.2};
        animate(my$('dv'),json1,function(){
            animate(my$('dv'),{"width":200,"height":200,"top":0,"left":200,"opacity":1,"z-index":1000});
        });
    };



</script>

    案例：手风琴

    <style >
        *{
            padding: 0%;
            margin:0%;
        }
        
        #box{
            width: 1200px;
            height: 300px;
            border:1px solid red;
            margin:0 auto;
        }
        ul{
            list-style: none;
            overflow: hidden;
        }
        ul li{
            width: 200px;
            height: 300px;
            float: left;
            display: list-item;
        }

    </style>
    
    
</head>
<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script src="xiec.js"></script>
<script>
    

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(element,attr){
        //判断浏览器是否支持这个方法
        return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
    }

    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var flag=true;//默认，假设全部达到目标

            for(var attr in json){

                //判断这个属性attr是不是opacity
                if(attr=="opacity"){
                    //获取当前元素的透明度，并放大一百倍
                    var current=getStyle(element,attr)*100;
                    //获取当前属性对应的目标值
                    var target=json[attr]*100;
                    //移动步数
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):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(current==target){
                //清除定时器
                clearInterval(element,attr);
                if (fn) {
                    fn();
                }
            }

            
            //测试
            console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
        },20);
    }

    //先获取所有的li标签‘
    var list =my$('box').getElementsByTagName('li');
    for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundImage="url(./image/"+(i+1)+".jpg)";
        //鼠标进入
        list[i].onmouseover=mouseoverHandle;
        //鼠标离开
        list[i].onmouseout=mouseoutHandle;

    }
    //进入
    function mouseoverHandle(){
        for (var j = 0; j < list.length; j++) {
            animate(list[j],{"width":100});//动画效果
        }
        animate(this,{"width":600});
    }
    //离开
    function mouseoutHandle(){
        for (var j = 0; j < list.length; j++) {
            animate(list[j],{"width":200});//动画效果
        }
    }

</script>

    案例：开机动画

    <style >
        *{
            padding: 0%;
            margin:0%;
        }
        .box{
            width: 300px;
            border:1px solid red;
            position: fixed;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
        #closeButton{
            width: 20px;
            height: 20px;
            border:1px solid green;
            position: absolute;
            right: 0;
            top: 5px;
        }
        .hd{
            width: 300px;
            height: 300px;
            border:1px solid yellow;

        }
        .bd{
            width: 300px;
            height: 100px;
            border:1px solid black;
        }
        
        
    </style>
    
    
</head>
<body>
<!--
为什么div既设置了id又设置了class？
是为了方便后面的使用，id可以更快的为某些元素设置其特有的样式，而不会影响其他的，有些样式大家的都要一样，就用的class
-->
    <div class="box" id="box">
        <span id="closeButton"></span>
        <div id="headPart" class="hd"></div>
        <div id="bottomPart" class="bd"></div>
    </div>

</body>
<script src="xiec.js"></script>
<script>
    

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(element,attr){
        //判断浏览器是否支持这个方法
        return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
    }

    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var flag=true;//默认，假设全部达到目标

            for(var attr in json){

                //判断这个属性attr是不是opacity
                if(attr=="opacity"){
                    //获取当前元素的透明度，并放大一百倍
                    var current=getStyle(element,attr)*100;
                    //获取当前属性对应的目标值
                    var target=json[attr]*100;
                    //移动步数
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):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(current==target){
                //清除定时器
                clearInterval(element.timeId,attr);
                if (fn) {
                    fn();
                }
            }

            
            //测试
            console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
        },20);
    }

    my$('closeButton').onclick=function(){
        //设置最下面的div的高渐渐变成0；
        animate(my$('bottomPart'),{"height":0},function(){
            animate(my$('box'),{"width":0});
        });
    };
</script>

    offset系列：获取元素的宽，高，left，top，offsetParent


    图片发布于简书APP

    scoll系列：卷曲出去的值


    图片发布于简书APP

    client系列：可视区域


    图片发布于简书APP

    clientTop：上面的 边框的宽度

    相关文章

      网友评论

          本文标题：JS-WEB-API-Day6

          本文链接：https://www.haomeiwen.com/subject/cehprctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JS-WEB-API-Day6|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！