实例讲解如何利用jQuery设置图片居中放大或者缩小

大家有没有见过其他网站的图片只要鼠标放上去就能放大，移出去的时候就能缩小，而且一直保持居中显示！其实jQuery提供一个animate函数可以使图片放大和缩小，只要改变图片的长和高就OK啦！但是animate函数不能使图片居中放大或者缩小，这样看着也不美观！那么现在就跟大家说说我对利用jQuery将图片居中放大或者缩小的思路！下面就拿放大来举例！

    

 

    一、总体思路

    其实要想做到图片居中放大只需要设置图片两个部分就行啦！首先就是将图片长和高按照一定比例增加，这样就可以放大，然后在图片放大的同时将图片往左方和上方移动到一定位置就能保持居中啦！因为正常图片是往右方增长，往下方增高的，所以居中只要在图片增加一定长度就将图片往左方移动一定距离，在图片增加一定高度就将图片往上方移动一定距离就行啦！

    可能上面说的有点复杂，我特地做了个小动画以便大家理解！

    首先，将图片放大

    

 

    然后将图片向左上方移动

    

 

    这样图片最后的位置就是居中的，只要你将图片在放大的同时也保持向左上方移动，那么图片放大的过程就是一直保持居中的！

 

    二、细节处理

    上面只是说了一个大体的思路，其实还有很多细节需要我们去处理！这里我只说如何按照图片增加的长度而得出图片向左或者向上移动的距离！现在我们假设图片的长度增加了20px，那么图片向右延伸了20px,我们如果想要保持图片居中，很简单只要让图片在向左移动10px，最后结果就是图片分别向左右延伸了10px，这样图片依然是居中的！那么高度增加同理！

    

    这里有个公式

 

    向左移动距离 = 图片增加长度/2

    向上移动距离 = 图片增加高度/2

    当然要想得到图片动态放大的效果，可以用setInterval()函数，让长、高、距离一点一点的增加和移动！具体代码大家可以看看利用jQuery设置鼠标滑过图片居中放大和缩小

想要每天及时获取王业楼的个人博客更新的内容吗？赶快添加微信公众号“ly89cn”，或者扫描下方的二维码吧！

 

本文来源于王业楼的个人博客，本文地址：http://www.ly89.cn/detailB/63.html

欢迎分享本文，转载请注明本文出处和地址