欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實現(xiàn)波浪導(dǎo)航效果

 更新時間：2022年04月13日 08:26:44   作者：Mr.王征  
這篇文章主要為大家詳細介紹了原生js實現(xiàn)波浪導(dǎo)航效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了原生js實現(xiàn)波浪導(dǎo)航效果的具體代碼，供大家參考，具體內(nèi)容如下

展示效果：

源碼展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js波浪導(dǎo)航</title>
<style>
?* {undefined
? ? margin:0;
? ? padding:0;
? ? font-family:"微軟雅黑";
}
body {undefined
? ? width:100vw;
}
.wave-ul {undefined
? ? list-style:none;
}
.wave-a {undefined
? ? text-decoration:none;
? ? display:block;
}
.wave-span {undefined
? ? background:#f69;
? ? color:#fff;
? ? width:20px;
? ? display:block;
}
.waveli-in-right {undefined
? ? float:left;
}
.waveli-in-left {undefined
? ? float:right;
}
.wavenav-right {undefined
? ? left:100%;
? ? margin-left:-20px;
}
.wavenav-left {undefined
? ? left:0%;
? ? margin-left:-130px;
}
.wave-li {undefined
? ? margin:1px;
? ? display:block;
? ? background:#ccc;
? ? width:150px;
? ? overflow:hidden;
}
.wave-nav {undefined
? ? position:fixed;
}
</style>
</head>
<body>
<div id="test"><div></div></div>

<script>
var wavenav = function(json, dir, top) {undefined
? ? this.json = json;
? ? this.dir = dir;
? ? this.top = top;
}
wavenav.prototype = {undefined
? ? constructor: wavenav,
? ? createHTML: function() {undefined
? ? ? ? var json = this.json;
? ? ? ? var htmlstr = '<nav class="wave-nav"><ul class="wave-ul">';
? ? ? ? for (var key in json) {undefined
? ? ? ? ? ? htmlstr += '<li class="wave-li"><span class="wave-span">' + key +
? ? ? ? ? ? ? ? '</span><a href="' + json[key][1] +
? ? ? ? ? ? ? ? '" class="wave-a">' + json[key][0] + '</a></li>';
? ? ? ? }
? ? ? ? htmlstr += '</ul></nav>'
? ? ? ? return htmlstr;
? ? },
? ? renderCSS: function() {undefined
? ? ? ? var dir = this.dir;
? ? ? ? var top = this.top;
? ? ? ? var oNavLenght = document.getElementsByClassName('wave-nav').length;
? ? ? ? var oLastNav = document.getElementsByClassName('wave-nav')[oNavLenght - 1];
? ? ? ? oLastNav.style.top = top;
? ? ? ? var oLastUl = oLastNav.children[0];
? ? ? ? var oLi = oLastUl.children;
? ? ? ? switch (dir) { ?
? ? ? ? ? ? case 'LEFT':
? ? ? ? ? ? ? ? addClassName('wavenav-left', 'waveli-in-left');
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? default:
? ? ? ? ? ? ? ? addClassName('wavenav-right', 'waveli-in-right');
? ? ? ? ? ? ? ? break;
? ? ? ? }

? ? ? ? function addClassName(classname1, classname2) {undefined
? ? ? ? ? ? oLastNav.classList.add(classname1);
? ? ? ? ? ? for (let i = 0; i < oLi.length; i++) {undefined
? ? ? ? ? ? ? ? oLi[i].firstChild.classList.add(classname2);
? ? ? ? ? ? ? ? oLi[i].lastChild.classList.add(classname2);
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? bindEVENT: function() {undefined
? ? ? ? var oUl = document.getElementsByClassName('wave-ul');
? ? ? ? for (let i = 0; i < oUl.length; i++) {undefined
? ? ? ? ? ? oUl[i].onmouseover = function() {undefined
? ? ? ? ? ? ? ? var oLi = oUl[i].children;
? ? ? ? ? ? ? ? for (let i = 0; i < oLi.length; i++) {undefined
? ? ? ? ? ? ? ? ? ? oLi[i].style.transition = '1s ' + 0.1 * i + 's';
? ? ? ? ? ? ? ? ? ? if (oLi[i].firstChild.className == 'wave-span waveli-in-left') {undefined
? ? ? ? ? ? ? ? ? ? ? ? oLi[i].style.marginLeft = '130px';
? ? ? ? ? ? ? ? ? ? } else {undefined
? ? ? ? ? ? ? ? ? ? ? ? oLi[i].style.marginLeft = '-130px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? oUl[i].onmouseleave = function() {undefined
? ? ? ? ? ? ? ? var oLi = oUl[i].children;
? ? ? ? ? ? ? ? for (let i = 0; i < oLi.length; i++) {undefined
? ? ? ? ? ? ? ? ? ? oLi[i].style.marginLeft = '0px';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

function createWaveNav(dom, json, direction = 'RIGHT', top = '0px') {undefined
? ? var n = new wavenav(json, direction, top);
? ? dom.innerHTML += n.createHTML();
? ? n.renderCSS();
? ? wavenav.prototype.bindEVENT();
}


var json = {undefined
? ? '1': ['HTML', 'javascript:void(0)'],
? ? '2': ['CSS', 'javascript:void(0)'],
? ? '3': ['JAVASCRIPT', 'javascript:void(0)'],
}
var json1 = {undefined
? ? '1': ['HTML', 'javascript:void(0)'],
? ? '2': ['CSS', 'javascript:void(0)'],
? ? '3': ['JAVASCRIPT', 'javascript:void(0)'],
? ? '4': ['java', 'javascript:void(0)']
}
//調(diào)用方法
createWaveNav(document.getElementById('test'), json);
createWaveNav(document.getElementById('test'), json1, 'RIGHT', '200px');
createWaveNav(document.getElementById('test'), json1, 'LEFT');
createWaveNav(document.getElementById('test'), json, 'LEFT', '200px');
</script>

</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺析Bootstrap表格的使用

    淺析Bootstrap表格的使用

    Bootstrap - 簡潔、直觀、強悍、移動設(shè)備優(yōu)先的前端開發(fā)框架,讓web開發(fā)更迅速、簡單。下面給大家介紹Bootstrap表格的使用的相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
    2016-06-06
  • JavaScript實現(xiàn)生成動態(tài)表格和動態(tài)效果的方法詳解

    JavaScript實現(xiàn)生成動態(tài)表格和動態(tài)效果的方法詳解

    這篇文章主要介紹了如何通過JavaScript語言實現(xiàn)動圖表格的生成以及動態(tài)效果的實現(xiàn)，文中的示例代碼講解詳細，感興趣的可以了解一下
    2022-02-02
  • 深入理解JavaScript中為什么string可以擁有方法

    深入理解JavaScript中為什么string可以擁有方法

    下面小編就為大家?guī)硪黄钊肜斫釰avaScript中為什么string可以擁有方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • 一文教你學(xué)會用JS實現(xiàn)圖片懶加載功能

    一文教你學(xué)會用JS實現(xiàn)圖片懶加載功能

    圖片懶加載是日常開發(fā)會經(jīng)常使用的一個功能,但是在日常中可能使用v-lazy便直接實現(xiàn)了圖片懶加載,但是本文將通過原生js來實現(xiàn)一下圖片懶加載的功能，感興趣的同學(xué)跟著小編一起來看看吧
    2023-07-07
  • List all the Databases on a SQL Server

    List all the Databases on a SQL Server

    List all the Databases on a SQL Server...
    2007-06-06
  • 開源一個微信小程序儀表盤組件過程解析

    開源一個微信小程序儀表盤組件過程解析

    這篇文章主要介紹了開源一個微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07

    • 最新評論