時間:2023-10-05 13:18:02 | 來源:網(wǎng)站運營
時間:2023-10-05 13:18:02 來源:網(wǎng)站運營
HTML 浮窗代碼:最近在設計并撰寫自己定義的第一個小項目, 其中在開發(fā)中需要使用到一個漂浮窗口的功能, 使用javascript
撰寫的, 先上一下我寫好的成品樣子:.js
里面作為界面加載完成后生成這個樣式。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ù)部分是判斷圖片路徑是否存在, 否則使用 ../
的方式追加到父級目錄上, 第三部分則是使用回到頂部的按鈕后緩和的回到頂部的代碼, 而不是直接回到頂部, 做了一個動畫效果。.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;}
關鍵詞:
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。