筋斗云案例_筋斗云爬虫-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53587164/article/details/124647811

这个案例展示了如何使用HTML、CSS和JavaScript实现一个网页导航栏的动态效果。当鼠标悬停在导航项上时，云朵图标会随之移动到相应的位置。点击导航项会记录当前位置，当鼠标移开时，云朵会返回到最后一次点击的位置。这是一个结合了视觉效果和交互设计的前端技术应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

筋斗云案例

<style>

* {

margin: 0;

padding: 0

}

ul {

list-style: none

}

body {

background-color: #333;

}

.nav {

width: 800px;

height: 42px;

margin: 100px auto;

background: url(images/rss.png) right center no-repeat;

background-color: #fff;

border-radius: 10px;

position: relative;

}

.nav li {

width: 83px;

height: 42px;

text-align: center;

line-height: 42px;

float: left;

cursor: pointer;

}

.nav span {

position: absolute;

top: 0;

left: 0;

width: 83px;

height: 42px;

background: url(images/cloud.gif) no-repeat;

}

ul {

position: relative;

}

</style></head><body><div class="nav">

</ul></div>

//匀速动画

function animate(element, target) {

//清理定时器

clearInterval(element.timeId);

element.timeId = setInterval(function () {

//获取元素的当前位置

var current = element.offsetLeft;

//移动的步数

var step = (target - current) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

current += step;

element.style.left = current + "px";

if (current == target) {

//清理定时器

clearInterval(element.timeId);

}

//测试代码:

console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);

}, 20);

}

//获取云彩

var cloud = my$("cloud");

//获取所有的li标签

var list = my$("navBar").children;

//循环遍历分别注册鼠标进入,鼠标离开,点击事件

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

//鼠标进入事件

list[i].onmouseover = mouseoverHandle;

//点击事件

list[i].onclick = clickHandle;

//鼠标离开事件

list[i].onmouseout = mouseoutHandle;

}

function mouseoverHandle() {//进入

//移动到鼠标此次进入的li的位置

animate(cloud, this.offsetLeft);

}

//点击的时候,记录此次点击的位置

var lastPosition = 0;

function clickHandle() {//点击

lastPosition = this.offsetLeft;

}

function mouseoutHandle() {//离开

animate(cloud, lastPosition);

}