需求：

1、鼠标移动到哪里，云彩移动到哪里

2、鼠标离开，云彩回到原点

3、鼠标离开，云彩回到之前点击的地方

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body {

            background: rgba(0, 0, 0, 0.8);

        }

        div {

            position: relative;

            width: 800px;

            height: 42px;

            margin: 100px auto;

            border-radius: 5px;

            background: url("images/wifi.png") no-repeat right #fff;

        }

        ul {

            list-style: none;

            position: relative;

        }

        li {

            float: left;

            width: 83px;

            height: 42px;

            font: 400 16px/42px "simsun";

            text-align: center;

            cursor: pointer;

        }

        span {

            position: absolute;

            width: 83px;

            height: 42px;

            left: 0;

            background: url("images/cloud.gif") no-repeat;

        }

    </style>

</head>

<body>

<div>

    <span></span>

    <ul>

        <li>首页新闻</li>

        <li>活动策划</li>

        <li>师资力量</li>

        <li>企业文化</li>

        <li>招聘信息</li>

        <li>公司简介</li>

        <li>上海校区</li>

        <li>广州校区</li>

    </ul>

    <script>

        //鼠标移动到哪里，云彩移动到哪里

        //鼠标离开，云彩回到原点

        //鼠标离开，云彩回到之前点击的地方

        var ulEle = document.getElementsByTagName("ul")[0];

        var liArr = ulEle.children;

        var spanEle = document.getElementsByTagName("span")[0];

        var imgWidth = liArr[0].offsetWidth;

        var key = 0;

        for (var i = 0; i < liArr.length; i++) {

            liArr[i].index = i;

            liArr[i].onmouseover = function () {

                animate(spanEle, this.index * imgWidth);

            }

            liArr[i].onmouseout = function () {

                animate(spanEle, key * imgWidth);

            }

            liArr[i].onclick = function () {

                key = this.index;

                animate(spanEle, key * imgWidth);

            }

        }

        function animate(ele, target) {

            clearInterval(ele.timer);

            ele.timer = setInterval(function () {

                var step = (target - ele.offsetLeft) / 10;

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                ele.style.left = ele.offsetLeft + step + "px";

                if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {

                    ele.style.left = target + "px";

                    clearInterval(ele.timer);

                }

            }, 15);

        }

    </script>

</div>

</body>

</html>

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

  1. JS 筋斗云案例

    .nav { width: 1000px; height: 60px; line-height: 60px; margin: 0 auto; position: relative; } ul { wi ...

  2. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  3. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. 正則表達式--js使用案例

    前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...

  5. JS小案例：循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  6. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  7. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  8. node.js 爬虫案例

    本案例是爬的一部小说,爬取并存在本地 使用了动态浏览器头部信息,和 动态ip代理, 这2个方式可以有效的伪装自己,不至于被反爬,然后拉黑,之前已有记录,浏览器头部信息,也记录的有, app.js im ...

  9. js DOM 案例

    模态框 <html> <head> <meta charset="UTF-8"> <title>模态框</title> ...

随机推荐

  1. VScode输出中文乱码的解决方法------测试过可以用

    用python写个爬虫,配置个VScode环境,发现输出都是乱码,翻阅网站后发现一个简单有效的方法,在此谢过网络上的大牛们的无私分享,我也在此记录一下,以备后用: 文件---->首选项----& ...

  2. 开源的多行字符串工具： 在JS中整段地写HTML

    这样看来ES6的多行字符模板可能就不需要了-- 通过这个你可以整段整段地在JS中写HTML.SQL了. 示例 之前你得这样写 var str = '' +'<!doctype html>' ...

  3. 【POJ3159】Candies（差分约束系统）

    题意:有一些人, 给n个人派糖果,给出m组约束,每组约束包含A,B,c 三个数, 意思是A的糖果数比B少的个数不多于c,即B的糖果数 - A的糖果数<= c . 最后求n 比 1 最多多多少糖果 ...

  4. Eclipse新建/导入Gradle项目

    一.新建 1.[New]->[Project] 二.导入 1.[Import] 2. 参考: http://www.vogella.com/tutorials/EclipseGradle/art ...

  5. Snail—UI学习之自己定义通知NSNotification

    背景是:一个界面跳转到第二个界面 然后 第一个界面发了一个通知  然后第二个界面收到这个通知后 把里面的数据取出来 在RootViewController.m中写入以下代码 #import " ...

  6. 从理论到实践，全方位认识DNS（理论篇）

    对于 DNS(Domain Name System) 大家肯定不陌生,不就是用来将一个网站的域名转换为对应的IP吗.当我们发现可以上QQ但不能浏览网页时,我们会想到可能是域名服务器挂掉了:当我们用别人 ...

  7. 关于uboot下data abort的问题

    在uboot下,常常会出现一些很让人揪心的问题. 解决这些问题的关键就是方法与方向.把握好这两点,一切问题都能够迎刃而解.同一时候也要自信.例如以下: 有时我们会遇到例如以下的出错信息,这时CPU会r ...

  8. _stdcall与_cdecl

    _cdecl(C Declaration的缩写)是C/C++和MFC程序默认使用的调用约定,因此可以省略,也可以在函数声明时加上_cdecl关键字来手工指定.采用_cdecl约定时,函数参数按照从右到 ...

  9. 【转】获取Android控件的宽和高

    我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看一下示例: 首先我们自己写一个控件,这个控件非常简单: public class MyImageView extends ...

  10. Poj2054 color a tree && [HNOI/AHOI2018]排列

    https://zybuluo.com/ysner/note/1120723 题面 原题 某省选强化题 大致意思是给你一颗树,选父亲后才能选儿子. 每个点对答案的贡献为你在第几次选这个点 × 该点权值 ...