JavaScript-网页特效

最新推荐文章于 2024-04-20 02:52:24 发布

m0_70617074

最新推荐文章于 2024-04-20 02:52:24 发布

阅读量463

点赞数

分类专栏： JavaScript 文章标签： javascript html5 css

本文链接：https://blog.csdn.net/m0_70617074/article/details/126417301

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.元素偏移量offset系列

注意：返回的数值不带参数

1.1可以返回偏移位置

offsetTop:返回元素相对于定位父元素上方的偏移

offsetLeft：返回元素相对带有定位父元素左边的偏移

以带有定位的父元素为准，没有定位以body为准

1.2可以得到元素的大小

offsetWidth:返回元素自身的宽度，返回值也不带单位；是包含padding、border、width

offsetHeight：返回元素自身的高度，返回值也不带单位

1.3返回带有定位的父元素（position定位）

offsetParent

1.4offset和style的区别

offset只能读取不能赋值

style可读写，可以赋值

1.5鼠标事件

mousedown 鼠标按下

mousemove 鼠标移动

mouseup 鼠标松开

mouseover和mouseenter的区别：mouseover鼠标经过自身盒子会触发经过子盒子也会触发。mouseenter只会经过自身盒子触发

mouseleave鼠标离开

2.元素可视区client系列

clientWidth宽度

clientHeight高度

以上2个包含padding、内容不包含border

clientTop:返回元素上边框的大小

clientLeft：返回元素左边框的大小

3.立即执行函数

3.1立即执行函数：不需要调用立马能够执行的函数

3.2写法也可以传递参数

（function(){}）（）或者（function(){}()）

3.3立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量不会有命名的冲突

4.pageshow事件

persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加的

5.元素scroll系列

返回数值不带单位

scrollTop 返回被卷去的上侧距离

scrollLeft 返回被卷去的左侧距离

srollWidth 返回自身实际的宽度不含边框

srollHeight 返回自身实际的高度不含边框

sroll滚动事件当我们滚动条发生变化会触发事件

6.window.pageYOffset:页面被卷去的上侧距离

window.pageXOffset:页面被卷去的左侧距离

以上2种方法IE9以上支持

7.三大系列总结

offset系列经常用于获取元素的位置

client经常用于获取元素的大小

scroll经常用于获取元素滚动距离

8.动画原理

8.1核心原理：通过定时器setInterval()不断移动盒子的位置

实现步骤：获取盒子当前位置-->让盒子在当前位置加上1个移动距离-->利用定时器不断重复这个操作

注意：此元素需要添加定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画原理</title>
    <style>
        div{
            position: absolute;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var div=document.querySelector('div');
    var timer=window.setInterval(function () {
        if (div.offsetLeft>400){
            //到目标位置停止定时器
            clearInterval(timer);
        } else {
            div.style.left=div.offsetLeft+5+'px';
        }
    },30)
</script>
</body>
</html>

8.2简单封装动画函数

 //obj 目标对象 target目标位置
    function animate(obj,target) {
        var timer=window.setInterval(function () {
            if (obj.offsetLeft>target){
                //到目标位置停止定时器
                clearInterval(timer);
            } else {
                obj.style.left=obj.offsetLeft+5+'px';
            }
        },30)
    }

给不用元素标记不同的定时器：利用对象的属性；

//obj 目标对象 target目标位置
    function animate(obj,target) {
        //先清除定时器，只保留当前的定时器执行
        clearInterval(obj.timer);
        obj.timer=window.setInterval(function () {
            if (obj.offsetLeft>target){
                //到目标位置停止定时器
                clearInterval(obj.timer);
            } else {
                obj.style.left=obj.offsetLeft+5+'px';
            }
        },30)
    }

9.缓动动画原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

核心算法：（目标值-现在位置）/10 作为每次移动的距离长度

 //缓动动画
    function animate1(obj,target) {
        //先清除定时器，只保留当前的定时器执行
        clearInterval(obj.timer);
        obj.timer=window.setInterval(function () {
            //步长取整
            // var step =Math.ceil((target-obj.offsetLeft)/10);
            var step=(target-obj.offsetLeft)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            if (obj.offsetLeft==target){
                //到目标位置停止定时器
                clearInterval(obj.timer);
            } else {
                obj.style.left=obj.offsetLeft+step+'px';
            }
        },15)
    }

9.1给缓动动画添加回调函数

10.滚动窗口至文档中的某个位置

window.scroll(x,y);里面的x,y不带单位

带有动画的返回顶部

案例：筋斗云案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筋斗云案例</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none;
        }

        body {
            background-color: black;
        }

        .c-nav {
            width: 900px;
            height: 42px;
            background: #fff url(images/rss.png) no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;
            position: relative;
        }

        .c-nav ul {
            position: absolute;
        }

        .c-nav li {
            float: left;
            width: 83px;
            text-align: center;
            line-height: 42px;
        }

        .c-nav li a {
            color: #333;
            text-decoration: none;
            display: inline-block;
            height: 42px;
        }

        .c-nav li a:hover {
            color: white;
        }

        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) no-repeat;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.addEventListener('load',function () {
            //获取元素
            var cloud=document.querySelector('.cloud');
            var c_nav=document.querySelector('.c-nav');
            var lis=c_nav.querySelectorAll('li');
            var span=c_nav.querySelector('span');
            var current=0;
            for(i=0;i<lis.length;i++){
                lis[i].addEventListener('mouseenter',function () {
                    animate(cloud,this.offsetLeft);
                })
                lis[i].addEventListener('mouseleave',function () {
                    animate(cloud,current);
                })
                lis[i].addEventListener('click',function () {
                    current=this.offsetLeft;
                })
            }
        })
    </script>
</head>

<body>
<div id="c_nav" class="c-nav">
    <span class="cloud"></span>
    <ul>
        <li><a href="#">首页新闻</a></li>
        <li><a href="#">师资力量</a></li>
        <li><a href="#">活动策划</a></li>
        <li><a href="#">企业文化</a></li>
        <li><a href="#">招聘信息</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">我是佩奇</a></li>
        <li><a href="#">啥是佩奇</a></li>
    </ul>
</div>

</body>
</html>

m0_70617074

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-网页特效

offsetWidth:返回元素自身的宽度，返回值也不带单位；persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加的。3.3立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量不会有命名的冲突。offsetHeight：返回元素自身的高度，返回值也不带单位。offsetLeft：返回元素相对带有定位父元素左边的偏移。offsetTop:返回元素相对于定位父元素上方的偏移。1.3返回带有定位的父元素（position定位）
复制链接

扫一扫