详解基于javascript实现的苹果系统底部菜单


Posted in Javascript onDecember 02, 2016

(不好意,先前发布的是有误的分析。现在的这个没问提了!!!)

昨天看到了“妙味课堂”的一个苹果菜单的DEMO。根据里面提到的“勾股定理”。我自己分析了一下代码。如下:

先来一效果图吧!

静止时:

详解基于javascript实现的苹果系统底部菜单

鼠标滑动时:

详解基于javascript实现的苹果系统底部菜单

一、要实现在的功能或效果:

 在鼠标滑动的靠近其中某一张图片时,这个图片会随着鼠标向它的靠近而慢慢放大。

 a.是“放大”不是“变大”。【放大】是等比例的,而【变大】:不一定是等比例。后面的公式中会体现。

 b.这里的【靠近】:是指靠近图片的【中心点】。离图片【中心点】越近,图片越大,远离中心点,就变小,当然这里的【变小】是指相对于放大之后的变小,不会变小到比原始值还要小。

 鼠标靠近红点即图片的【中心点】,图片变大,远离,变小

 靠近红点 

详解基于javascript实现的苹果系统底部菜单

   远离红点

详解基于javascript实现的苹果系统底部菜单

 二、功能分析:

1.【放大】效果:

 原来的图片宽度乘以一个比例数,假设这个图片原大小是宽64PX 高64PX;那么我把这个宽64乘以一个比例数(这里先设为X),那么 64*X  就是它放大值;

 用这个放大值加上原先的宽度,就是【放大】效果的后值。

 即:放大后图片的宽度值 = 64*X + 64;

 (这里不考虑高度,因为在IMG标签中,不定义高度,只定义宽度的话,那么宽度值变化了,高度值也会一起变化。所以只需要改变宽度值,就行了。)

2.  如何判断鼠标距离图片【中心点】的远近?

  鼠标在web页面中间是一个点,而图片【中心点】也是一个点,通过这两点之间连线的长度值的大小,就可以判断鼠标距离图片【中心点】的远近了;

  即:这个长度值越大:说明鼠标距离图片【中心点】越远;

  这个长度值越小:说明鼠标距离图片【中心点】越近;

  距离值大(白色:图片,红色:中心点,黄色:鼠标,蓝色:鼠标与中心点的距离,黑色:DIV)

详解基于javascript实现的苹果系统底部菜单

      距离值小(白色:图片,红色:中心点,黄色:鼠标,蓝色:鼠标与中心点的距离,黑色:DIV)

详解基于javascript实现的苹果系统底部菜单

3.  如何获得鼠标距离图片【中心点】的值?(即上图中蓝色线条的长度(这是重点))

 3.1 其实质就是要获得任意两点之间的距离值。

 3.2 获得方法:先构建一个直角三角形。再通过【勾肌定理】计算出两点之间的距离值;(因为我们可以通过JS的方法获得水平横向和纵向的值。正好要求斜线的值。于是可以求助【勾肌定理】了)

 3.3【勾肌定理】:直角三角形的两直角边的平方和等于斜边的平方这一特性(X2+Y2=Z2);

 x:一个直角边长度;

 y:另一个直角边长度;

 z:斜边长度(即两点之间的距离值);

 所以要获得Z的长度值,必需知道X和Y是多少;

 3.4 构建一个直角三角形

详解基于javascript实现的苹果系统底部菜单

 3.5求出鼠标距离图片【中心点】的值,即上图中的蓝色线的长度,即 Z 的值

3.5.1 先获得X的值:(obj:白的图片, oDiv:橙色的DIV, oEvent:鼠标, 黑色:web页面)

(灰色+蓝紫色+绿色)的长度值 = obj.offsetLeft + oDiv.offsetLeft + obj.offsetWidth/2;

(红色的长度值)= oEvent.clientX;

X的长度值 = ( oimg.offsetLeft+oDiv.offsetLeft+obj.offsetWidth/2 )- (oEvent.clientX); 

详解基于javascript实现的苹果系统底部菜单

3.5.2 再获得Y的值:(obj:白的图片, oDiv:橙色的DIV, oEvent:鼠标, 黑色:web页面)

(灰色+蓝紫色+绿色)的长度值 = obj.offsetTop + oDiv.offsetTop + obj.offsetHeight/2;

(红色的长度值)= oEvent.clientY;

Y的长度值 = ( oimg.offsetTop+oDiv.offsetTop+obj.offsetHeight/2 )- (oEvent.clientY);

详解基于javascript实现的苹果系统底部菜单

3.5.3【勾肌定理】:直角三角形的两直角边的平方和等于斜边的平方这一特性(X2+Y2=Z2);\

 (Math.pow(……,2)可以球出平方; Math.sqrt(……)可以求出平方根;)

 x2 = Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) ;

 Y2=  Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2);

 z2 =

Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) +

  Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)

z =  Math.sqrt(

Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) +

Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)

)

 终于获得到 Z 的值了(即鼠标距离图片【中心点】的值,上图中蓝色线条的长度)!!!

4图片放大的范围

 4.1上面的Z的范围应该是

 最小0(鼠标和【中心点】重合,黄色和红色重合,之间没有连线。所以是0);

 最大不确定;这里我们规定一个200;

 所以z的范围 0 - 200;

 Math.min():返回两个数中较小的;

 z = Math.min(Z,200);

5. 图片放大缩小公式:

当z越接近0,        即鼠标越靠近图片【中心点】,图片应该放大;

当z越接近200,

即鼠标越远离图片【中心点】,图片应该缩小;

结合第一点的公式:图片的宽度值 = X *64+ 64; 

得出公式:X = (iMax-Z)/iMax

aImg[i].width=((iMax-Z)/iMax)*64+64;

6.  完整代码

document.onmousemove=function (ev)
{
 var oEvent=ev||event;
 var oDiv=document.getElementById('div1');
 var aImg=oDiv.getElementsByTagName('img');
 var d=0;
 var iMax=200;
 var i=0;
 function getDistance(obj)
 {
  return Math.sqrt
  (
   Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2)+
   Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)
  ); 
 }
 for(i=0;i<aImg.length;i++)
 {
  d=getDistance(aImg[i]);
  d=Math.min(d,iMax);  
  aImg[i].width=((iMax-d)/iMax)*64+64;
 }
};

<divid="div1">
 <ahref="http://www.miaov.com/"><imgsrc="images/1.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/2.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/3.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/4.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/5.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
</div>
body {margin:0px;}
#div1 {text-align:center;bottom:0px; position:relative; width:500px; margin:0 auto; border:1px solid red;}
#div1 img {border:none;}

三、总结

 1.要获得任意两点之间的距离值,通过【勾肌定理】直角三角形的两直角边的平方和等于斜边的平方这一特性(X2+Y2=Z2);

 2. (iMax-Z)/iMax ,和比例有关的算法,结合加法或减法、除法、乘法;

减法:一个数不变,另一个数变大,结果越小;反之越大;

加法:一个数不变,另一个数变大,结果越大;反之越小;

 3. 有图片变化的效果,或都说是形状变化效果的时候,是不是应该先抽象成基本的形状,如点、线,面:三角形,正方形矩形,圆,平形四边形。然后找规律,多观察那些变化,那些没有变,熟悉或查找相关实例所涉及到的定理公式。慢慢的推导出效果。

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 #Javascript
Vue2实现组件props双向绑定
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 #Javascript
基于jQuery实现表格的排序
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 #Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
python实现用户登录系统
2016/05/21 Python
Python创建字典的八种方式
2019/02/27 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
2014年除四害工作总结
2014/12/06 职场文书
经典导游欢迎词
2015/01/26 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
手机销售员岗位职责
2015/04/11 职场文书
雾霾停课通知
2015/04/24 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL