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

一、总体思路

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

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

首先，将图片放大

然后将图片向左上方移动

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

二、细节处理

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

这里有个公式

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

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

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

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

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

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

实例讲解如何利用jQuery设置图片居中放大或者缩小的更多相关文章

  1. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  2. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  3. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  4. C#和Halcon交互实现图片的放大和缩小

    [转载] C#和halcon实现图片的放大和缩小 e.Delta>0表示鼠标向上滚动,e.Delta<0表示向下滚动 要拖动的图像为Measure.currentImageL,可以更换. ...

  5. Android------实现图片双击放大，缩小，左右滑动的多种方式

    项目中常常有图片浏览功能.像微信朋友圈图片浏览,QQ空间照片浏览 的功能. 实现图片双击放大,缩小,左右滑动等效果. 来看看我的效果图,希望能满足你的要求   前三个button按钮是参考网上的多种实 ...

  6. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  7. 关于HTML+CSS设置图片居中的方法

    有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小 ...

  8. layui利用jQuery设置下拉列表的值

    今天在利用jQuery动态设置下拉列表的值的时候确怎么也赋值不上去,其中用到了layui框架,源代码如下: $.post(contextPath+'/courseLibrary/getCourseBa ...

  9. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

随机推荐

  1. 显示器分辨率不同，部分winform控件在其他机器上显示不全

    在开发机器上效果如下: 而到其他电脑上效果如下: 解决办法: 将窗体的AutoScaleMode属性设置为None,尝试一下,应该可以了. 关于AutoScaleMode的属性,可以参考 http:/ ...

  2. Eureka与ZooKeeper 的比较

    Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选举leader的过程:客户端请求会自动切换到新的Eureka节点:当宕机的服务器重新恢复 ...

  3. python的数字

    1.整数 与其它语言不同点两个乘号(**)代表 乘方运算 .前面代表底数,后面代表指数. 2.浮点数 它的小数位数可能是不确定的,需要注意 3.使用str()避免错误 在输出字符串时,可以避免类型错误 ...

  4. maven课程 项目管理利器-maven 3-2 maven自动建立目录骨架

    使用cmd创建maven目录的两种方式: 使用archetype插件 1 按照提示进行选择  步骤: a 进入指定目录 b mvn archetype:generate --创建项目目录 c ente ...

  5. switch 和 if...else if 的区别

     为什么很多人用  if...else..if   而不使用   switch 1,if...else...if 只是单纯地一个接一个比较:if...else可能每个条件都计算一遍: 2,switch ...

  6. Android环信即时通讯集成坑爹 注册报错208解决

    第一种情况:    你用的环信APPkey 是授权模式的   只要改成开放模式就可以了 第二种情况:    上述情况在环信官网都有说明  但是这种情况  环信官网就没得说明   只说的是同步方法 注册 ...

  7. Android修改AlertDialog宽和高以及设置AlertDialog的背景

    不知道你们试过了吗,AlertDialog在我们给他设置我们自己的布局的时候他的宽度不论我们怎么设置他都是不变的,要想改变宽和高我们可以动态的去修改他的宽度好高度 直接上代码 // 1. 布局文件转换 ...

  8. $("#Upfile").MultiFile();

    Jquery的multifile 1.多文件上传: 2.如上几个验证不重复,和限制上传数量的验证显示的是英文,改成中文文本时,如果不用国标解码,到时候提示框会出现乱码现象.所以一般需要中文显示的时候, ...

  9. JavaScript 常用的Math对象

    Math.ceil(x); //返回x向上取整后的整数值. Math.floor(x); //返回x向下取整后的整数值.. Math.round(x); //返回四舍五入后的整数. Math.abs( ...

  10. failed: No module named 'catkin_pkg' Make sure that you have installed "catkin_pkg"

    https://stackoverflow.com/questions/43024337/why-this-error-when-i-try-to-create-workspaces-in-ros# ...