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

随机推荐

IDA FLIRT使用
IDA FLIRT/FLAIR FLIRT是IDA提供的一种函数识别技术,即库文件快速识别与鉴定技术(Fast Library Identification and Recognition Tec ...
暑假撸系统6- Thymeleaf ajax交互！
本来用Thymeleaf也没想着深度使用ajax,就是用也是非常传统的ajax方式提交然后js控制修改下变量.闲来无事的时候看Thymeleaf的教程发现一哥们的实现方式,以及实现思路,堪称惊奇,先说 ...
linux 普通分区与lvm分区
安装linux系统时有时候会提示lvm分区与标准分区首先普及一下lvm分区:lvm是 logical volume manager (逻辑卷管理),linux环境下对磁盘分区的管理:他解决了安装系 ...
通过Dapr实现一个简单的基于.net的微服务电商系统(十九)——分布式事务之Saga模式
在之前的系列文章中聊过分布式事务的一种实现方案,即通过在集群中暴露actor服务来实现分布式事务的本地原子化.但是actor服务本身有其特殊性,场景上并不通用.所以今天来讲讲分布式事务实现方案之sag ...
Java不支持协程？那是你不知道Quasar！
原创:微信公众号码农参上,欢迎分享,转载请保留出处. 在编程语言的这个圈子里,各种语言之间的对比似乎就一直就没有停过,像什么古早时期的"PHP是世界上最好的语言"就不提了,最近我 ...
ios开发 Pods工具心得
Pods 这也是我的第一篇微博,希望能给大家带来帮助,也便于我自己温习第一步:新建一个xcode项目(这个不解释了) 第二步:打开终端(剩下的操作都在终端里面了)
Wireshark教程之统计功能
实验目的 1.工具介绍 2.主要应用实验原理 Wireshark的原名是Ethereal,新名字是2006年起用的.当时Ethereal的主要开发者Gerald决定离开他原来供职的公司NIS,并继续 ...
scrapy的介绍、组件、数据流
scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,我们只需要实现少量代码,就能够快速的抓取到数据内容. scrapy使用了twisted异步网络框架来处理网络通讯,来加快我们的下载速 ...
力扣第二题大数相加，链表在python到底该怎么写？
但问题在于链表的表示如何创建一个L3呢如何用next将他们连接起来呢? 原来是采用制作链表的形式 l3_pointer.next = ListNode(l1_pointer.val + l2_ ...
shell中echo基础及高级用法详解-渐入佳境
--作者:飞翔的小胖猪 --创建时间:2021年2月19日 1.1 基础用法 echo命令用来输出文本,在shell脚本中用来输出提示信息用的比较多. 单引号:原样输出所有的内容,不用转义就能输出特殊 ...

webapi_2 今天全是大经典案例

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

随机推荐

热门专题