HTML+JavaScript实现筋斗云导航栏效果

上传人：搞*** IP属地：四川上传时间：2025-05-16 格式：DOCX 页数：10 大小：18.29KB 积分：15 举报 版权申诉

已阅读5页，还剩5页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第HTML+JavaScript实现筋斗云导航栏效果1、鼠标经过某个li，筋斗云跟着到当前的位置

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

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

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

.box{

position:relative;

width:500px;

height:50px;

background-color:grey;

ulli{

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;

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

scriptsrc="cloud.js"/script

scriptsrc="animater.js"/script

/head

body

div

liahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"首页/a

/li

/ul

imgsrc="祥云.png"alt=""

/div

/body

/html

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

//获得每个li，以及img

varas=document.querySelectorAll('li')

varimg=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;ias.length;i++){

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

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

varposi=0

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

for(i=0;ias.length;i++){

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

functionfn(){

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的绝对定位，这样可以消除抖动

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/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;

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;

.currenta{

color:red

/style

scriptsrc="animater.js"/script

scriptsrc="cloud.js"/script

/head

body

div

span/span

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML+JavaScript实现筋斗云导航栏效果

文档简介

温馨提示

最新文档

评论

HTML+JavaScript实现筋斗云导航栏效果

文档简介

温馨提示

最新文档

评论

相关文档