<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）...