案例：筋斗云

鼠标进入，一朵云的样式跟随鼠标移动，鼠标点击后离开，云样式回到上次点击的位置

<!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>

JS---案例：筋斗云的更多相关文章

  1. 第一个Vue.js案例

    第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...

  2. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  3. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  4. Knockout.Js案例二Working With Lists And Collections

    案例一:Foreach绑定 通常,您要生成重复的UI元素,特别是当显示列表,用户可以添加和删除元素.KO.JS让你轻松,使用的数组和foreach绑定. 在接下来的几分钟,您将构建一个动态UI保留席位 ...

  5. Knockout.Js案例一Introduction

    </strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...

  6. JS案例之7——瀑布流布局(2)

    这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效.这个例子不需要在wind ...

  7. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  8. JS案例之4——Ajax多图上传

    近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...

  9. 【转】asp.net mvc webapi+angular.js案例

    参考地址:http://www.mamicode.com/info-detail-892383.html 大家好,本文用一个简单的demo演示AngularJS在MVC中的使用,在学习这个demo之前 ...

  10. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

随机推荐

  1. vue通过控制boolean值来决定是否添加class类名

    vue通过控制boolean值来决定是否添加class类名

  2. Erlang/Elixir精选-第1期

    第1期(20191202) 文章 A short guide to the structure and internals of the Erlang distributed messaging fa ...

  3. 12-kubernetes Dashboard 认证及分级授权

    目录 部署 dashboard 查看 开放访问 配置dashboard用户 1. token 令牌认证 创建一个 serviceAccount dashboard-admin 绑定 clusterbi ...

  4. Zookeeper 应用实现-配置中心

    一.目标 一个乞丐版自更新配置中心,更新配置后,能在各个服务器实现更新 二.架构 三.角色 config-web: 配置后台,主要用于管理配置,增改配置 config-agent: 监听配置,遇到变动 ...

  5. MySQL详解

    MySQL详解 什么是数据库 # 用来存储数据的仓库 # 数据库可以在硬盘及内存中存储数据 # 数据库与文件存储数据区别 # 数据库本质也是通过文件来存储数据, 数据库的概念就是系统的管理存储数据的文 ...

  6. lvm_lv_create

    lvm  lv create 开机自动挂载 neokylinV7.0 [root@localhost ~]# fdisk -l 磁盘 /dev/vda:322.1 GB, 322122547200 字 ...

  7. 企业DevOps研发模式下CI/CD实践详解指南

    阅读全文大概需要 10分钟. 1. 前言 借着公司今年新组建的中台研发部东风,我作为其中的主要负责人,在研发中心主导推行DevOps研发管理模式转变及质量管理创新建设,本篇文章摘取自今年9月底,笔者在 ...

  8. tp5引用第三方类vendor或extend（多种方法）

    extend 方法一:命名空间引入 我们只需要把自己的类库包目录放入EXTEND_PATH目录(默认为extend,可配置),就可以自动注册对应的命名空间,例如: 我们在extend目录下面新增一个l ...

  9. ruby传参之引用类型

    ruby是完全面向对象语言,所有的变量所储存的,其实是对象的引用. 所以ruby方法的参数,也都是引用类型.即使是基本的类型,比如布尔,整数,小数等,也是一样. class MyObject attr ...

  10. 大型情感剧集Selenium：8_selenium网页截图的四种方法

    有时候,有时候,你会相信一切有尽头-当你的代码走到了尽头,那么保留最后一刻的状态尤为重要,此时你该如何操作?记录日志-没有将浏览器当前的状态进行截图来的直观! 那么,selenium截取截屏,有哪些方 ...