webapi_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>

        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>

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

<!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[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 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>

然后就是一些在网页里面的案例了我决定先来几张图片看看效果然后把最重要的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'

    })

})

我们下期见哈哈不然格子不够

webapi_2 今天全是大经典案例的更多相关文章

webapi_3 今天真真真全是大经典案例
这个项目一多起来了,还是分个序号比价好一点,你好我好大家好,然后关于这个标点符号的问题,我打字真的很不喜欢打标点符号,不是不好按,按个逗号其实也是顺便的事情,可能就是养成习惯了,就喜欢按个空格来分开, ...
阿里云资深DBA专家罗龙九:云数据库十大经典案例分析【转载】
阿里云资深DBA专家罗龙九:云数据库十大经典案例分析 2016-07-21 06:33 本文已获阿里云授权发布,转载具体要求见文末摘要:本文根据阿里云资深DBA专家罗龙九在首届阿里巴巴在线峰会的&l ...
javascript总结41:表格全选反选,经典案例详解
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
MySQL数据库“十宗罪”【十大经典错误案例】
原文作者:张甦来源:http://blog.51cto.com/sumongodb 今天就给大家列举 MySQL 数据库中,最经典的十大错误案例,并附有处理问题的解决思路和方法,希望能给刚入行,或数 ...
那些年，我们一起做过的KNX智能化控制经典案例！
那些年,我们一起做过的KNX经典案例! 光阴之箭已经穿越年轮,抵达2021 GVS在2008年加入KNX国际协会,成为中国首批引进KNX标准的企业,此后,还率先研发出基于KNX的核心协议栈,定标准,做 ...
100个Linux Shell脚本经典案例（附PDF）
转载自:https://mp.weixin.qq.com/s/tCKAM67_7K7q2vJthaIsDQ 原文链接:https://wenku.baidu.com/view/4f089430a116 ...
【十大经典数据挖掘算法】PageRank
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 我特地把PageRank作为[十大经 ...
Linux运维之道（大量经典案例、问题分析，运维案头书，红帽推荐）
Linux运维之道(大量经典案例.问题分析,运维案头书,红帽推荐) 丁明一编 ISBN 978-7-121-21877-4 2014年1月出版定价:69.00元 448页 16开编辑推荐 1 ...
经典案例：那些让人赞不绝口的创新 HTML5 网站
在过去的10年里,网页设计师使用 Flash.JavaScript 或其他复杂的软件和技术来创建网站.但现在你可以前所未有的快速.轻松地设计或创造互动的.有趣好看的网站.如何创建?答案是 HTML5 ...

随机推荐

Sunlogin RCE漏洞分析和使用
介绍前两天网上曝出了关于向日葵远控工具(Sunlogin)Windows个人版的RCE漏洞POC.因为利用简单并且网上出现了公开的自动化扫描脚本,所以测试的人很多,也出现了一些真实攻击.漏洞的问 ...
tip8：CentOS8安装ftp服务器
之前习惯使用OpenSuse,其图形化的安装.现在刚开始使用CentOS,老老实实使用命令吧! 1.本地cmd命令ftp链接虚拟机无法链接.查出虚拟机ftp服务是否开启:没有 ps -ef|grep ...
GoJS 使用笔记
作为商业软件,GoJs很容易使用,文档也很完备,不过项目中没有时间系统地按照文档学习,总是希望快速入门使用,所以将项目中遇到的问题精简一下,希望对后来者有些帮助. 开始使用这里先展示一个最简单的例子 ...
Kafka经典三大问：数据有序丢失重复
Kafka经典三大问:数据有序丢失重复在kafka中有三个经典的问题: 如何保证数据有序性如何解决数据丢失问题如何处理数据重复消费这些不光是面试常客,更是日常使用过程中会遇到的几个问题,下面分 ...
【C# IO 操作】内存包装类 Memory <T>和 Span<T> 相关类型
简介 .NET 包含多个相互关联的类型,它们表示任意内存的连续的强类型区域. 这些方法包括: System.Span<T> 用于访问连续的内存区域得到该类型的实例: 1个T类型的数组 1 ...
VUE3 之使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手
1. 概述巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
Python：time与datetime
学习自: (10条消息) Python的time和datetime的简单使用_慢行的蜗牛-CSDN博客 Python之 time 与 datetime模块 - 叶灵溪&叶仙樱 - 博客园 py ...
k8s 中 nfs作为存储的三种方式
1.安装nfs服务.直接给命令 yum install nfs-utils vim /etc/exports /data/k8s/ 172.16.1.0/24(sync,rw,no_root_squa ...
图表控件Tchart的使用总结
用了一段时间的Tchart,做下记录总结,以便日后查用,有新的记录会及时添加更新鼠标右键选择Edit可以对图表进行编辑添加所需图表: Chart --> Series--> Add 1 ...
简单聊一聊Javascript中的模块化
在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Ja ...

webapi_2 今天全是大经典案例

webapi_2 今天全是大经典案例的更多相关文章

随机推荐

热门专题