webapi_2 今天全是大经典案例
今天的案例又大又经典 我想想怎么搞呢因为要用到外联样式之类的了 写入内联也太大了
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[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>
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'
})
})
我们下期见哈哈 不然格子不够
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 ...
随机推荐
- 图计算 on nLive：Nebula 的图计算实践
本文首发于 Nebula Graph Community 公众号 在 #图计算 on nLive# 直播活动中,来自 Nebula 研发团队的 nebula-plato 维护者郝彤和 nebula-a ...
- C1 能力认证——Web进阶
C1 能力认证--Web进阶 DOM节点操作-上 名称 描述 getElementById() 获取带有指定id的节点 getElementsByTagName() 获取带有指定标签名的节点集合 qu ...
- Dubbo SPI机制之三Adaptive自适应功能
JDK标准中SPI机制的一个问题就是其一次性实例化扩展点所有实现,如果有扩展实现初始化很耗时,但如果没用上也加载,会很浪费资源:扩展点加载失败,其他扩展点都用不了了.Dubbo是如何解决该问题动态的选 ...
- 神奇！这款 Vue 后台框架居然不用手动配置路由
前言 做 Vue 开发脱离不了路由,尤其是中大型项目,页面多且杂,在配置路由的时候总是会变得逐渐暴躁,因为费时,并且又没有什么太多技术含量,总觉得是在浪费时间. 另外如果接手了别人的项目,当业务有变更 ...
- 微信小程序蓝牙开发
微信小程序蓝牙控制方案: 蓝牙模块如何快速改名并绑定用户手机?这样即使多台蓝牙设备在同一个地方使用也可以互不干扰,燧星科技给出解决方案. 长按控制板5秒进入待绑定下状态,点击"添加蓝牙设备& ...
- 从数据源支持、支持方式等角度深入了解Smartbi与Tableau
对数据分析来讲,数据源支持是基本功.让数据分析工具与数据保持一个通道,建立会话.用数据分析应用服务器与我们需要分析的业务数据进行连接,拿到需要的数据进行分析.Smartbi.Tableau系统给我们提 ...
- 关于python的turtle详解（转载）
详解文章见turtle--海龟绘图--python3.10.2文档
- 每日一算之变位词(C#)
今天看编程珠玑里面,看到一个关于查找变位词的题目,大概意思如下:post,stop,tops这几个是变位词,找出类似的这些词语来. 解题思路一:既然是变位词,1.他们的长度一定是一致的:2.还有就是他 ...
- FoveaBox：细节差别，另一种DenseBox+FPN的Anchor-free方案 | IEEE TIP 2020
作为与FCOS和FSAF同期的Anchor-free论文,FoveaBox在整体结构上也是基于DenseBox加FPN的策略,主要差别在于FoveaBox只使用目标中心区域进行预测且回归预测的是归一化 ...
- JZ-004-重建二叉树
重建二叉树 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序 ...