JS---案例:筋斗云
时间:2019-12-18
本文章向大家介绍JS---案例:筋斗云,主要包括JS---案例:筋斗云使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例:筋斗云
鼠标进入,一朵云的样式跟随鼠标移动,鼠标点击后离开,云样式回到上次点击的位置
<!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>
原文地址:https://www.cnblogs.com/jane-panyiyun/p/12059310.html
- 值得 .NET 开发者了解的15个特性
- Angular和Vue.js 深度对比
- 前端开发者常用的9个JavaScript图表库
- 1000多个项目中的十大JavaScript错误以及如何避免
- SoapUI实践:自动化测试、压力测试、持续集成
- 如何把kotlin+spring boot开发的项目部署在tomcat上
- 使用开源项目Alipay.AopSdk.Core完成支付宝网页登录
- vhost-user 简介
- 把玩爬虫框架Gecco
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-Web打印
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(89)-EF执行SQL语句与存储过程
- GitHub上大热的Deep Photo终于有TensorFlow版了!
- 资源 | Style2paints:专业的AI漫画线稿自动上色工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法