今天分享下用原生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. ASP.NET缓存全解析2：页面输出缓存 转自网络原文作者李天平

    页面输出缓存是最为简单的缓存机制,该机制将整个ASP.NET页面内容保存在服务器内存中.当用户请求该页面时,系统从内存中输出相关数据,直到缓存数据过期.在这个过程中,缓存内容直接发送给用户,而不必再次 ...

  2. Intent.ACTION_PICK

    在常见的Activity Action Intent常量中,ACTION_PICK  android.intent.action.PICK 是“选择数据”的意思,来简单的分享一下我知道的Intent. ...

  3. iOS － 移动设备防丢失App

    一.原理 二.数据获取 三.报警

  4. 【Unity3D】刚体与碰撞体以及is Trigger属性的意义

    [Unity3D]刚体与碰撞体以及is Trigger属性的意义 刚体:个人理解就是具有物理属性(如:质量),接受物理作用(如:重力)的组件. 碰撞体:个人理解就是计算碰撞后的物理量(如:弹力). 刚 ...

  5. MySQL Limit order by

    今天写模糊查询的时候,按照时间排序并进行分页时,在mybatis的映射文件中有这样一条sql语句 SELECT <include refid="Base_Column_List&quo ...

  6. c/c++面试总结（3）

    7.vector和list的区别(这个也算是经常问的) vector和数组类似,拥有一段连续的内存空间,并且起始地址不变,这样对随机的读取很有效率(就是我们所有的[]运算符了),因为内存是连续的如果我 ...

  7. 理解ClassLoader基本原理

    当JVM(Java虚拟机)启动时,会形成由三个类加载器组成的初始类加载器层次结构:        bootstrap classloader                 |        exte ...

  8. Linux命令行提示符设置

    我们使用Linux系统时接触最多的是它的命令行窗口,很多时候我们都需要在命令行上输入命令,在输入的命令前都会有提示符,一般系统默认的提示符形式是:[username@host 工作目录]$. 其实,我 ...

  9. 可以支持jQuery1.10.1 的 fancybox 1.3.4, 並現在type為Ajax時，也可以定義窗口的大小。

    官網上的 fancybox 1.3.4 太老了,不支持jQuery1.10.1,改動了一下源碼,現在可以支持了. type為Ajax時,也可以定義窗口的大小. $("#ajaxlink&qu ...

  10. mysql主从复制-linux版本

    来自:http://www.osyunwei.com/archives/7269.html,改版 mysql主从复制本文采用的是centos6.5+mysql-5.6.23版本之前在 windows7 ...