webapi_2 今天全是大經典案例
阿新 • • 發佈:2022-03-28
今天的案例又大又經典 我想想怎麼搞呢因為要用到外聯樣式之類的了 寫入內聯也太大了
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' }) })
我們下期見哈哈 不然格子不夠