`
qianruoluo
  • 浏览: 860 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

js模拟苹果dock效果

 
阅读更多
<html>
<head>
<meta charset="utf-8">
<style>
* {margin:0; padding:0;}
#div1 {position:absolute; bottom:0; width:100%; text-align:center;}
input {font-size:20px; width:160px;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var aTxt=document.getElementsByTagName('input');
	var aImg=document.getElementsByTagName('img');
	
	document.onmousemove=function (ev)
	{
		var oEvent=ev||event;
		
		for(var i=0;i<aImg.length;i++)
		{
			var l=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
			var t=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2;
			
			
			var a=l-oEvent.clientX;
			var b=t-oEvent.clientY;
			
			//pow
			var dis=Math.sqrt(a*a+b*b);
			
			var scale=1-dis/300;//300可以设置感应区的大小,scale是放大系数,距离和放大宽度成反比
			
			if(scale<0.5)
			{
				scale=0.5;
			}
			
			aImg[i].width=128*scale;
			
			aTxt[i].value=scale.toFixed(2);
		}
	};
};
</script>
</head>

<body>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<div id="div1">
    <img src="img/1.png" width="64" />
    <img src="img/2.png" width="64" />
    <img src="img/3.png" width="64" />
    <img src="img/4.png" width="64" />
    <img src="img/5.png" width="64" />
</div>
</body>
</html>

 

分享到:
评论

相关推荐

    js实现仿苹果dock栏导航特效.zip

    在JavaScript的世界里,实现动态和交互性的用户界面是开发者们常用的一种技巧,而"js实现仿苹果dock栏导航特效.zip"就是一个很好的实例,它利用jQuery库来创建类似于苹果操作系统Dock栏的导航效果。这个特效主要关注...

    基于JQuery实现的苹果Dock桌面效果

    【jQuery实现苹果Dock桌面效果详解】 在Web开发中,创建具有动态交互性的用户界面是提升用户体验的关键。苹果Dock桌面效果就是一个很好的例子,它通过模仿Mac OS X操作系统中的Dock栏,展示了图标随鼠标移动而浮动...

    js实现仿苹果dock栏导航特效特效代码

    在JavaScript和jQuery的世界里,创建一个仿苹果Dock栏导航特效是一项常见的挑战,它涉及到动态效果、CSS样式以及事件处理。这个特效的主要目的是模仿苹果操作系统中Dock栏的行为,当鼠标悬停在图标上时,图标会突出...

    jQuery实现苹果Dock样式的菜单

    在实现Dock效果时,可以使用这个方法来改变图标大小、位置或透明度,模拟图标弹出或缩回的动作。 5. **动态响应**:为了让菜单更具吸引力,我们可以添加一些额外的动画,如图标的位置调整,当鼠标靠近时,图标可以...

    一款基于js实现的仿苹果dock栏导航特效源码.zip

    这款名为“仿苹果Dock栏导航特效”的源码是一款利用JavaScript技术构建的网页模板,旨在为用户提供类似苹果操作系统底部Dock栏的交互体验。在苹果的操作系统中,Dock栏是用户最常接触的部分,它包含了常用的应用图标...

    基于JQuery的模拟苹果桌面Dock效果(稳定版)

    根据鼠标与图标中心的水平距离,使用数学公式调整图标的大小,模拟苹果Dock栏中图标随鼠标靠近而放大的效果。当鼠标移出Dock栏的垂直范围时,所有图标恢复原尺寸。 相比于之前的版本,此稳定版主要改进在于JS代码,...

    jQuery+CSS3模拟苹果桌面系统

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一个模拟苹果桌面系统的网页界面。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。而CSS3则是现代网页设计的核心,提供了...

    基于JQuery模仿苹果桌面的Dock效果(初级版)

    - **JQuery模仿苹果桌面的Dock效果**:这部分描述了文档的主题,即使用JQuery技术库来模拟苹果操作系统中Dock栏的交互效果。 - **初级版**:这表明本文所实现的效果仅为基础版本,存在一些尚未解决的问题和bug,如...

    仿MAC桌面Dock工具栏菜单代码.zip

    【标题】"仿MAC桌面Dock工具栏菜单代码.zip" 是一个专门为网页设计的软件工具,其目的是在网页环境中模拟苹果MAC操作系统中的Dock栏效果。Dock栏是MAC操作系统中一个重要的功能,它允许用户快速访问常用的应用程序、...

    模拟苹果机jquery导航菜单94

    在这里,可能使用了CSS来实现类似的效果,使得菜单能够像苹果Dock一样在页面上固定,或者根据用户滚动而自动隐藏和显示。 `js`文件夹则包含了JavaScript代码,特别是jQuery库和可能的自定义脚本。jQuery是...

    CSS+JS实现苹果机(MAC)OS系统导航条(眩目+逼真

    接着,JavaScript(JS)是实现动态效果的关键。在这个项目中,JS主要负责导航条的交互逻辑。例如,当用户鼠标悬停在某个菜单项上时,该菜单项可能会有放大、下沉或改变颜色等动画效果。这可以通过监听DOM元素的事件...

    jquery制作仿iphone苹果手机界面触屏切换效果.rar

    在本项目中,“jquery制作仿iphone苹果手机界面触屏切换效果.rar”是一个使用jQuery库创建的Web应用程序,它旨在模拟iPhone或苹果手机的用户界面,尤其是触屏滑动切换的效果。这个项目对于开发者来说,是一个很好的...

    苹果桌面底部菜单模拟.zip

    这个"苹果桌面底部菜单模拟.zip"文件显然提供了一个前端实现,旨在模仿苹果Dock栏的效果,允许用户在非苹果系统上体验类似的交互功能。在前端开发中,这种效果通常用于增强用户界面的美观性和用户体验。 首先,我们...

    CSS3+jQuery 模拟苹果系统

    2. **边框和背景**: 应用圆角边框、阴影效果和渐变背景,模拟苹果设备的外观。 3. **动画**: 利用`@keyframes`规则创建平滑过渡和动画效果,增强用户体验。 4. **Flexbox**: 使用Flexbox布局模型,实现灵活的容器内...

    js_css_模仿_mac_Dock

    **JS与CSS在实现Dock效果中的角色** 1. **JavaScript(JS)**:主要负责动态效果的实现,如鼠标悬停时应用图标的放大、缩小动画,以及点击时图标的行为。JS可以监听用户的鼠标事件,根据这些事件改变DOM元素的属性...

    jQueryiMac模仿苹果桌面的网页版

    《jQueryiMac:模拟苹果桌面的网页实现》 在当今的网页设计领域,用户体验成为了衡量一个网站质量的重要标准。为了提供更加生动、直观且互动性强的界面,开发者们常常会利用JavaScript库,如jQuery,来实现各种创新...

    防苹果mac后台模板html

    【防苹果Mac后台模板HTML】是一种专为模拟苹果Mac操作系统后台界面设计的网页模板,它主要基于HTML和jQuery技术构建,旨在为用户提供一种与Mac OS相似的视觉体验和交互效果。这种模板通常包括一系列精心设计的组件、...

    极酷极眩的CSS+JS实现苹果机(MAC)OS系统导航条

    "极酷极眩的CSS+JS实现苹果机(MAC)OS系统导航条"是一个旨在模仿苹果Mac OS系统的导航条设计的项目,它通过结合CSS和JavaScript技术,为网页带来与Mac操作系统相似的交互效果。 首先,CSS(Cascading Style Sheets)...

Global site tag (gtag.js) - Google Analytics