今天分享下用原生JS实现苹果菜单效果，这个效果的重点有以下几点

图标中心点到鼠标的距离的算法

利用比例计算图标的宽度

代码地址：https://github.com/peng666/blogs/blob/gh-pages/menus/index.html

在线测试地址：http://peng666.github.io/blogs/menus

原生JS实现苹果菜单的更多相关文章

  1. js模拟苹果菜单

    模拟苹果菜单的js代码是从网上看到的,用来做导航菜单还是蛮好看的.这里借鉴一下. 效果描述:当鼠标移动离哪个图片最近的时候,这个图片最大,鼠标离的图片越远,则图片越小: 原理:主要用到了三角形的勾股定 ...

  2. 原生js下拉菜单

    var oDiv = document.getElementById("sunav"); var oLi = oDiv.getElementsByClassName("s ...

  3. 【京东详情页】——原生js爬坑之二级菜单

    一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单       ...

  4. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  5. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  6. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

  7. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  8. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  9. 原生JS实现轮播+学前端的感受（防止走火入魔）

    插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...

随机推荐

  1. 自定义View（二)ViewPage广告轮播

    自定义View的第二个学习案例,使用ViewPage实现广告轮播,通过组合现有的View实现效果如下: 有关ViewPage使用可以学习谷歌官方API,和训练案例: 1.使用ViewPage实现屏幕滑 ...

  2. 转：C#写的WEB服务器

    转:http://www.cnblogs.com/x369/articles/79245.html 这只是一个简单的用C#写的WEB服务器,只实现了get方式的对html文件的请求,有兴趣的朋友可以在 ...

  3. 配置Rip的认证

      实验拓扑图 PS:我做实验使用的是DynamipsDUI模拟器,并且加载的是真实的ios镜像(c3745-advipservicesk9-mz.124-3c.bin) 1. 配置路由器R1 2. ...

  4. 《Cocos2d-x实战 C++卷》上线了-源码-样章-感谢大家的支持

    <Cocos2d-x实战 C++卷>上线了 感谢大家一直以来的支持! 全面介绍Cocos开发技巧,采用Cocos2d-x3.2版本,并且详细介绍跨平台移植已经多平台发布细节. · 各大商店 ...

  5. Java Executors(线程池)

    Sun在Java5中,对Java线程的类库做了大量的扩展,其中线程池就是Java5的新特征之一,除了线程池之外,还有很多多线程相关的内容,为多线程的编程带来了极大便利.为了编写高效稳定可靠的多线程程序 ...

  6. Linux概述

    Linux概述 1.计算机资源 硬件资源 软件资源 硬件资源与软件资源之间的桥梁就是操作系统 2.操作系统分类 Windows :个人版用户最多 Mac :土豪机 Linux :主要应用于服务器 Un ...

  7. Java通过代理类实现数据库DAO操作

    下面的所有代码示例都取自李兴华的<Java Web开发实战经典>的随书源码,因为觉得设计得很好,所以将代码摘录下来作成笔记. 首先,我们在一个java文件中定义要存储的结构类型: impo ...

  8. Mac系统Finder访问资源库文件夹

    Mac在Lion版本之后,默认隐藏了“资源库”文件夹,如果有时我们又需要访问它,该怎么办呢? 方法一 打开“Finder”,打开“前往”菜单时按住“Option”键. 方法二 我们也可设置Finder ...

  9. JQuery在页面中添加和除移DOM

    1.before():将新节点添加到前面 2.after():将节点添加到低部 3.prepend():把节点变成第一个节点 4.append():把新节点添加到末端,与appendTo()效果相同, ...

  10. FastDFS4 + Ubuntu12安装及部署

    1. 安装libevent 如果需要使用http进行下载,需要安装这个组件. 2. 安装fastdfs 3. 配置fastdfs 4. 安装nginx 问题4.1:安装nginx启动后访问原先资源UR ...