webapi_2 今天全是大经典案例

webapi_2 今天全是大经典案例

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

1.

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

Document 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; } // 这小小的一道题 还真不轻松 后面还要再做几遍 先来复盘一下 // 第一步先获得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 \= '' } }

2.

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

Document .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; }

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里面按起的设置就会无效 })

3.

然后就是一些在网页里面的案例了 我决定先来几张图片 看看效果 然后把最重要的js逻辑实现和对应的html代码弄上来就行了吧 毕竟这是两个最关键的东西

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

 可以移动可以跟随 然后对应的html呢就是这个

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’
})
})

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