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

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

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

先来一效果图吧!

静止时:

鼠标滑动时:

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

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

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

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

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

 靠近红点 

        

远离红点

 二、功能分析:

1.【放大】效果:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   x:一个直角边长度;

   y:另一个直角边长度;

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

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

 3.4 构建一个直角三角形

 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); 

  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);

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

以上就是本文的全部内容,希望对大家有所帮助,谢谢对我们的支持!

(0)

相关推荐

  • 判断滚动条到底部的JS代码

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). 复制代码 代码如下: /

  • js判断滚动条是否已到页面最底部或顶部实例

    本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法. 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 复制代码 代码如下: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll

  • 始终在页面底部的层js实现代码

    table {border-top:6 solid blue; border-left:6 solid lime;border-right:6 solid orange; border-bottom:6 solid pink;border-collapse:collapse;} td {border-right:1 solid yellow; border-bottom:1 solid cyan;width:50px;border-collapse:collapse;} aa aa aa aa

  • 公共js在页面底部加载的注意事项介绍

    JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度. 但是,php控制器一般这样写: 复制代码 代码如下: $this->load->view($HEADER); $this->load->view($MENU); $this->load->view($VIEW_SHOW, $data); $this->load->view($FOOTER); $FOOTER是个共用模版,用于加载js及css文件. $VIEW_SHOW作为主模版,

  • 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

    滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).h

  • js实现带关闭按钮始终显示在网页最底部工具条的方法

    本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

  • 基于javascript实现浏览器滚动条快到底部时自动加载数据

    废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /

  • JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

  • js实现滚动条滚动到页面底部继续加载

    这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的.但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得. 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/:如果这个判断为true则表示滚动条滚动到了底部. 实例 <

  • JS实现仿苹果底部任务栏菜单效果代码

    本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动画效果非常流畅,以前发过这种效果,但是是使用了jQuery实现的,今天这个没有jQuery插件哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-apple-buttom-nav-menu-style-codes/ 具体代码如下: <!D

  • Javascript实现DIV滚动自动滚动到底部的代码

    查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果. 关键的部分部分在这里:div.scrollTop = div.scrollHeight; 下面是具体实现的精简代码: 复制代码 代码如下: <html> <body> <div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> <table style

随机推荐