大家有没有见过其他网站的图片只要鼠标放上去就能放大，移出去的时候就能缩小，而且一直保持居中显示！其实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. Node.js资料

    http://developer.51cto.com/art/201109/290443.htmhttp://www.nodebeginner.org/index-zh-cn.html node 各种 ...

  2. php删除服务器所有session踢掉所有在线用户linux

    注意:如果要删除服务器上所有session,重启php服务是解决不了问题的,php的session是持久化的. 有效解决办法: 删除 /tmp 下的所有文件(默认php的session文件是在/tmp ...

  3. springboot微信支付,支付二维码生成

    https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 微信扫码支付开发者文档,里面会有支付流程的教程 接口链接 URL地址:htt ...

  4. javaSE练习2——流程控制_2.2

    一.假设某员工今年的年薪是30000元,年薪的年增长率6%.编写一个Java应用程序计算该员工10年后的年薪,并统计未来10年(从今年算起)总收入. package com.test; public ...

  5. css透明边框实现

    代码:   css:      .box1{ background: black; padding:20px; } .box2{ background: #fff; border: 10px soli ...

  6. JavaScript常用字符串操作方法

    1.concat() concat() 方法用于连接两个或多个字符串,并返回连接后的字符串.stringObject.concat() 与 Array.concat() 很相似. var str1=& ...

  7. #include stdio.h(5)

    #include <stdio.h> int main() { //1.数组的排序-冒泡排序 /* 1.规则:相邻的两个数据进行比较 2.如果有N个数据,需要选择N-1次参照物来比较, 因 ...

  8. AngularJS 指令解析（一）

    AngularJS 指令解析(一) 前言 笔者AngularJS接触时间差不多是两年多,虽然这两年多AngularJS版本日新月异,但是笔者的版本是比较老的1.4.3,一方面是自己对这个版本比较熟悉, ...

  9. SVN中建立项目

    下午建个svn的时候,出错,有个东西配置错了,晚上google看到一篇文章,觉得作者写的不错,而且很用心,转来共享. [转至]5分钟快速建立项目版本控制 – Face Code,Brain bloom ...

  10. yii网站未来改进

    1.去掉debug模式 2.下载文件复选 3.文章发布.评论.赞.标签等系统