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

随机推荐

Solution -「国家集训队」「洛谷 P4451」整数的 lqp 拆分
\(\mathcal{Description}\) Link. 求 \[\sum_{m>0\\a_{1..m}>0\\a_1+\cdots+a_m=n}\prod_{i=1}^mf ...
关于Untiy破解 for Mac
Mac的破解很简单也很坑如果你破解过win的在进行Mac版的破解可能认为三观都被颠覆了以下进行下讲解并且帮助大家排除坑还是那句话有条件的请支持正版破解版只进行技术分享第一步去u ...
三行Python代码,让你的数据处理脚本快别人4倍
Python是一门非常适合处理数据和自动化完成重复性工作的编程语言,我们在用数据训练机器学习模型之前,通常都需要对数据进行预处理,而Python就非常适合完成这项工作,比如需要重新调整几十万张图像的尺 ...
[题解]第十一届北航程序设计竞赛预赛——L.偶回文串
题目描述长度为偶数的回文串被称为偶回文串.如果一个字符串重新排序之后能够成为一个偶回文串,则称为可回文的. 给一个字符串,求可回文的子串个数.字符串只含小写字母,单个字符串长度不超过10^5,所有数 ...
绘制地图其实并不难！如何绘制地图？看看Smartbi的制作方法
数据地图是一种图形化的数据资产管理工具,它提供了多层次的图形化展现,并具备各种力度的控制能力,满足业务使用.数据管理.开发运维不同应用场景的图形查询和辅助分析需求.长期以来,很多职场人士都希望能在自己 ...
.net 技术大全
我常说C#的入门技术是委托.事件.消息.只有当你可以纯熟运用这三个技能的时候,才刚刚入门,此时C#的大门才算正式为你打开.很多人在学了一些语法编写一些项目后就觉得C#精通了,其实你们还没入门呢(对日开 ...
Jenkins——为什么使用持续集成？
一.开发模型 1.瀑布开发模型:过程线性不可逆的开发模型优势: 1)简单易懂 2)当前阶段完成后只需要关注后续阶段 3)为项目提供了按阶段划分的检查节点劣势: 1)各个阶段的划分完全固定,阶段之间 ...
Java课程设计---删除学生
1.界面已经在上次修改操作的过程添加完成 2.在StudentDao中添加删除方法 public boolean delete(int id) throws SQLException { DbUtil ...
redis主从复制,哨兵以及集群搭建部署
redis主从复制 1.redis支持多实例的功能,一台机器上,可以运行多个单个的redis数据库环境准备,运行3个redis数据库,达到 1主 2从的配置主库 6379.conf port 63 ...
千万级 PV是什么意思?
首先介绍下pv的概念: PV(访问量):即Page View,页面刷新一次算一次. UV(独立访客):即Unique Visitor,00:00-24:00内相同的客户端只被计算一次. IP(独立IP ...

webapi_2 今天全是大经典案例

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

随机推荐

热门专题