JS---案例:筋斗云
2024-09-01 20:59:31
案例:筋斗云
鼠标进入,一朵云的样式跟随鼠标移动,鼠标点击后离开,云样式回到上次点击的位置
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<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">
<span id="cloud"></span>
<ul id="navBar">
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
<li>武汉校区</li>
<li>关于我们</li>
<li>联系我们</li>
<li>招贤纳士</li>
</ul>
</div>
<script src="common.js"></script>
<script> //获取云彩
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);
} </script>
</body> </html>
最新文章
- angular前端开发环境
- jsp中的form表单中的 id和name有什么区别了
- Auto_increment详解
- Centos压缩与打包
- oauth协议
- mybatis3 :insert返回插入的主键(selectKey)
- Java_oop_继承
- PL/0与Pascal-S编译器程序详细注释
- IE样式兼容写法
- ECSHOP:首页实现显示子分类商品,并实现点击Tab页切换分类商品
- SharePoint 2010 master page 控件介绍(3) :页面主体内容
- wps 2012-2013 通杀漏洞(CVE-2013-3934)
- linux fork函数浅析
- SQL Server (MSSQLSERVER) 服务因 找不到指定的模块。 服务特定错误而停止。
- JS中String的反转函数
- 01-Foundation简介、NSObject、copy、NSString
- RabbitMQ之Helloworld
- Selectize使用总结
- $Django 图片验证刷新 上传头像
- 使用wxpy自动发送微信消息(加强版)
热门文章
- Java包package之间调用问题-cmd运行窗口编译运行
- tcpdump 详解
- xpath-房价爬取
- python_爬虫
- 《Windows内核安全与驱动开发》 7.1&;7.2&;7.3 串口的过滤
- .Net Core的API网关Ocelot的使用(二)[负载,限流,熔断,Header转换]
- [NACOS HTTP-GET] The maximum number of tolerable server reconnection errors has been reached
- Open-Pit Mining
- C和C++从零开始系列(一)
- Python爬虫根据关键词爬取知网论文摘要并保存到数据库中【入门必学】