鼠标经过，图片会放大（从中心位置放大）

叁歲伎倆 2022-08-06 12:13 227阅读 0赞

js部分：

//鼠标经过a标签，对应的图片会放大效果

var zoom = 1.03;  
        var width = $(this).find(".move\_img").find("img").width();  
        var height = $(this).find(".move\_img").find("img").height();  
        var z\_width = width \* zoom;  
        var z\_height = height \* zoom;  
        $(".big\_kuai a").hover(function () \{  
            $(this).find(".move\_img").find("img").animate(\{  
                width: z\_width,  
                height: z\_height,  
                marginTop: "-9px",  
                marginLeft: "-9px"  
            \}, 1000);  
        \}, function () \{  
            $(this).find(".move\_img").find("img").animate(\{  
                width: width,  
                height: height,  
                marginTop: "0px",  
                marginLeft: "0px"  
            \}, 1000);

\});

思想如上，css和html可以自己写。

效果如下图：

未经过时：

![20150122190034722][]

经过之后：![20150122190110383][]

[20150122190034722]: /images/20220806/290a19a463874b9a826c19f5639a7cda.png
[20150122190110383]: /images/20220806/5967704d7bd149b5bd421cb9d06933e7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关查看商品图片，鼠标悬浮图片放大js实现

2010-06-07 10:18:46| 分类： [Javascript][]|字号订阅 <%@page language="java" import="java.util.

淩亂°似流年/ 2024年02月19日 21:05/ 0 赞/ 20 阅读

相关 CSS鼠标悬浮图片放大效果

当鼠标移入图片时，图片变大。父容器宽高不变。效果：鼠标移入前： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

客官°小女子只卖身不卖艺/ 2023年10月06日 13:31/ 0 赞/ 23 阅读

相关鼠标悬停放大图片特效

鼠标悬停放大图片 ![在这里插入图片描述][format_png_pic_center] 鼠标悬停放大图片是个比较吸引人的特效。废话我就不多说了，直接上结局办法。

不念不忘少年蓝@/ 2023年05月21日 07:07/ 0 赞/ 28 阅读

相关 js鼠标滚轮放大缩小图片

[下载地址][Link 1]JavaScript通过转动鼠标滚轮放大缩小图片 ![1631561166.png][] dd: [Link 1]: https://yy1

蔚落/ 2022年09月12日 01:43/ 0 赞/ 297 阅读

相关鼠标经过，图片会放大（从中心位置放大）

js部分： //鼠标经过a标签，对应的图片会放大效果 var zoom = 1.03; var width = $(thi

叁歲伎倆/ 2022年08月06日 12:13/ 0 赞/ 228 阅读

相关 css3鼠标经过，图片放大效果

css代码 /图片划过改变图片大小效果/ .list ul li { width: 228px; height: 270px; overflow: hidde

旧城等待，/ 2022年07月14日 15:29/ 0 赞/ 371 阅读

相关从中心放大

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

矫情吗；*/ 2022年07月14日 11:20/ 0 赞/ 215 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 329 阅读

相关鼠标放上去图片放大css

<style type="text/css"> \div1\{ width: 200px; height: 138p

比眉伴天荒/ 2022年05月22日 02:35/ 0 赞/ 297 阅读

相关图片中心放大原理

九宫格图片布局也是一些常见的布局，点击图片的时候图片会放大原来的倍数。图片放大主要的两点就是： \\1.\\将css的float定位，转换成用js的绝对定位 \\

本是古典何须时尚/ 2022年03月20日 07:47/ 0 赞/ 284 阅读