案例：筋斗云

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

<!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. 【笔记】总结Springboot和Vue前后端分离的跨域问题

    跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...

  2. EntityFramework Core 3.0查询

    前言 随着.NET Core 3.0的发布,EF Core 3.0也随之正式发布,关于这一块最近一段时间也没太多去关注,陆续会去对比之前版本有什么变化没有,本节我们来看下两个查询. 分组 我们知道在E ...

  3. 最全 HTTP 安全响应头设置指南

    销售“安全记分卡”的公司正在崛起,并已开始成为企业销售的一个因素.这些公司组合使用 HTTP 安全报头和 IP 信誉来进行评级.不过,在很大程度上,公司的得分取决于对外开放网站上设置的安全响应报头.本 ...

  4. Select2 禁用option

    禁用 $("#priceGroupType option[value='1']").prop('disabled', true); $("#priceGroupType& ...

  5. Ubuntu 一键伪装成Win 10，Kali Linux 2019 kali-undercover软件嫁接；

    今天,下午刷手机的时候,突然看到kali出了一个非常新颖的主题:该主题可以使得kali系统伪装成windows 10而变得低调起来:就像下面这样: 具体新闻链接:https://www.freebuf ...

  6. 细说JVM内存模型

    细说JVM内存模型 前言 在正式学习 JVM 内存模型之前,先注意以下几个是问题: JVM 内存模型与 JAVA 内存模型不是同一个概念.JVM 内存模型是从运行时数据区的结构的角度描述的概念:而 J ...

  7. ASP.NET Core3.X 终端中间件转换为端点路由运行

    引言 前几天.NET Core3.1发布,于是我把公司一个基础通用系统升级了,同时删除了几个基础模块当然这几个基础模块与.NET Core3.1无关,其中包括了支付模块,升级完后静文(同事)问我你把支 ...

  8. 震惊！线上四台机器同一时间全部 OOM，到底发生了什么？

    案发现场 昨天晚上突然短信收到 APM (即 Application Performance Management 的简称),我们内部自己搭建了这样一套系统来对应用的性能.可靠性进行线上的监控和预警的 ...

  9. C#程序编写高质量代码改善的157个建议[正确操作字符串、使用默认转型方法、却别对待强制转换与as和is]

    前言 本文主要来学习记录前三个建议. 建议1.正确操作字符串 建议2.使用默认转型方法 建议3.区别对待强制转换与as和is 其中有很多需要理解的东西,有些地方可能理解的不太到位,还望指正. 建议1. ...

  10. #化鲲为鹏，我有话说# 鲲鹏弹性云服务器配置 Tomcat

    在鲲鹏弹性云服务器上配置 Tomcat 1 下载 Tomcat 地址 :http://tomcat.apache.org/ 根据需要选择版本,这里使用 Tomcat 9,下载压缩包 2 将文件发送到服 ...