今天分享下用原生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. Server.MapPath()获取绝对路径

    1.    Server.MapPath("/")  应用程序根目录所在的位置 如 C:\Inetpub\wwwroot\ 2.Server.MapPath("./&qu ...

  2. SQL Server 远程备份数据库

    在一些涉及到数据库的项目中,经常会有定时备份数据库的需要.定时备份到本机的话,还是挺容易的,计划任务就可以完成,但如果是整机挂了,那备份到本机是没意义的,那么就需要来考虑备份到局域网中,其它电脑里. ...

  3. 在hibernate中使用c3p0数据源

    1.  jar包  hibernate-release-4.1.8.Final\lib\optional\c3p0 2.  加入配置:   <!-- 数据库连接池最大连接数 -->  &l ...

  4. android ListView_Tiger

    xml设计 <?xml version="1.0"?> -<LinearLayout tools:context=".MainActivity" ...

  5. flume+kafka (分区实现 默认单分区) （二）

    这篇文章主要在上一篇文章的基础上讲一下 如何自定义flume到kafka的分区 上一节中从下面的地址下载了一个源码 https://github.com/beyondj2ee/flumeng-kafk ...

  6. 简明Python中的一个小错误

    最近在学Python,先看的是<Python基础教程>,后来经别人推荐,感觉网络上的<简明Python教程>也挺好的,在里面发现一个小错误. 网址如下:http://sebug ...

  7. 用户输入内容转换成Pig Latin形式。

    //(单词的第一个元音字母之前的一道单词后面,以"ay"结尾,英语单词首字母为元音字母或者没有元音字母的以“ay”为后缀.)package toPigLatin; import j ...

  8. 【转】asp.net mvc3 简单缓存实现sql依赖

    asp.net mvc3 简单缓存实现sql依赖   议题 随 着网站的发展,大量用户访问流行内容和动态内容,这两个方面的因素会增加平均的载入时间,给Web服务器和数据库服务器造成大量的请求压力.而大 ...

  9. 使用winform来递归实现资源管理器

    这里主要是对TreeView控件的学习 所使用到的方法: string path=@"E:\歌词"; //获得指定文件夹下所有文件夹的名称,这是带路径的,如:E:\歌词\11111 ...

  10. C#简单的加密类

    1.加密 public class EncryptHepler { // 验值 static string saltValue = "XXXX"; // 密码值 static st ...