最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

仿苹果菜单的图片放大特效实现

IT圈 admin 4浏览 0评论

仿苹果菜单的图片放大特效实现

我想用过mac的人都应该见过它的菜单特效,就是鼠标移到适当的位置的时候,菜单图片会有一个放大的效果,今天我就模仿这个效果来做一个有关图片的特效,最终的实现效果如下:

它的HTML结构如下:

<div class="wrap"><img src="./images/aa.png"/><img src="./images/bb.png"/><img src="./images/cc.png"/><img src="./images/dd.png"/><img src="./images/ee.png"/>
</div>

它的样式也是非常简单的:

* {margin: 0;padding: 0;
}.wrap {position: absolute;bottom: 0;width: 100%;text-align: center; /* width设置了以后, text-align: center属性才会生效 */height: auto;
}.wrap img {width: 64px;
}

它的JS代码如下:

var imgArr = document.getElementsByTagName('img');
var wrapDiv = document.querySelector('.wrap');document.onmousemove = function () {/* 获取鼠标的坐标START */var e = event || window.event;var x = e.clientX;var y = e.clientY;/* 获取鼠标的坐标END */for (var i = 0; i < imgArr.length; i++) {var imgX = imgArr[i].offsetLeft + imgArr[i].offsetWidth / 2;/** 因为div.wrap元素绝对定位了, 所以imgArr[i].offsetTop的值为0,* 因此还需要加上div.wrap元素的offsetTop值。*/var imgY = imgArr[i].offsetTop + imgArr[i].offsetHeight / 2 + wrapDiv.offsetTop;var a = x - imgX;var b = y - imgY;// 鼠标与图片中心点的距离(勾股定理)var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));var proportion = 1 - c / 300; // 图片放大的比例if (proportion < 0.5) {proportion = 0.5;}imgArr[i].style.width = proportion * 128 + 'px';}
}

其中的300是比例系数,是我根据实际情况定义的,到时候大家也可以根据自己的具体需求来改变这个值。

仿苹果菜单的图片放大特效实现

我想用过mac的人都应该见过它的菜单特效,就是鼠标移到适当的位置的时候,菜单图片会有一个放大的效果,今天我就模仿这个效果来做一个有关图片的特效,最终的实现效果如下:

它的HTML结构如下:

<div class="wrap"><img src="./images/aa.png"/><img src="./images/bb.png"/><img src="./images/cc.png"/><img src="./images/dd.png"/><img src="./images/ee.png"/>
</div>

它的样式也是非常简单的:

* {margin: 0;padding: 0;
}.wrap {position: absolute;bottom: 0;width: 100%;text-align: center; /* width设置了以后, text-align: center属性才会生效 */height: auto;
}.wrap img {width: 64px;
}

它的JS代码如下:

var imgArr = document.getElementsByTagName('img');
var wrapDiv = document.querySelector('.wrap');document.onmousemove = function () {/* 获取鼠标的坐标START */var e = event || window.event;var x = e.clientX;var y = e.clientY;/* 获取鼠标的坐标END */for (var i = 0; i < imgArr.length; i++) {var imgX = imgArr[i].offsetLeft + imgArr[i].offsetWidth / 2;/** 因为div.wrap元素绝对定位了, 所以imgArr[i].offsetTop的值为0,* 因此还需要加上div.wrap元素的offsetTop值。*/var imgY = imgArr[i].offsetTop + imgArr[i].offsetHeight / 2 + wrapDiv.offsetTop;var a = x - imgX;var b = y - imgY;// 鼠标与图片中心点的距离(勾股定理)var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));var proportion = 1 - c / 300; // 图片放大的比例if (proportion < 0.5) {proportion = 0.5;}imgArr[i].style.width = proportion * 128 + 'px';}
}

其中的300是比例系数,是我根据实际情况定义的,到时候大家也可以根据自己的具体需求来改变这个值。

发布评论

评论列表 (0)

  1. 暂无评论