今天分享下用原生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. 使用Struts2 验证框架，验证信息重复多次出现

    版权声明:本文为博主原创文章,未经博主允许不得转载. 问题描述:第一次提交表单.某个数据不符合规则,就会出现一条错误信息.再次提交,上次显示的错误信息不消失,又多出一条一模一样的错误信息.提交几次,就 ...

  2. AMQ学习笔记 - 20. 使用Apache ActiveMQBrowser监控ActiveMQ

    概述 Apache ActiveMQBrowser可以用于查看AMQ中的消息.这里对其使用方法进行简单介绍. 使用介绍 1.下载并解压缩 下载地址:Apache ActiveMQBrowser,当前最 ...

  3. 【ASP.NET】获取网站目录的方法

         获取网站物理路径: HttpRuntime.AppDomainAppPath 获取网站虚拟路径: HttpRuntime.AppDomainAppVirtualPath

  4. 什么是GPX

    GPX(GPS eXchange Format, GPS交换格式)是一个XML格式,为应用软件设计的通用GPS数据格式. 它可以用来描述路点.轨迹.路程.这个格式是免费的,可以在不需要付任何许可费用的 ...

  5. C语言 猜数游戏--产生一个随机数

    #include <stdio.h> #include <time.h> #include <stdlib.h> int main(int argc, const ...

  6. .NET中的 枚举

    我理解的枚举就是编程中约定的一个"可选值":例如QQ的在线状态,分别有    在线,Q我吧,隐身,忙碌等等...我觉得这就是一个枚举. 1.普通枚举 1) 实例 public en ...

  7. CS 和 BS 的区别和优缺点

    通俗来讲: bs是浏览器(browser)和服务器(server) cs是静态客户端程序(client)和服务器(server) 区别在于,虽然同样是通过一个程序连接到服务器进行网络通讯,但是bs结构 ...

  8. RHEL(RedHat Enterprise Linux)5/6 ISO镜像下载

    本文贴出了RHEL(RedHat Enterprise Linux)发行版本中常用的服务器版本的ISO镜像文件,供大家下载学习使用,贴出的版本有RedHat Enterprise Linux(RHEL ...

  9. win7 php5.5 apache 源码安装 imagick扩展

    最近公司项目有用到php 的imagick,折腾了好长时间才把扩展装上,最主要的就是最新的不一定是最合适的,最开始一直找最新包安装,一直都不成功,经过google了好长时间,终于找到一个有用的,灵机一 ...

  10. AngularJS(16)-路由

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...