仿苹果导航菜单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 ...
随机推荐
- 161228、Java IO流读写文件的几个注意点
平时写IO相关代码机会挺少的,但却都知道使用BufferedXXXX来读写效率高,没想到里面还有这么多陷阱,这两天突然被其中一个陷阱折腾一下:读一个文件,然后写到另外一个文件,前后两个文件居然不一样? ...
- mysql 数据库故障通过备份恢复模拟
- [已解决] C3p0连接配置
#用户名 c3p0.user=test c3p0.user=root # 用户密码--> c3p0.password=test c3p0.password=root c3p0.driverCla ...
- Kafka深度解析
本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅 ...
- C# 集合已修改;可能无法执行枚举操作
在winform 项目时遇到: 集合已修改;可能无法执行枚举操作的问题 错误原因:当用foreach遍历Collection时,如果对Collection有Add或者Remove或其他类似操作都会有这 ...
- asp.net 微信开发失效汇总
1.验证控件 在Iphone 5以上版本不兼容(改为js验证)
- 关于sql的关联排序
个人觉得对sql的玩转其实是sql中各种函数方法的理解的透彻. 原始数据表 要求查询的结果排序 其实刚看题目可能觉得要用group by但是再网下继续思考可能就没有思路了 但是如果你接触过over的试 ...
- Python基础之条件和循环
阅读目录 一.if语句 1.1功能 1.2语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if + else 1.2.4:多分支if + elif +else 1 ...
- My first python script for work
I write it yesterday to watch the NE process(rcpfd,cfgd) automatically, then i will write a window t ...
- C头文件
#include<cstdio>#include<iostream>#include<cstdlib>#include<cmath>#include&l ...