06-JS特效-01三大系列和事件

2017-08-10  本文已影响169人  magic_pill

一、三大系列:offset家族、scroll家族、client

1、offset

1.1.简介
1.2.offsetWidth和offsetHeight:
1.3.offsetLeftoffsetTop检测距离有定位的父系盒子左/上的距离):
1.4.offsetParent(检测父盒子中带有定位的父盒子节点)

2.第二系列scroll

2.1.Scroll家族组成:ScrollWidth和scrollHeightscrollTop和scrollLeft
2.2. ScrollWidth和scrollHeight(不包括border)
window.onscroll = function (){};
2.3. scrollTop和scrollLeft
document.body.scrollTop
document.documentElement.scrollTop
window.pageYOffset
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

或者

var aaa = document.documentElement.scrollTop + document.body.scrollTop;
2.4.获取title、body、head、html标签
2.5.Json
2.5.1.定义方法
var  json  =  { key1:value1,key2:value2,key3:value3...  };
2.5.2.获取内容
2.5.3.Json的遍历(了解)
<script>
    var json = {"aaa":111,"bbb":222};
    for (var k in json){
        console.log(k);
        console.log(json[k]);
    }
</script>
//打印的结果为:
//aaa
//111
//bbb
//222
2.6.判断页面有没有DTD

document.compatMode === "BackCompat"

BackCompat  未声明
CSS1Compat  已经声明
2.7.scroll()函数的封装
<script>
    //var json = scroll();
    //console.log(json.top);
    //console.log(json.left);
    console.log(scroll().top);
    console.log(scroll().left);

    function scroll(){
        //如果window.pageYOffset存在,返回值为0~无穷大,如果不存在返回undefined。
        if (window.pageYOffset !== undefined){
            var json = {
                "top":window.pageYOffset,
                "left":window.pageXOffset
            }
        } else if (document.compatMode === CSS1Compat) {
            return {
                "top":document.documentElement.scrollTop,
                "left":document.documentElement.scrollLeft
            }
        } else {
            return {
                "top":document.body.scrollTop,
                "left":document.body.scrollLeft
            }
        }
    }
</script>

简单版:

<script>
    function scroll(){
        //如果window.pageYOffset存在,返回值为0~无穷大,如果不存在返回undefined。
        return {
            "top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            "left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        }
    }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        img{
            vertical-align: top;
        }
        .main{
            width: 1000px;
            margin: 10px auto;
        }

        .fix{
            position: fixed;
            top: 0;
            left: 0;
        }

    </style>

</head>
<body>
    <div class="top">
        ![](images/top.png)
    </div>
    <div class="nav">
        ![](images/nav.png)
    </div>
    <div class="main">
        ![](images/main.png)
    </div>

    <script>
        window.onload = function () {
            var top = document.getElementsByClassName("top")[0];
            var topHeight = top.offsetHeight;
            var middle = document.getElementsByClassName("nav")[0];
            var main = document.getElementsByClassName("main")[0];

            window.onscroll = function () {
                if (scroll().top >= topHeight){
                    middle.className = "fix";
                    main.style.padding = middle.offsetHeight + "px";
                }else {
                    middle.className = "";
                    main.style.padding = 0;
                }
            }

            function scroll() {
                return {
                    "top" : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                    "left" : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
                }
            }
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>

    <style>
        .img1{
            position: absolute;
            top: 80px;
            left: 6px;
        }
        .img2{
            position: absolute;
            top: 80px;
            right: 6px;
        }
        div{
            width: 600px;
            margin: 20px auto;
            font-size: 20px;
            line-height: 50px;
            color: red;
        }
    </style>

    <script src="../Yijiang.js"></script>
    <script>
        window.onload = function () {
            var img1 = document.getElementsByClassName("img1")[0];
            var img2 = document.getElementsByClassName("img2")[0];

            window.onscroll = function () {
                slowMovingAnimateY(img1,scroll().top + 80);
                slowMovingAnimateY(img2,scroll().top + 80);
            }
        }
    </script>
</head>
<body>
    ![](images/aside.jpg)
    ![](images/aside.jpg)
    <div class="content">
        我是第一行。。。<br>
        你我是永相随,醉把佳人成双对。。。<br>
        你我是永相随,醉把佳人成双对。。。<br>
        //上面的内容加到三四十行
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .img{
            position: fixed;
            right: 150px;
            bottom: 150px;
            display: none;
        }
        .content{
            width: 600px;
            font: italic 700 26px/40px "Simhei";
            color: red;
            margin: 0 auto;
        }
    </style>

    <script src="../Yijiang.js"></script>
    <script>
        window.onload = function () {
            var fire = document.getElementsByClassName("img")[0];

            window.onscroll = function () {
                if (scroll().top > 200){
                    fire.style.display = "block";
                }else {
                    fire.style.display = "none";
                }

                position = scroll().top;
            };

            var target = 0; //目标位置
            var position = 0;   //目前显示位置
            var timer = null;   //成员变量就是window的属性
            fire.onclick = function () {
                //使用定时器之前先清除定时器
                clearInterval(timer);
                timer = setInterval(function () {
                    //计算步长
                    var step = (target - position) / 10;
                    step = step>0 ? Math.ceil(step):Math.floor(step);
                    //动画原理
                    position = position + step;
                    //运动到当前目标位置
                    window.scrollTo(0,position);
                    if (target == position){
                        clearInterval(timer);
                    }
                },25);
            };
        };
    </script>
</head>
<body>
    ![](images/Top.jpg)
    <div class="content">
        我是第一行。。。<br>
        你我是永相随,醉把佳人成双对。。。<br>
        你我是永相随,醉把佳人成双对。。。<br>
        //上面的内容加到三四十行
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电商楼层跳跃</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }

        ul{
            height: 100%;
            list-style: none;
        }
        ul li{
            height: 100%;
        }
        ol{
            position: fixed;
            left: 20px;
            top: 100px;
            list-style: none;
        }
        ol li{
            border: 1px solid #000;
            height: 50px;
            width: 65px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="detail">
        <li>男士专区</li>
        <li>女士专区</li>
        <li>儿童专区</li>
        <li>婴儿物品</li>
        <li>中老年营养品</li>
    </ul>

    <ol class="summary">
        <li>男士</li>
        <li>女士</li>
        <li>儿童</li>
        <li>婴儿</li>
        <li>中老年</li>
    </ol>

    <script src="../Yijiang.js"></script>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        window.onload = function () {
            var ul = document.getElementsByClassName("detail")[0];
            var ol = document.getElementsByClassName("summary")[0];
            var ulArr = ul.children;
            var olArr = ol.children;

            var height = ulArr[0].offsetHeight;
            var colorArr = ["#9a2","pink","orange","#0a2","#f44"];

            var timer = null;
            var target = 0;
            var position = 0;

            for(var i=0; i<olArr.length; i++){
                olArr[i].index = i;
                ulArr[i].style.backgroundColor = colorArr[i];
                olArr[i].style.backgroundColor = colorArr[i];

                olArr[i].onclick = function () {
                    position = scroll().top;
                    target = ulArr[this.index].offsetTop;

                    clearInterval(timer);
                    var timer = setInterval(function () {
                        var step = (target - position) / 10;
                        step = step>0 ? Math.ceil(step):Math.floor(step);
                        position = position + step;
                        window.scrollTo(0,position);
                        if (Math.abs(target-position)<=Math.abs(step)){
                            clearInterval(timer);
                        }
                    },15);
                }
            }
        };
    </script>
</body>
</html>

3.第三大家族client

3.1.主要成员:clientWidth/clientHeightclientX/clientYclientTop/clientLeft
3.2.三大家族区别(三大家族总结)
3.3.client家族特殊用法之:检浏览器宽/高度(可视区域)
3.4.onresize事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据浏览器窗口大小改变背景色</title>
</head>
<body>

    <script>
        function client() {
            if (window.innerHeight !== undefined){
                return{
                    "width":window.innerWidth,
                    "height":window.innerHeight
                }
            }else if (document.compatMode === "CSS1Compat"){
                return{
                    "width":document.documentElement.clientWidth,
                    "height":document.documentElement.clientHeight
                }
            }else {
                return{
                    "width":document.body.clientWidth,
                    "height":document.body.clientHeight
                }
            }
        }

        window.onresize = showColor();
        showColor();//初始时,窗口大小没有变动时,也给浏览器上背景色

        function showColor() {
            if (client().width >= 960){
                document.body.style.backgroundColor = "#a00";
            }else if (client().width >= 640){
                document.body.style.backgroundColor = "#0a0";
            }else{
                document.body.style.backgroundColor = "#00a";
            }
        }
    </script>
</body>
</html>
3.5事件总结
事件 说明
window.onscroll 屏幕滑动
window.onresize 浏览器大小变化
window.onload 页面加载完毕
div.onmousemove 鼠标在盒子上移动(注意:不是盒子移动!!!)
onmouseup/onmousedown onclick
3.6.获得屏幕宽高

4.事件对象(event)

4.1.事件对象的获取(event的获取)
<script>
    window.onload = function (){
        var div1 = document.getElementsByClassName("content")[0];
        div1.onclick = function (){
            console.log(event);
            console.log(window.event);
            //两个打印的结果一样
        }
    }
</script>
Box.onclick = function (aaa){
        console.log(event);
        console.log(aaa);
}
4.2.event内容重要内容
属性 作用
timeStamp 返回事件生成的日期和时间
<span style="color:#0aa">bubbles 返回布尔值,指示事件是否是起泡事件类型
button 返回当事件被触发时,哪个鼠标按钮被点击了
<span style="color:red">pageX 光标相对于该网页的水平位置(IE678无)
<span style="color:red">pageY 光标相对于该网页的垂直位置(IE678无)
<span style="color:red">screenX 光标相对于该屏幕的水平位置
<span style="color:red">screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
<span style="color:red">clientX 光标相对于该网页的水平位置(当前可见区域)
<span style="color:red">clientY 光标相对于该网页的垂直位置
4.3.PageY和pageX的兼容写法很重要
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标跟随</title>

    <style>
        img{
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <div>
        ![](images/img.jpg)
    </div>

    <script src="../Yijiang.js"></script>
    <script>
        window.onload = function () {
            //获取事件源和相关标签
            var img = document.getElementsByTagName("img")[0];

            //初始化一些数据
            var timer = null;
            var positionX = 0,positionY = 0;
            var targetX = 0,targetY = 0;

            document.onclick = function (event) {
                //获取事件
                event = event || window.event;

                //获取鼠标点击的位置,为了让鼠标停留在图片中间,最后再减去图片宽度的一半
                targetX = (event.pageX || event.clientX + scroll().left) - img.offsetWidth/2;
                targetY = (event.pageY || event.clientY + scroll().top) - img.offsetHeight/2;

                //获取图片初始状态位置
                positionX = img.offsetLeft;
                positionY = img.offsetTop;

                timer = setInterval(function () {
                    //计算步长
                    var stepX = (targetX - positionX) / 10;
                    stepX = stepX>0 ? Math.ceil(stepX):Math.floor(stepX);
                    //动画原理
                    positionX = positionX + stepX;
                    img.style.left = positionX + "px";

                    var stepY = (targetY - positionY) / 10;
                    stepY = stepY>0 ? Math.ceil(stepY):Math.floor(stepY);
                    positionY = positionY + stepY;
                    img.style.top = positionY + "px";

                    //清除定时器
                    if (Math.abs(targetX - positionX)<=Math.abs(stepX) && Math.abs(targetY - positionY)<=Math.abs(stepY)){
                        img.style.top = targetY + "px";
                        img.style.legt = targetX + "px";
                        clearInterval(timer);
                    }
                },30)
            }
        }
    </script>
</body>
</html>
4.4.新事件(onmousemove)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标在盒子中的位置</title>

    <style>
        div{
            width: 300px;
            height: 200px;
            padding-top: 100px;
            background-color: pink;
            margin: 100px;
            text-align: center;
            font: 20px/30px "Simsun";
        }
    </style>

</head>
<body>
    <div></div>

    <script>
        window.onload = function () {
            var div = document.getElementsByTagName("div")[0];

            //当鼠标在盒子上移动时触发事件
            div.onmousemove = function (event) {
                event = event || window.event;

                //获取鼠标所处的位置
                var x = event.pageX || event.clientX + scroll().left;
                var y = event.pageY || event.clientY + scroll().top;

                //获取盒子所处的位置
                var divX = div.offsetLeft;
                var divY = div.offsetTop;

                //获取鼠标在盒子中的位置
                var positionX = x - divX;
                var positionY = y - divY;

                div.innerHTML = "盒子中鼠标的X坐标为:" + positionX +"px" + "<br>" + "盒子中鼠标的Y坐标为:" + positionY +"px";
            };

            //当鼠标离开盒子时,清空内容
            div.onmouseout = function () {
                div.innerHTML = "";
            }
        }
    </script>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 300px;
            height: 300px;
            margin-top: 80px;
            margin-left: 160px;
            position: relative;
            border: 1px solid #000;
        }
        .small{
            position: relative;
        }
        .small img{
            width: 300px;
            height: 300px;
        }
        .small .scan{
            height: 150px;
            width: 150px;
            background-color: rgba(200,200,0,0.6);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .big{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            left: 340px;
            top: 0;
            overflow: hidden;
            display:none;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="small">
            ![](images/001.jpg)
            <div class="scan"></div>
        </div>
        <div class="big">
            ![](images/0001.jpg)
        </div>
    </div>

    <script>
        window.onload = function () {
            //显示相关元素
            var content = document.getElementsByClassName("content")[0];
            var small = content.children[0];
            var big = content.children[1];
            var scan = small.children[1];
            var bigImg = big.children[0];

            //鼠标进入,遮盖和大图显示框显示
            small.onmouseenter = function () {
                big.style.display = "block";
                scan.style.display = "block";
            };
            //鼠标离开,遮盖和大图显示框隐藏
            small.onmouseleave = function () {
                big.style.display = "none";
                scan.style.display = "none";
            };

            //绑定鼠标移动事件
            small.onmousemove = function (event) {
                //获取鼠标的位置
                event = event || window.event;
                var pagex = event.pageX || event.clientX + scroll().left;
                var pagey = event.pageY || event.clientY + scroll().top;
                //获取鼠标在盒子中的位置(pagex - content.offsetLeft),并让鼠标处在遮盖中间位置
                var positionX = pagex - content.offsetLeft - scan.offsetWidth / 2;
                var positionY = pagey - content.offsetTop - scan.offsetHeight / 2;
                //判断遮盖的位置,不让其超出盒子的范围
                if (positionX<=0){
                    positionX = 0;
                }
                if (positionX >= content.offsetWidth - scan.offsetWidth){
                    positionX = content.offsetWidth - scan.offsetWidth;
                }
                if (positionY <= 0){
                    positionY = 0;
                }
                if (positionY >= content.offsetHeight - scan.offsetHeight){
                    positionY = content.offsetHeight - scan.offsetHeight;
                }
                //把算好的位置赋值给遮盖
                scan.style.left = positionX + "px";
                scan.style.top = positionY + "px";

                //按比例算大图应该显示的位置:遮盖位置的X/小图宽=大图显示位置的X/大图宽
                var bigShowX = scan.offsetLeft / small.offsetWidth * bigImg.offsetWidth;
                var bigShowY = scan.offsetTop / small.offsetHeight * bigImg.offsetHeight;
                //确定大图显示位置
                bigImg.style.left = - bigShowX + "px";
                bigImg.style.top = - bigShowY + "px";
            }
        };

        //封装scroll()
        function scroll() {
            return{
                "top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                "left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
            }
        }
    </script>
</body>
</html>
window.getSelection() ? window.getSelection().removeAllRanges():document.selection.empty("");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽案例</title>

    <style>
        .register{
            width: 320px;
            height: 260px;
            position: absolute;
            border: 3px solid #ddd;
            top: 20%;
            left: 20%;
        }

        .hd{
            height: 30px;
            background-color: #096;
            font: 20px/30px "Simsun";
            cursor: move;
        }
        .close{
            float: right;
            cursor: pointer;
        }
    </style>

</head>
<body>

    <div class="register">
        <div class="hd">
            <em>注册信息(可以拖拽)</em>
            <span class="close">【关闭】</span>
        </div>
    </div>

    <script>
        //入口函数
        window.onload = function () {
            //获取事件源和相关元素
            var register = document.getElementsByClassName("register")[0];
            var hd = register.firstElementChild || register.firstChild;

            //给鼠标按下时绑定事件
            hd.onmousedown = function (event) {
                //获取鼠标的位置
                event = event || window.event;
                var pagex = window.pageX || event.clientX + scrolll().left;
                var pagey = window.pageY || event.clientY + scrolll().left;
                //获取鼠标在盒子中的位置
                var positionX = pagex - register.offsetLeft;
                var positionY = pagey - register.offsetTop;

                //给鼠标移动绑定事件
                document.onmousemove = function (event) {
                    //获取鼠标位置
                    event = event || window.event;
                    var mouseX = window.pageX || event.clientX + scrolll().left;
                    var mouseY = window.pageY || event.clientY + scrolll().left;
                    //用鼠标位置减去鼠标在盒子中的位置就是盒子要移动到的位置
                    register.style.left = mouseX - positionX + "px";
                    register.style.top = mouseY - positionY + "px";

                    //取消选中
                    window.getSelection() ? window.getSelection().removeAllRanges():document.selection.empty("");
                };
            };

            //鼠标抬起时解绑事件
            hd.onmouseup = function () {
                document.onmousemove = null;
            };

            function scrolll() {
                return{
                    "top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                    "left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
                }
            }
        }
    </script>

</body>
</html>

事件被触动时,鼠标和键盘的状态
通过属性控制

上一篇 下一篇

猜你喜欢

热点阅读