js实现tab栏切换效果

js实现tab栏切换效果

79
2020-08-06 15:54:24

本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下

效果展示:

js实现tab栏切换效果 (https://www.wpmee.com/) javascript教程 第1张

源码展示:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js实现tab栏切换</title>

<style>

* {

margin: 0;

margin: 0;

padding: 0;

list-style: none;

}

 

.nav {

width: 100%;

height: 50px;

}

 

.nav ul {

width: 600px;

height: 50px;

margin: 0 auto;

}

 

.nav ul li {

width: 120px;

height: 50px;

font-weight: 800;

font-size: 18px;

color: #515151;

line-height: 50px;

text-align: center;

float: left;

cursor: pointer;

}

 

.tiao {

width: 600px;

height: 5px;

background-color: #515151;

margin: 0 auto;

position: relative;

top: 0;

left: 0;

}

 

.zhou {

width: 120px;

height: 5px;

background-color: red;

position: absolute;

top: 0;

left: 0;

}

 

.ww {

width: 0px;

border-width: 8px;

border-style: solid;

border-color: rgba(250, 0, 255, 0) rgba(250, 0, 255, 0) red rgba(250, 0, 255, 0);

position: absolute;

top: -16px;

left: 56px;

}

 

.nei {

width: 600px;

height: 300px;

margin: 0 auto;

}

 

.nei li {

width: 600px;

height: 300px;

color: #fff;

font-family: "微软雅黑";

font-size: 40px;

text-align: center;

line-height: 300px;

display: none;

margin-top: 10px;

}

</style>

</head>

<body>

<div class="nav">

<ul>

<li onmouseover="don(0)">大娃</li>

<li onmouseover="don(1)">二娃</li>

<li onmouseover="don(2)">三娃</li>

<li onmouseover="don(3)">四娃</li>

<li onmouseover="don(4)">五娃</li>

 

</ul>

</div>

 

<div class="tiao">

<div id="zhou" class="zhou" style="left: 0;">

<div class="ww"></div>

</div>

</div>

 

<div id="nei" class="nei">

<ul>

<li style="background-color:#e4007f; display: block;">大娃出世</li>

<li style="background-color:#687de8">二娃出世</li>

<li style="background-color:#2fb936">三娃出世</li>

<li style="background-color:#4dd5d0">四娃出世</li>

<li style="background-color:#e24759">五娃出世</li>

</ul>

</div>

 

<script>

var k;

var kk = 0;

 

function don(gh) {

if (kk == 0) {

kk = 1

var w1 = document.getElementById('zhou')

var t = parseInt(w1.style.left)

 

if (t < gh * 120) {

k = window.setInterval(

function () {

goright(gh * 120)

}, 30

)

} else if (t > gh * 120) {

k = window.setInterval(

function () {

goleft(gh * 120)

}, 30

)

} else {

kk = 0

}

var w2 = document.getElementById('nei').getElementsByTagName('li')

for (var i = 0; i < w2.length; i++) {

w2[i].style.display = "none"

}

w2[gh].style.display = "block"

}

}

 

//右移动

function goright(gh1) {

var w1 = document.getElementById('zhou')

var t = parseInt(w1.style.left)

t += 20

 

if (t >= gh1) {

t = gh1

window.clearInterval(k)

kk = 0

}

w1.style.left = t + "px"

}

 

//左移动

function goleft(gh1) {

var w1 = document.getElementById('zhou')

var t = parseInt(w1.style.left)

t -= 20

//alert(t)

if (t <= gh1) {

t = gh1

window.clearInterval(k)

kk = 0

}

w1.style.left = t + "px"

}

</script>

<hr>

<pre style="color:red">

感: 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客

 

--王

</pre>

 

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

js实现tab栏切换效果 (https://www.wpmee.com/) javascript教程 第2张

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持