案例：筋斗云

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

<!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. python分支循环

    1.遍历循环 for i in range(5) for i in range (M,N,K) for c in s: for c in 'python' print(c,end="&quo ...

  2. 今天是python专场UDP socket 链接

    type = SOCK_DGRAM UDP 协议的通信优势 允许一个服务器的同时和多个客户端通信 server import socket sk = socket.socket(type=socket ...

  3. VS Code实现markdown画流程图

    安装最新的vscode编辑器,原生支持markdown语法.不会markdow的人可以去好好学下,写文档神器!!! 1.安装Markdown Preview Enhanced插件 2.本地新建test ...

  4. Python下定义输出日志

    # 话不多说,直接看代码,,, # -*- coding:UTF-8 -*- # python version: 2.7.15 #脚本名, 日志名,日志路径 import os import sys ...

  5. Spring Boot应用启动的三种方式

    Spring Boot应用HelloWorld的三种启动方式: 项目的创建可以在http://start.spring.io/网站中进行项目的创建. 首先项目结构: 1.  通过main方法的形式启动 ...

  6. C#中的委托和事件(二)

    引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为细节的问题,包括一些大家常 ...

  7. Asp.net Core 3.0 Identity 使用smtp账户确认和密码恢复

    当新建一个core项目后,使用identity基架后,确认邮件出现了错误,并不能正常使用. 建立文档在这里 https://docs.microsoft.com/zh-cn/aspnet/core/s ...

  8. 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架

    目录 准备工作 搭建项目 vue 中 ts 语法 项目代理及 webpack 性能优化 其他 忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 web ...

  9. 和为k的倍数

    小b喜欢和为K的倍数的序列. 现在有一个长度为n的序列A,请问A有多少个非空连续子序列是小b喜欢的. #include<cstdio> #include<iostream> # ...

  10. Java修炼——文件字节输入输出流复制和缓冲流复制

    一:文件字节输入输出流复制 首先明确数据源和目的文件,然后就是"中转站",最后就是关闭 package com.bjsxt.ioproject; import java.io.Fi ...