案例：筋斗云

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

<!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. 【原创】（十二）Linux内存管理之vmap与vmalloc

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  2. 依赖注入利器 - Dagger ‡

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/53715960 本文出自: [HansChen的博客] 概述 声明需要注入的对象 如何 ...

  3. .Net Core使用分布式缓存Redis：基础

    一.前言 Redis的介绍网上很多不再赘述.本次环境为net core 2.2,使用的StackExchange.Redis来操作Redis. 二.引用Microsoft.Extensions.Cac ...

  4. flanneld 安装

    目录 flanneld 安装 下载分发flanneld二进制文件 分发二进制文件到所有集群的节点 创建Flannel证书和私钥 创建证书签名请求 生成证书和私钥 向etcd写入Pod网段信息 创建fl ...

  5. mysql 插入string类型变量时候，需要注意的问题，妈的，害我想了好几个小时！！

    很多人在用php+MySQL做网站往数据库插入数据时发现如下错误: 注册失败!Unknown column '1a' in 'field list' 结果发现用数字提交是没有问题的,其他如char型就 ...

  6. 高逼格利器之Python闭包与装饰器

    生活在魔都的小明,终于攒够了首付,在魔都郊区买了一套房子:有一天,小明踩了狗屎,中了一注彩票,得到了20w,小明很是欢喜,于是想干脆用这20万来装修房子吧(decoration): 整个装修过程,小明 ...

  7. Spring的相关注解

    说明写在最前面:摘录于   博客园--受伤滴小萝卜   文章 文章链接受伤滴小萝卜文章--Spring注解 本文章只用作学习和帮助其他人学习记录使用 Spring 注解学习笔记 声明Bean的注解: ...

  8. 虚拟机中linux操作系统raid10(5块磁盘)配置流程及损坏磁盘的移除

    打开所要用的虚拟机,点击编辑虚拟机设置,点击硬盘,添加 2.一直点击下一步不做修改,直到最后完成 3.按照以上步骤添加5块磁盘 4.点击开启虚拟机,输入用户名root密码登录进去 5.进入虚拟机后,鼠 ...

  9. springboot+微信小程序实现微信支付【统一下单】

    说明: 1)微信支付必须有营业执照才可以申请 2)微信支付官方api是全套的,我这是抽取其中的统一下单api,做了一个简单的封装 首先看看微信支付 商户系统和微信支付系统主要交互: 1.小程序内调用登 ...

  10. nginx部署安装

    首先需要下载Nginx软件包 nginx软件官方下载地址:[nginx官方下载连接](http://www.nginx.org) 建议选择稳定的软件版本,如果练习使用当然是无所谓,随便什么版本都可以, ...