明天的案例又大又经典 我想想怎么搞呢因为要用到外联款式之类的了 写入内联也太大了
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' })})咱们下期见哈哈 不然格子不够
前端爱好者，望大佬给个内推机会！！！