這個浮窗是在右下角作為其他功能的, 分別是:回到頂部、G" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML 浮窗代碼

HTML 浮窗代碼

時間:2023-10-05 13:18:02 | 來源:網(wǎng)站運營

時間:2023-10-05 13:18:02 來源:網(wǎng)站運營

HTML 浮窗代碼:最近在設計并撰寫自己定義的第一個小項目, 其中在開發(fā)中需要使用到一個漂浮窗口的功能, 使用 javascript 撰寫的, 先上一下我寫好的成品樣子:



這個浮窗是在右下角作為其他功能的, 分別是:回到頂部、GitHub 入口、掘金入口三個功能, 所以我把它寫在 .js 里面作為界面加載完成后生成這個樣式。
代碼實現(xiàn)


window.onload = function () { let medusa = document.createElement('div'); medusa.setAttribute('class', 'medusa'); let base_url = CheckImgExists('static/Github.png') ? 'static/' : '../static/'; medusa.innerHTML = '' + '<div><a onclick="goTop()" title="Top"><img class="pass" src="' + base_url + 'Top.png"></a></div>' + '<div><a href="https://www.github.com/MedusaSorcerer/" title="Github" target="_blank"><img class="pass" src="' + base_url + 'Github.png"></a></div>' + '<div><a href="https://juejin.im/user/2805609406139950" title="掘金" target="_blank"><img class="pass" src="' + base_url + 'Juejin.png"></a></div>'; document.body.appendChild(medusa);}function CheckImgExists(url) { let ImgObj = new Image(); ImgObj.src = url; return ImgObj.width > 0;}function goTop() { let scrollToTop = setInterval(function () { let pos = window.pageYOffset; if (pos > 0) { window.scrollTo(0, pos - 20); } else { window.clearInterval(scrollToTop); } }, 10);} 第一部分是在界面加載完成后執(zhí)行 HTML 代碼插入, 當然, 你需要替換其中的圖片路徑以及 A 標簽 HREF 路徑作為你自己的值, 第二部分是因為我在使用圖片路徑時遇到的解析問題, 所以第二個函數(shù)部分是判斷圖片路徑是否存在, 否則使用 ../ 的方式追加到父級目錄上, 第三部分則是使用回到頂部的按鈕后緩和的回到頂部的代碼, 而不是直接回到頂部, 做了一個動畫效果。
下面是需要用到的 CSS 樣式代碼塊。

.medusa { position: fixed; right: 1%; bottom: 5%; width: 50px; border: 1px solid #cdcccc; background-color: white; font-size: 20px; z-index: 1040; -webkit-backface-visibility: hidden;}.medusa > div > a > img { width: 30px; height: 30px;}.medusa > div { margin: 5px 0 5px 9px;}.medusa > div > a { padding: 0 0 7px 0;}.medusa > div > a:hover { border-top: 2px solid #00a8e8; border-bottom: 2px solid #e80000;}
圖片資源




作者:MedusaSorcerer
鏈接:https://juejin.im/post/6876312343018979342
來源:掘金

關鍵詞:

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉