JavaScript之PC端网页特效

最新推荐文章于 2024-07-25 09:24:40 发布

shirlyran

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量171

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/shirlyran/article/details/107541791

版权

1.元素偏移量 offset系列

1.1 概述

offset翻译过来就是偏移量,我们使用ofet系列相关属性可以动态的得到该元素的位置(偏移).大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位

offset系列常用属性
offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度,返回数值不带单位
element.ffsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

1.2 offset与style的区别

offset	style
offset可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+ border +width	style.width 获得不包含padding和border的值
offsetWidth等属性是只读属性,只能获取不能赋值	style.width是可读写属性,可以获取也可以赋值
所以.我们想要获取元素大小位置,用offset更合适	所以,我们想要给元素更改值,则需要用style改变

1.3 案例：获取鼠标在盒子内的坐标

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin: 100px 50px;
            background-color: lightyellow;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            this.innerHTML = '(' + x + ',' + y + ')';
        });
    </script>
</body>

1.4 案例：拖动的模态框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.getElementById('link');
        var closeBtn = document.getElementById('closeBtn');
        var title = document.getElementById('title');
        link.addEventListener('click', function() {
            mask.style.display = 'block';
            login.style.display = 'block';
        });
        closeBtn.addEventListener('click', function() {
            mask.style.display = 'none';
            login.style.display = 'none';
        });
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove', fn);

            function fn(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function(e) {
                document.removeEventListener('mousemove', fn);
            })
        })
    </script>
</body>

</html>

1.5 电商详情页放大镜效果

js：
window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';

    })
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    preview_img.addEventListener('mousemove', function(e) {
        var x = e.pageX - preview_img.offsetLeft;
        var y = e.pageY - preview_img.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;

        var maskMax = preview_img.offsetWidth - mask.offsetWidth

        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }

        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= preview_img.offsetHeight - mask.offsetHeight) {
            maskY = preview_img.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        var bigImg = document.querySelector('.bigImg');
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})
css：
.preview_img {
    position: relative;
    height: 398px;
    border: 1px solid #ccc;
}

.mask {
    display: none;
    width: 300px;
    height: 300px;
    background-color: #fede4f;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ccc;
    cursor: move;
}

.big {
    display: none;
    width: 500px;
    height: 500px;
    position: absolute;
    left: 410px;
    top: 0;
    z-index: 999;
    border: 1px solid #ccc;
    overflow: hidden;
}

.bigImg {
    position: absolute;
    top: 0;
    left: 0;
}
html：
<div class="preview_img">
    <img src="upload/s3.png" alt="">
    <div class="mask"></div>
    <div class="big">
        <img src="upload/big.jpg" alt="" class="bigImg">
    </div>
</div>

2. 元素可视区 client系列

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.lientHeight	返回自身包括padding、内容区的高度, 不含边框，返回数值不带单位

2.1 立即执行函数

写法

(function(){})()
或者
(function(){}())
无需调用，立即执行

立即执行函数最大的作用就是独立创建了一个作用域，里面的变量都是局部变量

2.2 pageshow事件

下面三种情况都会刷新页面都会触发load事件。

a标签的超链接
F5或者刷新按钮(强制刷新)
前进后退按钮

但是火狐中,有个特点,有个“往返缓存”, 这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

此时可以使用pageshow事件来触发, 这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页面中, pageshow会在load事件触发后触发;根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件,注意这个事件window添加。

3. 元素滚动 scroll 系列

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrolleft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.crollHeight	返回自身实际的高度，不含边框，返回数值不带单位

3.1 scroll事件

滚动条发生变化时触发

window.scroll(x,y);//不加单位，滚动到页面的特定位置

三个系列的区别

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度, 不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框,返回数值不带单位

mouseenter和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter事件
类似mouseover ,它们两者之间的差别是
mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发
之所以这样,就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

4. 动画函数

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

实现步骤：

1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意此元素需要添加定位,才能使用element.style.left

4.1 简单函数封装

//obj--目标对象，target--目标位置（要移动到的位置）
function animation（obj,target）{
    //obj.timer 给不同的元素指定了不同的定时器
    obj.timer=setInterval(function(){
        if(obj.offsetLeft>=target){
            clearInterval(obj.timer);
        }
        obj.style.1eft = obj.offsetLeft + 1 + 'px';
    },15);
}

4.2 缓动效果原理

缓动动画就是让元索运动速度有所变化,最常见的是让速度慢慢停下来
思路:
1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
2.核心算法: (目标值-现在的位置) 1 10做为每次移动的距离步长
3.停止的条件是:让当前盒子位置等于目标位置就停止定时器
4.步长值取整
function animation（obj,target）{
    //obj.timer 给不同的元素指定了不同的定时器
    先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var step = (target - obj. offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step):Math.floor(step);
        if(obj.offsetLeft>=target){
            clearInterval(obj.timer);
        }
        obj.style.1eft = obj.offsetLeft + step + 'px';
    },15);
}

5 节流阀

防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕,再去执行下一一个函数动画,让事件无法连续触发。
核心实现思路:利用回调函数,添加-一个变量来控制,锁住函数和解锁函数。
开始设置一个变量 var flag true;
If(flag) {flag= false; do something}关闭水龙头
利用回调函数动画执行完毕, flag= true 打开水龙头

shirlyran

关注

0
点赞
踩
1

收藏

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

1.元素偏移量 offset系列1.1 概述offset翻译过来就是偏移量,我们使用ofet系列相关属性可以动态的得到该元素的位置(偏移).大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位offset系列常用属性 offset系列属性作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位
复制链接

扫一扫