今天分享下用原生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. 让文字在标签li的底部

    <ul> {aspcms:navlist type=6 } <li style="border-bottom:1px solid #d4d4d4;padding-top:2 ...

  2. 二十一、Android上常见度量单位【xdpi、hdpi、mdpi、ldpi】解读

    术语和概念 屏幕尺寸 屏幕的物理尺寸,以屏幕的对角线长度作为依据(比如 2.8寸, 3.5寸). 简而言之, Android把所有的屏幕尺寸简化为三大类:大,正常,和小. 程序可以针对这三种尺寸的屏幕 ...

  3. Part 8 Coalesce function in sql server

  4. Java之循环语句练习1

    最近在猛复习Java,猛刷题目ing.这个做题目的过程其实也就像搬砖一样,一点一点把最基础的巩固好,一块一块.整整齐齐地砌才能砌好一面墙.好了,不说了,我要去搬砖了. 其实不瞒你们说,我是比较喜欢数学 ...

  5. 通过带参数的Sql语句来实现模糊查询（多条件查询）

    #region 通过带参数的Sql语句来实现模糊查询(多条件查询) StringBuilder sb = new StringBuilder("select * from books&quo ...

  6. sql 查询包含字符的数量统计

    );); SELECT @word = 'I do not like to get the news, because there has never been an era when so many ...

  7. php nginx fastdfs 下载文件重命名

    其实fdfs可以传入一个filename参数,指定文件名.. M00/00/00/fwAAAVGMateAafjTAAAABBW-xbM368.txt?filename=test.txt 这样下载时用 ...

  8. 【原创】如何找到Oracle中哪条记录被锁

    通常有这种情况,某个表或者准确的说是表的某条记录被锁(TX锁),在业务层面排查之余,一般都会想知道是哪条记录被锁,每次被锁的是否是同一条记录?还是每次都不同?通过记录可以找到这条记录可以在哪个模块.哪 ...

  9. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  10. 反射-Reflect

    1.得到一份Class(同一个类在JVM中只有一份字节码) 三种方式:类名.class, Class.forName("全限定名");, 对象.getClass(); 基本类型 i ...