详解基于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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
js正则表达式的使用详解
Jul 09 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
深入webpack打包原理及loader和plugin的实现
May 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
四个太阳教学反思
2014/02/01 职场文书
奉献演讲稿范文
2014/05/21 职场文书
授权委托书格式
2014/07/31 职场文书
政协调研汇报材料
2014/08/15 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
apache ftpserver搭建ftp服务器
2022/05/20 Servers