用HTML与JavaScript怎样写筋斗云导航代码是哪些

发布时间：2023-08-02 12:38:26 所属栏目：语言来源：

导读：在这篇文章中我们来了解一下“用HTML与JavaScript怎样写筋斗云导航，代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有

在这篇文章中我们来了解一下“用HTML与JavaScript怎样写筋斗云导航，代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

功能要求：

1、鼠标经过某个li，筋斗云跟着到当前的位置

2、鼠标离开这个li，筋斗云回到原来的位置

3、鼠标点击了某个li，筋斗云就留在点击这个位

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box {

position: relative;

width: 500px;

height: 50px;

background-color: grey;

}

ul li {

list-style: none;

float: left;

text-align: center;

height: 40px;

line-height: 40px;

margin-left: 0px;

width: 70px;

padding-left: 0px

}

/* 问题一：之前好像有案例解决，文字与文字宽度一致 */

ul {

margin: 0px;

height: 50px;

line-height: 50px;

padding-top: 7px;

padding-left: 20px;

}

a {

display: inline-block;

width: 100%;

padding-left: 0px;

text-align: left;

color: black;

text-decoration: none;

}

img {

position: absolute;

top: -5px;

left: 5px;

width: 60px;

height: 60px;

opacity: 0.5;

}

</style>

</head>

<body>

<ul>

</li>

</ul>

</div>

</body>

</html>

window.addEventListener('load', function() {

//获得每个li，以及img

var as = document.querySelectorAll('li')

var img = document.querySelector('img')

//给每个li添加点击事件

as[1].addEventListener('mousemove', function() {

animate(img, 75)

})

as[2].addEventListener('mousemove', function() {

animate(img, 145)

})

as[3].addEventListener('mousemove', function() {

animate(img, 215)

})

as[4].addEventListener('mousemove', function() {

animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动

})

as[0].addEventListener('mousemove', function() {

animate(img, 5)

})

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

//给每个a添加一个自定义属性，倒是用来作为索引号

as[i].setAttribute('index', i)

}

var posi = 0

console.log(as[0].getAttribute('index'))

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

as[as[i].getAttribute("index")].addEventListener('mouseout', fn)

function fn() {

animate(img, posi)

}

//3，鼠标点击某个li，就固定在这个li上。离开经过某个li，就到某个li上，离开这个li，又回到刚刚的li上，相当于对初始位置的一个刷新

as[1].addEventListener('click', function() {

animate(img, 75)

posi = 75

//删除相应的离开事件

})

as[2].addEventListener('click', function() {

animate(img, 145)

posi = 145

})

as[3].addEventListener('click', function() {

animate(img, 215)

posi = 215

})

as[4].addEventListener('click', function() {

animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动

posi = 300

})

as[0].addEventListener('click', function() {

animate(img, 5)

posi = 5

})

自己只能做的出这种简单的效果，而且还是bug

1、利用动画函数

2、原先图片的起始位置是0

3、鼠标经过某个li，把当前小li的offsetLeft作为目标值

4、如果点击了某个li，就把当前li的位置存起来，作为图片的起始位置

思路和自己想的是一样的，但是要注意位置的取法，是直接通过元素的点击，去自动获得元素的位置，（但并没有仔细考虑图片应该在文字的中心）

其次，加入了ul的绝对定位，这样可以消除抖动

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.c-nav {

width: 600px;

height: 40px;

background-color: grey;

position: relative;

}

ul {

position: absolute;

text-align: center;

margin-left: 0px;

padding-left: 0px

}

/* 给ul也加上定位之后，就可以消除抖动 */

li {

top: 0px;

list-style: none;

float: left;

padding-left: 10px;

width: 80px;

height: 40px;

text-align: center;

line-height: 10px;

}

a {

color: black;

text-decoration: none;

}

.cloud {

position: absolute;

top: 0px;

left: 0px;

width: 70px;

height: 35px;

background-image: url(祥云.png);

background-repeat: no-repeat;

background-position: center;

background-size: 100%;

opacity: 0.6;

}

.current a {

color: red

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

window.addEventListener('load', function() {

var c_nav = document.querySelector('.c-nav')

var cloud = document.querySelector('.cloud')

var lis = document.querySelectorAll('li')

var current = 0 //起始位置；别用手算，肯定是获得某个元素的位置

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

lis[i].addEventListener('mouseenter', function() {

animate(cloud, this.offsetLeft) //鼠标经过时候发生抖动：因为图片过来后，就发生冲突了，此时鼠标就在图片上面

})

//鼠标离开回到起始的位置

lis[i].addEventListener('mouseleave', function() {

animate(cloud, current)

})

//鼠标点击事件

lis[i].addEventListener('click', function() {

// alert(12)

// animate(cloud, this.offsetLeft) //点击了鼠标之后，图片的起始位置就发生改变了

current = this.offsetLeft

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

lis[i].className = ''

}

this.className = 'current'

})

}

})

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

用HTML与JavaScript怎样写筋斗云导航 代码是哪些

用HTML与JavaScript怎样写筋斗云导航代码是哪些