仿苹果导航菜单js问题
通过鼠标与不同图片的间距比对图片做相应的放大缩小。
<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问题的更多相关文章
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- (转)jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现当前导航菜单高亮显示
为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...
- Slideout.js – 触摸滑出式 Web App 导航菜单
Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MDNavBarView下拉导航菜单(仿美团导航下拉菜单)
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- CSS+JS相应式导航菜单
响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...
随机推荐
- 递归将Map里的字段名由驼峰转为下划线
导航 定位 概述 算法设计 递归技巧 代码实现 定位 本文适合于想要使用Java递归地将Map里的Key字段名从驼峰转为下划线,或者想了解如何处理任意递归的Map结构的筒鞋. 概述 在进行多语言混合编 ...
- ToJson
/// <summary> /// DataTable转成Json /// </summary> /// <param name="jsonName" ...
- input 的blur事件之后button的onclick事件不执行解决方案
最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...
- C# ASP.NET 读取EXCEL 单元格 读取 空值 不显示
跟大家分享一下,[摘自]:http://blog.csdn.net/li185416672/article/details/8213729 读取excel时,某些单元格为空值 原来如此: 当我们用ol ...
- 阿里云CentOS6.5搭建服务器JDK+tomcat+MySQL
阿里云ECS,计划安装jdk:MySQL:tomcat: 一.yum Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的S ...
- [Spark] Hello Spark
这里只使用Spark的Python操作和接口,其他语言应为不熟悉,所以先不写在这里. Spark 部署 可以直接从官方网站下载 pre-build 版本,可以直接在电脑上运行,离线安装也是可以的,比如 ...
- WebForm基础
客户端与网页端: C/S(客户端): 两种方式:winform WPF 数据是存在其它的电脑上或服务器上 运行时需要从服务器上下载相应的数据 数据加工的过程是在用户电脑上执行 好处是数据请求速度比较快 ...
- SQL中常用模糊查询的四种匹配模式&&正则表达式
执行数据库查询时,有完整查询和模糊查询之分.一般模糊语句如下:SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式:1.%:表示任意0个或多个字 ...
- in_array,array_search的使用
写一个数组里面有小写a-z 大写A-Z 以及数字,把相似的数字和字母都剔除 无论大小写:将括号内的数字剔除(0,o,2,Z,1,i) $arr1 = range("a", ...
- SQL出错
2016-12-26 15:43:02,870 DEBUG [org.springframework.test.context.support.DirtiesContextTestExecutionL ...