关于javascript:webapi2-今天全是大经典案例

7次阅读

共计 6087 个字符，预计需要花费 16 分钟才能阅读完成。

明天的案例又大又经典我想想怎么搞呢因为要用到外联款式之类的了写入内联也太大了

1.

先来一个独自小页面的吧一个仿淘宝右侧侧边栏的案例不多说都在正文里了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 80%;
            height: 500px;
            background-color: aqua;
        }
        nav {
            width: 80%;
            height: 600px;
            margin: 20px 0;
            background-color: saddlebrown;
        }
        section {
            width: 80%;
            height: 1500px;
            background-color: gold;
        }
        aside {
            position: absolute;
            top: 60%;
            right: 17%;
            width: 60px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>
    <section></section>
    <aside></aside>
    <script>
        // 这小小的一道题  还真不轻松 前面还要再做几遍 先来复盘一下
        // 第一步先取得 nav 的一个 offsettop 实际上就是咱们要转为 fixed 的像素点 而后这里有个关键点 同时用 aside 也就是侧边栏的 offsettop 减去 nav 的 top
        // 作为等会转为 fixed 的一个 top 值 这个很要害 不然等会依照相对定位的 top 值来 就会忽然挑一下 不够天然
        var aside = document.querySelector('aside')
        var nav = document.querySelector('nav')
        var navTop = nav.offsetTop
        var asideOffsetTop = aside.offsetTop
        var asideTop = asideOffsetTop - navTop
        // 第二局部 滚动到 section 的 offsettop 的时候显示返回顶部
        var section = document.querySelector('section')
        // 失去这两个值便能够进入滚动事件
        document.onscroll = function() {if (window.pageYOffset >= navTop) {
                aside.style.position = 'fixed'
                aside.style.top = asideTop + 'px'
            } else {
                aside.style.position = 'absolute'
                aside.style.top = asideOffsetTop + 'px'
            }
            if (window.pageYOffset >= section.offsetTop) {aside.innerText = '返回顶部'} else {aside.innerText = ''}
        }
    </script>
</body>
</html>

2.

而后是一个模仿模态框拖拽的，这是经典了吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
    <!-- 1. 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。    2. 点击敞开按钮，能够敞开模态框，并且同时敞开灰色半透明遮挡层。    3. 鼠标放到模态框最下面一行，能够按住鼠标拖拽模态框在页面中挪动。    4. 鼠标松开，能够进行拖动模态框挪动 -->
<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  此处含有隐藏内容，需要正确输入密码后可见！
" 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 btn = document.querySelector('#link')
    var login = document.querySelector('.login')
    var close = document.querySelector('.close-login')
    btn.addEventListener('click', function() {
        login.style.display = 'block'
        login.nextElementSibling.style.display = 'block'
    })
    close.addEventListener('click', function() {
        login.style.display = 'none'
        login.nextElementSibling.style.display = 'none'
    })
    login.firstElementChild.addEventListener('mousedown', function(e) {
        // 鼠标按下先取得鼠标在盒子内的一个坐标 这也是整套过程中不会变的值
        var mouseX = e.pageX - login.offsetLeft
        var mouseY = e.pageY - login.offsetTop
        // 按下的过程中再进行挪动
        document.addEventListener('mousemove', move)
            // 一直地用鼠标挪动的坐标去减鼠标在盒子中的地位 把值给到盒子的 left top 偏移量
            function move(e) {
                var x = e.pageX - mouseX
            var y = e.pageY - mouseY
            login.style.left = x + 'px'
            login.style.top = y + 'px'}
            document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move)
            })
            // 留神！！！挪动和鼠标按起 都是在 document 外面产生的事件 挪动不弄在 doucument 外面挪动时会变卡 按起不弄在 document 外面按起的设置就会有效
    })
</script>
</body>
</html>

3.

而后就是一些在网页外面的案例了我决定先来几张图片看看成果而后把最重要的 js 逻辑实现和对应的 html 代码弄上来就行了吧毕竟这是两个最要害的货色

首先第一个呢是一个京东放大镜成果的案例做进去差不多就像下图的样子

能够挪动能够追随而后对应的 html 呢就是这个

<div class="preview_wrap fl">
                <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>
html 代码很少也不须要啥子太多 这个 css 可能要多点 而后是咱们的 js 代码

// 鼠标一进入浏览区 面罩显示
document.addEventListener('DOMContentLoaded', function() {var box = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    var bigImg = document.querySelector('.bigImg')
    box.addEventListener('mousemove', function(e) {
        mask.style.display = 'block'
        big.style.display = 'block'
        var x = e.pageX - box.offsetLeft - (mask.offsetWidth/2)
        var y = e.pageY - box.offsetTop - (mask.offsetHeight/2)
        mask.style.left =x + 'px'
        mask.style.top = y + 'px'
        // 设置界限
        // 最大挪动间隔
        var maskMax = box.offsetWidth - mask.offsetWidth
        if (x <= 0) {mask.style.left = 0 + 'px'}else if(x >= maskMax) {mask.style.left = maskMax + 'px'}
        if (y <= 0) {mask.style.top = 0 + 'px'} else if (y >= maskMax) {mask.style.top = maskMax + 'px'}
        // 这里有个小点须要留神一下 始终卡在这里 对于上面的大图显示有问题不设置的话
        // 须要将 x y 做一个规整 不然他也是始终在动
        x = x < 0 ? '0px' : mask.offsetLeft;
        x = x > maskMax ? '100px' : mask.offsetLeft;
        y = y < 0 ? '0px' : mask.offsetTop;
        y = y > maskMax ? '100px' : mask.offsetTop;
        // 大图挪动间隔公式
        // 大图片的挪动间隔 = 遮挡层挪动间隔 * 大图片最大挪动间隔 / 遮挡层的最大挪动间隔
        // 大图最大挪动间隔
        var bigMove = bigImg.offsetWidth - big.offsetWidth
        var bigX = x * bigMove / maskMax
        var bigY = y * bigMove / maskMax
        bigImg.style.left = -bigX + 'px'
        bigImg.style.top = -bigY + 'px'
    })
})

咱们下期见哈哈不然格子不够
前端爱好者，望大佬给个内推机会！！！

正文完