案例：筋斗云

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

<!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. 【Luogu P1981】表达式求值

    点我进入原题Luogu P1981 [解题思路] 仔细分析题目,这就是一道模拟题…… 直接按照符号读入全部的数字,先算乘法,最后把全部数加起来就是结果了 记得要%10000取最后四位 [参考程序] # ...

  2. Solr搜索引擎【索引提交、事务日志、原子更新】

    一.索引提交 当一个文档被添加到Solr中,但没有提交给索引之前,这个文档是无法被搜索的.换句话说,从查询的角度看,文档直到提交之后才是可见的.Solr有两种类型的提交:软提交和正常提交[也称硬提交] ...

  3. Java8 日期时间API

    一.转换 1.与字符串 //LocalDateTime 转 字符串 String str = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss ...

  4. Django中间件部分源码分析

    中间件源码分析 中间件简介 中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Django的输入和输出.每个中间件组件都负责做一些特定的 ...

  5. synchronized被这么问，谁能受得了

    synchronized是面试中经常会被问到的知识点,相关的问题点也很多,问题答案涉及的知识点也很多,有经验的面试官就会顺着你的答案不断追问一下,下面的对话场景就是相关面试题的连环炮. 面试官:说一下 ...

  6. Select下拉框onchange事件获取option的value值

    首先方法中使用到了jqury,首先导入jqury的插件: 如果jqury的小插件没有的话,就去网上下载一个吧,jqury比原生的js使用起来方便了很多,这里也提供一个我的jqury的下载地址: jqu ...

  7. 第三章 学习Shader所需的数学基础（1）

    1. 笛卡尔坐标系 在游戏中,我们使用的数学大部分都是为了计算位置.距离和角度等变量.而这些就算大部分是在笛卡尔坐标系下进行的. 1.1 二维笛卡尔坐标系 一个二维笛卡尔坐标系包含了两个部分的信息 1 ...

  8. [Coursera][计算导论与C语言基础][Week 10]对于“数组应用练习”课后习题的思考题的一些想法

    (首先,关于Honor Code,我咨询过了Help Center,分享课后练习的思考题的想法是可以的(注意不是代码),但要标明引用,引用格式来源于https://guides.lib.monash. ...

  9. I/O中断原理

    目录 I/O中断原理 前言 什么是中断 中断类型 硬件中断 软件中断 I/O中断流程 无中断 有中断 中断处理 相关文献 I/O中断原理 前言 在Windows内核原理-同步IO与异步IO和<高 ...

  10. AtCoder-3856

    An adult game master and N children are playing a game on an ice rink. The game consists of K rounds ...