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

叁歲伎倆 2022-08-06 12:13 167阅读 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 条评论，167人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关从中心放大

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

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

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

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

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

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

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

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

相关 idea鼠标控制放大缩小

File -> Setting -> Editor -> General![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

电玩女神/ 2022年03月24日 17:58/ 0 赞/ 447 阅读

相关图片中心放大原理

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

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

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 491 阅读

相关图片居中放大

> 图片居中放大 1.外层一个固定宽高的div,背景图片，相对定位position：relative; 2.div里面包含一个img标签，初始宽高为0px；绝对定位

阳光穿透心脏的1/2处/ 2021年09月10日 08:12/ 0 赞/ 455 阅读