实例讲解如何利用jQuery设置图片居中放大或者缩小
来源:互联网 发布:木工柜门半盖怎么算法 编辑:程序博客网 时间:2024/05/18 11:48
大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是animate函数不能使图片居中放大或者缩小,这样看着也不美观!那么现在就跟大家说说我对利用jQuery将图片居中放大或者缩小的思路!下面就拿放大来举例!
一、总体思路
其实要想做到图片居中放大只需要设置图片两个部分就行啦!首先就是将图片长和高按照一定比例增加,这样就可以放大,然后在图片放大的同时将图片往左方和上方移动到一定位置就能保持居中啦!因为正常图片是往右方增长,往下方增高的,所以居中只要在图片增加一定长度就将图片往左方移动一定距离,在图片增加一定高度就将图片往上方移动一定距离就行啦!
可能上面说的有点复杂,我特地做了个小动画以便大家理解!
首先,将图片放大
然后将图片向左上方移动
这样图片最后的位置就是居中的,只要你将图片在放大的同时也保持向左上方移动,那么图片放大的过程就是一直保持居中的!
二、细节处理
上面只是说了一个大体的思路,其实还有很多细节需要我们去处理!这里我只说如何按照图片增加的长度而得出图片向左或者向上移动的距离!现在我们假设图片的长度增加了20px,那么图片向右延伸了20px,我们如果想要保持图片居中,很简单只要让图片在向左移动10px,最后结果就是图片分别向左右延伸了10px,这样图片依然是居中的!那么高度增加同理!
这里有个公式
向左移动距离 = 图片增加长度/2
向上移动距离 = 图片增加高度/2
当然要想得到图片动态放大的效果,可以用setInterval()函数,让长、高、距离一点一点的增加和移动!具体代码大家可以看看利用jQuery设置鼠标滑过图片居中放大和缩小
想要每天及时获取王业楼的个人博客更新的内容吗?赶快添加微信公众号“ly89cn”,或者扫描下方的二维码吧!
本文来源于王业楼的个人博客,本文地址:http://www.ly89.cn/detailB/65.html
欢迎分享本文,转载请注明本文出处和地址
- 实例讲解如何利用jQuery设置图片居中放大或者缩小
- [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中
- jquery实现图片放大,缩小,翻转,旋转小实例
- jquery实现图片放大,缩小,翻转,旋转小实例
- jQuery实现图片放大,缩小,翻转,旋转小实例
- android 如何利用手势放大和缩小一个图片?
- android ImageView-----图片放大或者缩小
- 对系统图片进行放大或者缩小
- 利用VML矢量化图片放大缩小
- jquery简单的图片放大缩小地址
- jquery点击图片进行放大缩小
- Jquery鼠标滚轮放大缩小图片
- jquery实现图片缩小放大的切换
- 前端jquery实现图片点击放大缩小
- jquery点击图片放大与缩小
- 图片缩小放大脚本
- 图片放大缩小代码
- flex图片放大缩小
- Android 多线程处理之多线程用法大集合
- C# Eval
- Cocos2D:塔防游戏制作之旅(十一)
- Google Java编程风格指南
- 黑马程序员——网络编程(二)
- 实例讲解如何利用jQuery设置图片居中放大或者缩小
- 凸优化--强弱对偶性的几何解释
- [leetcode 249] Group Shifted Strings
- java集合框架集合框架是为表示和操作集合而规定的一种统一的标准的体系结构。任何集合框架都包含三大块内容:对外的接口、接口的实现和对集合运算的算法。
- Evaluate Video Quality
- 拷贝项目文件夹中的文件存放到本地
- ViewPager实现多页面滑动
- Java项目在jsp页面中引入jquery框架的步骤
- easyui datebox 默认当天日期