详解基于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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
javascript无刷新评论实现方法
May 13 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
完善的jquery处理机制
Feb 21 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
electron中使用bootstrap的示例代码
Nov 06 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
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
javascript时间差插件分享
2016/07/18 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python对List中的元素排序的方法
2018/04/01 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
如何通过python计算圆周率PI
2020/11/11 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
铲车司机岗位职责
2014/03/15 职场文书
上班迟到检讨书
2014/09/15 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js