JS原生苹果菜单效果

知识点:

勾股定理 a²+b²=c²

Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用

难点:

计算

#box {
width: 100%;
position: absolute;
text-align: center;
bottom: 0;
} #box img {
width: 60px;
}

html结构:

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text"> <div id="box">
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
<img src="./images/3.png" alt="">
<img src="./images/4.png" alt="">
<img src="./images/5.png" alt="">
</div>
window.onload = function() {
var input = document.getElementsByTagName('input');
var oBox = document.getElementById('box');
var oImg = oBox.children;
// console.log(oImg);
document.onmousemove = function(even) {
var even = even || window.event;
var x;
var y;
for (var i = 0; i < oImg.length; i++) {
//获取图片的中心点
x = oImg[i].offsetLeft + oImg[i].offsetWidth / 2;
y = oImg[i].offsetTop + oBox.offsetTop + oImg[i].offsetHeight / 2; //鼠标在浏览器坐标的x轴距图片x中心点距离
var a = even.clientX - x;
//鼠标在浏览器坐标的y轴距图片y中心点距离
var b = even.clientY - y; //勾股定理a²+b²=c²
var c = Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2)) //scale 表示放大比例
var scale = 1 - c / 300; if (scale < 0.5) {
scale = 0.5;
} //每张图片的c赋值到input中,方便查看数据变化
input[i].value = scale; oImg[i].style.width = scale * 100 + "px";
oImg[i].style.height = scale * 100 + "px";
}
};
};

原生JS通过勾股定理计算苹果菜单效果的更多相关文章

  1. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  2. 原生JS、CSS实现的转盘效果(目前仅支持webkit)

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  3. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  4. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  5. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  6. 【京东详情页】——原生js爬坑之二级菜单

    一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单       ...

  7. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  8. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  9. Js实现京东无延迟菜单效果(demo) 慕课网

    先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理 ...

随机推荐

  1. C# 不卡屏延时方法,延迟系统时间,但系统又能同时能执行其它任务

    //延迟系统时间,但系统又能同时能执行其它任务,不卡屏延时方法 public static void Delay(int milliSecond) { int start = Environment. ...

  2. dubbo之回声测试

    回声测试 回声测试用于检测服务是否可用,回声测试按照正常请求流程执行,能够测试整个调用是否通畅,可用于监控. 所有服务自动实现 EchoService 接口,只需将任意服务引用强制转型为 EchoSe ...

  3. git解决内容冲突

    内容冲突的冲突处理 两个用户修改了同一个文件的同一块区域,git会报告内容冲突. 解决办法:打开发生冲突的文件,会发现 <<<<<<< HEADtest in ...

  4. 【sqli-labs】 less37 POST- Bypass MYSQL_real_escape_string (POST型绕过MYSQL_real_escape_string的注入)

    POST版本的less36 uname=1&passwd=1%df' or 1#

  5. JQ 获取下一个元素和获取下一个元素的[指定]子元素

    <script type="text/javascript"> $(function () { $("#div1").next().addClass ...

  6. java rsa加密解密

  7. 深入了解Spring Boot 核心注解原理

    SpringBoot目前是如火如荼,所以今天就跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到 ...

  8. hadoop fs 常用命令(1)

    Hadoop: https://blog.csdn.net/mulangren1988/article/details/54860924 Hadoop:1. Hadoop fs –fs [local ...

  9. matplotlib的annotate用法小结

    这个是matplotlib自定义的annotate方法的文本: 一. def annotate(self, s, xy, *args, **kwargs): a = mtext.Annotation( ...

  10. WOJ 1538 B - Stones II

    Problem 1538 - B - Stones IITime Limit: 1000MS Memory Limit: 65536KB Total Submit: 416 Accepted: 63 ...