仿苹果导航菜单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 ...
随机推荐
- centos5安装salt-master
本篇文档主要解决2个问题: 1. centos5通过yum安装的master版本肯定低于centos6安装的minion,所以必须升级salt-master 2. zeromq版本太低会报这个错 20 ...
- js 自带的 map() 方法
1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 2. 例子 2.1 在字符串中使用map 在一个 String 上使用 map 方法获取字符串中 ...
- java 中MAP的按照进入顺序遍历与无序遍历
public static void main(String[] args) { Map<String,String> map=new HashMap<String,String&g ...
- JPG转TIFF
最近有个项目需要用到开源软件GeoServer,数据源是一张高分辨率的2.5维图片,格式是jpg的,由于GeoServer不支持jpg格式的发布,因此考虑到要进行格式转换,将其转换成tiff格式. 1 ...
- iOS常见面试题
一.为什么要在主线程中更新UI,这样做有什么好处? UIKit中的大部分类都不是“线程安全”的,为了解决这个线程不安全的问题,苹果推荐所有应用程序的UI操作都在主线程中执行,这样就不会出现多个线程同时 ...
- JavaScript继承
最佳的继承范式 寄生组合继承 我们来看一下它的实现方式: function Object(o){ var TempObject = function(){}; TempObject.prototype ...
- miniprofiler对方法的时间性能检测
miniprofiler对方法的时间性能检测 直接上代码 using StackExchange.Profiling; ... var profiler = MiniProfiler.Current; ...
- C#位运算讲解与示例
首先每一个权限数都是2的N次方数 如:k1=2 ; //添加 k2=4 ; //删除 k3=8; //修改 ... 如此定义功能权限数,当需要组合权限时,就需要对各个所拥有的权限数按位或了. 如: p ...
- About 滚存
滚存这个神奇的东西就比如DP现在这个状态是上一个状态转移过来的,但也只与上一个状态有关,所以就可以把原本的f[10000,10000]开成f[2,10000],就不会炸内存了.
- jsp发布:tomcat+花生壳
1.tomcat/conf/server.xml <Host name="localhost" appBase="webapps" unpackWARs= ...