通过鼠标与不同图片的间距比对图片做相应的放大缩小。


<div id="box">
<img src="data:images/1.png" class="img1" alt=""/>
<img src="data:images/2.png" class="img1" alt=""/>
<img src="data:images/3.png" class="img1" alt=""/>
<img src="data:images/4.png" class="img1" alt=""/>
<img src="data:images/5.png" class="img1" alt=""/>
</div>

#box{
position: fixed;
bottom: ;
width: %;
text-align: center;
//zoom: 1; ------------>这个属性在这里不能用 }
 document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('box');
var aImg=document.getElementsByTagName('img');
var i=;
var disNum = ;//间距阀值 for(i=;i<aImg.length;i++)
{
var x=aImg[i].offsetLeft+aImg[i].offsetWidth/; //取得img的x点
var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/; // img->Y var a=x-oEvent.clientX; //鼠标的间距离图片x间距
var b=y-oEvent.clientY; //鼠标离离图片Y间距 var dis=Math.sqrt(a*a+b*b); //三角形就长边算两点间距 var scale=-dis/disNum; //反数 大的小 小的变大 if(scale<0.5)
{
scale=0.5;
} aImg[i].style.width=scale*120+'px'; }
};
}

仿苹果导航菜单js问题的更多相关文章

  1. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  2. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  3. (转)jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

  4. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  6. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  7. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. MDNavBarView下拉导航菜单(仿美团导航下拉菜单)

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  9. CSS+JS相应式导航菜单

    响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...

随机推荐

  1. 递归将Map里的字段名由驼峰转为下划线

    导航 定位 概述 算法设计 递归技巧 代码实现 定位 本文适合于想要使用Java递归地将Map里的Key字段名从驼峰转为下划线,或者想了解如何处理任意递归的Map结构的筒鞋. 概述 在进行多语言混合编 ...

  2. python opencv 利用Lab空间把春天的场景改为秋天

    前一段时间实现了Reinhard颜色迁移算法,感觉挺有意思的,然后在代码上随意做了一些更改,有了一些发现,把Lab通道的a通道值改为127左右,可以将绿色改为黄色,而对其他颜色的改动非常小,因此可以将 ...

  3. C++模拟实现JDK中的ArrayList和LinkedList

    Java实现ArrayList和LinkedList的方式采用的是数组和链表.以下是用C++代码的模拟: 声明Collection接口: #ifndef COLLECTION_H_ #define C ...

  4. Hadoop集群datanode磁盘不均衡的解决方案

    一.引言: Hadoop的HDFS集群非常容易出现机器与机器之间磁盘利用率不平衡的情况,比如集群中添加新的数据节点,节点与节点之间磁盘大小不一样等等.当hdfs出现不平衡状况的时候,将引发很多问题,比 ...

  5. asp值mysql驱动

    http://www.sufeinet.com/thread-10278-1-1.html%20http://tool.sufeinet.com/CodePreview/CodeView.aspx?a ...

  6. MBP使用笔记

    1. 链接测试机命令: 登录:ssh ria@000.000.000.000 然后输入密码即可 退出:exit 2. SwitchySharp导入的是bak文件. 3. 使用goagentFQ的使用的 ...

  7. CSS2样式中选择器的介绍

    这里主要是对css2中的选择器进行了一下总结!

  8. 我的git与github学习历程

    因为想要知道如何把代码放到github上,所以就百度了一下,然后找到一个<如何从github上面拷贝源码>的文章,就先进行练习了下   1.首先到git官网下载git版本控制工具的安装包, ...

  9. [TCPIP] 分层 Note

    TCP/IP  分层 TCP/IP是一组不同层次上的多个协议的组合. 通常被分为:链路层.网络层.运输层.应用层 1. 链路层(数据链路层 或 网络接口层) 通常包括操作系统中的设备驱动程序和计算机中 ...

  10. Netsuite SuiteScript > Search Advance feature,搜索中使用 'OR' operation

    Sample in online help //Define search filter expression var filterExpression = [ [ 'trandate', 'onOr ...