今天分享下用原生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. Cocoa Touch的3种类的交流方式delegate/target/notification

    1. Delegate 在Cocoa Touch类对象运行的周期中,某一个时间点它会去调用一些指定类的指定函数来完成他自身所要完成的功能.这个”指定的类”,就称为这个类的委托类.”指定函数”则是一些在 ...

  2. js标签放在html的什么位置比较好

    推荐的是js的script标签放在body的末尾,</body>标签之前,包含在body内! <body> <!--其它Html标签--> <script&g ...

  3. XAPI(XenAPI)

      转载:http://www.cnblogs.com/dkblog/archive/2011/07/07/2099885.html 初识toolstack--XEN的XenServer管理的核心 什 ...

  4. Cocos移植到Android的一些问题-SQLite3数据库移植问题

    首选我们讨论一下SQLite3数据库移植问题.我们在第14章节介绍了在Win32平台使用SQLite3数据库,我们介绍了两种配置环境的方法:一种是使用Cocos2d-x提供的SQLite3库配置,另一 ...

  5. iOS 中对各种视图的截屏以及分享

    1.一个第三方的工具,主要是对表视图.滚动视图.视图的扩展,用法也很简单 image = [tableview screenshot]; 2.然后将截的图片分享出去,在分享的时候,因为多个地方用到了截 ...

  6. iOS学习笔记--OC系列（1）

    前言 从学校毕业进入公司工作已经第3个年头了,回顾这3年的经历,有种迷茫的感觉.在公司我主要是做零售业公司的系统维护,接触的主要是Oracle的Database的东西.但是业务知识和oracle,都没 ...

  7. Android基本知识

         Android是Google公司于2007年发布的基于Linux内核的手机操作系统.应用层主要以java为编程语言,应用层分为两层,函数层(Library) 和虚拟机(Virtual).中间 ...

  8. webstorm 自定义代码模板

    Ctrl+Shift+A查找设置live 添加代码片段Live Template 编写代码的时候 缩写+Tab 即可输出代码片段 缩写启动对应代码片段的钥匙. 描述代码片段的名字. 模板文本代码片段的 ...

  9. 基础学习总结（四）--SQLite

    1. SQLiteDatabase   操作SQLite数据库的类.可以执行SQL语句,对数据库进行增.删.查.改的操作.也可以进行transaction的控制.很多类对数据库的操作最终都是通过SQL ...

  10. silverlight webclient实现上传、下载、删除、读取文件

    1.上传 private void Button_Click_1(object sender, RoutedEventArgs e) { OpenFileDialog openFileDialog = ...