<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>
相关推荐
在JavaScript的世界里,实现动态和交互性的用户界面是开发者们常用的一种技巧,而"js实现仿苹果dock栏导航特效.zip"就是一个很好的实例,它利用jQuery库来创建类似于苹果操作系统Dock栏的导航效果。这个特效主要关注...
【jQuery实现苹果Dock桌面效果详解】 在Web开发中,创建具有动态交互性的用户界面是提升用户体验的关键。苹果Dock桌面效果就是一个很好的例子,它通过模仿Mac OS X操作系统中的Dock栏,展示了图标随鼠标移动而浮动...
在JavaScript和jQuery的世界里,创建一个仿苹果Dock栏导航特效是一项常见的挑战,它涉及到动态效果、CSS样式以及事件处理。这个特效的主要目的是模仿苹果操作系统中Dock栏的行为,当鼠标悬停在图标上时,图标会突出...
在实现Dock效果时,可以使用这个方法来改变图标大小、位置或透明度,模拟图标弹出或缩回的动作。 5. **动态响应**:为了让菜单更具吸引力,我们可以添加一些额外的动画,如图标的位置调整,当鼠标靠近时,图标可以...
这款名为“仿苹果Dock栏导航特效”的源码是一款利用JavaScript技术构建的网页模板,旨在为用户提供类似苹果操作系统底部Dock栏的交互体验。在苹果的操作系统中,Dock栏是用户最常接触的部分,它包含了常用的应用图标...
根据鼠标与图标中心的水平距离,使用数学公式调整图标的大小,模拟苹果Dock栏中图标随鼠标靠近而放大的效果。当鼠标移出Dock栏的垂直范围时,所有图标恢复原尺寸。 相比于之前的版本,此稳定版主要改进在于JS代码,...
在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一个模拟苹果桌面系统的网页界面。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。而CSS3则是现代网页设计的核心,提供了...
- **JQuery模仿苹果桌面的Dock效果**:这部分描述了文档的主题,即使用JQuery技术库来模拟苹果操作系统中Dock栏的交互效果。 - **初级版**:这表明本文所实现的效果仅为基础版本,存在一些尚未解决的问题和bug,如...
【标题】"仿MAC桌面Dock工具栏菜单代码.zip" 是一个专门为网页设计的软件工具,其目的是在网页环境中模拟苹果MAC操作系统中的Dock栏效果。Dock栏是MAC操作系统中一个重要的功能,它允许用户快速访问常用的应用程序、...
在这里,可能使用了CSS来实现类似的效果,使得菜单能够像苹果Dock一样在页面上固定,或者根据用户滚动而自动隐藏和显示。 `js`文件夹则包含了JavaScript代码,特别是jQuery库和可能的自定义脚本。jQuery是...
接着,JavaScript(JS)是实现动态效果的关键。在这个项目中,JS主要负责导航条的交互逻辑。例如,当用户鼠标悬停在某个菜单项上时,该菜单项可能会有放大、下沉或改变颜色等动画效果。这可以通过监听DOM元素的事件...
在本项目中,“jquery制作仿iphone苹果手机界面触屏切换效果.rar”是一个使用jQuery库创建的Web应用程序,它旨在模拟iPhone或苹果手机的用户界面,尤其是触屏滑动切换的效果。这个项目对于开发者来说,是一个很好的...
这个"苹果桌面底部菜单模拟.zip"文件显然提供了一个前端实现,旨在模仿苹果Dock栏的效果,允许用户在非苹果系统上体验类似的交互功能。在前端开发中,这种效果通常用于增强用户界面的美观性和用户体验。 首先,我们...
2. **边框和背景**: 应用圆角边框、阴影效果和渐变背景,模拟苹果设备的外观。 3. **动画**: 利用`@keyframes`规则创建平滑过渡和动画效果,增强用户体验。 4. **Flexbox**: 使用Flexbox布局模型,实现灵活的容器内...
**JS与CSS在实现Dock效果中的角色** 1. **JavaScript(JS)**:主要负责动态效果的实现,如鼠标悬停时应用图标的放大、缩小动画,以及点击时图标的行为。JS可以监听用户的鼠标事件,根据这些事件改变DOM元素的属性...
《jQueryiMac:模拟苹果桌面的网页实现》 在当今的网页设计领域,用户体验成为了衡量一个网站质量的重要标准。为了提供更加生动、直观且互动性强的界面,开发者们常常会利用JavaScript库,如jQuery,来实现各种创新...
【防苹果Mac后台模板HTML】是一种专为模拟苹果Mac操作系统后台界面设计的网页模板,它主要基于HTML和jQuery技术构建,旨在为用户提供一种与Mac OS相似的视觉体验和交互效果。这种模板通常包括一系列精心设计的组件、...
"极酷极眩的CSS+JS实现苹果机(MAC)OS系统导航条"是一个旨在模仿苹果Mac OS系统的导航条设计的项目,它通过结合CSS和JavaScript技术,为网页带来与Mac操作系统相似的交互效果。 首先,CSS(Cascading Style Sheets)...