jQuery实现鼠标滑过图片放大效果

最新推荐文章于 2024-07-24 14:22:29 发布
最新推荐文章于 2024-07-24 14:22:29 发布
阅读量1w 收藏 32
点赞数 5
分类专栏： jQuery 学习日志 文章标签： jquery html 图片 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sandy975/article/details/73658470
版权

首先，我们来看最简单的效果，就是当鼠标滑过时，图片在网页空白区域出现放大效果。具体如下图所示：
这里写图片描述
HTML代码如下：

<ul>
        <li><img src="images\Japan01.jpg" width="300px" height="200px" class="Japan" title="日本风景图"></li>
        <li><img src="images\Japan02.jpg" width="300px" height="200px" class="Japan" title="日本风景图"></li>
        <li><img src="images\Japan03.jpg" width="300px" height="200px" class="Japan" title="日本风景图"></li>
        <li><img src="images\Japan04.jpg" width="300px" height="200px" class="Japan" title="日本风景图"></li>
        <li><img src="images\Japan05.jpg" width="300px" height="200px" class="Japan" title="日本风景图"></li>
    </ul>

然后设置CSS样式：

    li{
        list-style-type: none;
        float: left;
    }
    img{
        border: 1px solid #000;
        margin-right: 20px;
        margin-top: 20px;
    }

要想实现鼠标滑过图片出现放大效果，就要给图片添加mouseover和mouseout事件。具体的思路是：

①当鼠标滑到图片时，创建一个<div>元素，内容为该图片的放大版，然后赋值给一个变量，再使用append() 方法将该元素添加给<body>

②当鼠标滑出图片时，移除<div> 元素
具体的jQuery代码如下：

   $(function(){
        $("img.Japan").mouseover(function(e){
            var landscape="<div id='landscape'><img src='"+this.src+"' alt='风景预览图' width='400px' height='300px'/></div>";
            $("body").append(landscape);
        }).mouseout(function(){
                $("#landscape").remove();
            })
    })
                  欢迎各类指正和改进代码
一只特立独行的pig
关注
  • 5
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jquery图片放大插件鼠标悬停图片放大效果
weixin_45675581的博客
10-06 1352
都知道jquery都插件是非常强大的，最近分享点jquery插件效果，方便效果开发使用。 一、HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht...
jquery实现鼠标滑过图片向上放大显示效果
05-11
摘要:脚本资源,Ajax/JavaScript,缩略图放大,鼠标悬停 jquery实现鼠标滑过图片向上放大显示效果，里面用有CSS3的部分属性，因此为了最佳效果，测试时候请使用火狐或Chrome浏览器。左右两边的圆形按钮可控制缩略图左右滚动，然后可以把鼠标放在任意的缩略图上，可看到缩略图向上放大显示，以响应鼠标的动作。 运行环境：HTML/PHP/ASP/
jQuery 鼠标放图片上，图片慢慢变大的悬停效果
08-09
同样是由jQuery插件实现的一款鼠标悬停放大图片的特效，用在网页上会提升操作体验，可结合图片滚动来使用，鼠标放在图片上的时候，图片放大突出显示，很不错的效果。
如何使用CSS和JS实现鼠标移动到图片上的时候实现图片的放大和缩小效果。
emmmaha的博客
05-23 597
替换为您实际的图片路径，以及根据需要调整放大倍数和过渡效果的时间。这样，当鼠标移动到图片上方时，图片就会放大显示。您可以使用CSS和JavaScript结合实现当鼠标移动到图片上方时，让图片放大的效果。的样式，确保图片放大后不会溢出容器。然后对图片设置了过渡效果。将图片放大1.2倍（实现缩小可将数值定在(0,1)内）。在上面的示例中，我们首先创建了一个包含图片的。，当鼠标悬停在容器上时（即。
jQuery学习(一)：鼠标移动显示大图
dia83499的博客
08-21 239
鼠标移动，显示大图，在不少网站上都有这种需要，特别是Zol、360buy、Taobao等。平时显示缩略图，在用户需要查看细节的时候，才显示与此图形匹配的大图。使用jQuery实现非常方便。即先显示小图片，当用户鼠标在小图片上移动时，再根据进入、移除或在图片上移动，而添加不同的处理事件，分别显示、删除或移动大图片，其大致代码如下： 1.定义所用到的样式 1: ...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
热门推荐
李海江的博客
12-14 4万+
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
JS特效第117弹：jQuery图片放大镜插件鼠标悬停图片缩放代码
weixin_38343072的博客
01-30 911
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
jquery实现小图片放大效果
Amouzy的博客
05-20 1452
大致效果如下： js部分： 首要是自己先引入jquery.js文件，可自行去官网找 <script src="jquery.js"></script> <script> $(window).on('load', function () { //1、当鼠标放至小图，出现黄色遮罩和右侧的大图 $('.imgbox').on('mouseover', function (e) { $('.scale').css('display','blo
鼠标经过放大图片 php,jQuery当鼠标悬停时放大图片的效果实例_jquery
weixin_39992483的博客
03-29 194
这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：HTML结构部分：先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。CSS样式表部分：bigimage是用jQuery创建的一个p标签的id，用来...
jquery预览图片 鼠标滚动放大缩小 拖拽
weixin_58414196的博客
02-24 1748
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-2.1.2.min.js"></script> <style> </style> </head> <body> ...
基于jquery实现鼠标滑过图片动态放大效果.zip
11-21
本教程将探讨如何使用JavaScript库jQuery来实现一个常见的交互效果——当鼠标滑过图片时，图片动态放大。这种效果可以增加用户的视觉吸引力，使网站看起来更加专业和现代。 首先，我们需要了解jQuery。jQuery是一个...
jQuery实现鼠标经过图片放大特效特效代码
03-20
本项目涉及的知识点是使用jQuery实现一种常见的交互效果：当鼠标悬停在图片上时，图片会放大显示，为用户提供更清晰的查看细节的能力。这种效果常见于产品展示或图像画廊等场景。 首先，我们需要理解jQuery的基本...
jQuery实现鼠标经过图片预览大图效果
01-21
这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的：当鼠标经过了图片数，图片会放大进行预览大图。接下来我就粘贴主要代码了哈：首先是$(function(){})中的代码 代码如下: var x = 5; v
Jquery实现鼠标移动，放大图片的功能
sheep921223的专栏
03-20 1656
做毕业设计，老师看完小样后，嫌弃我购物车里商品图片太大，不美观，让美化个效果。上网查查代码，修改了一个简单版的。    使用的是jquery， 未使用JavaScript获取鼠标状态，这主要和JavaScript需在标签本身内含写出所调用到的动作，太麻烦了，一会就把自己搞糊涂了，使用jquery技术直接根据标签的id，class等等，就可以辨识出来触发条件，直接作出回应(百度百科上说这是jq
鼠标经过——图片放大效果
h_jQuery的博客
05-28 1197
鼠标经过，盒子里的图片放大，但不超出盒子的范围 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1036
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 701
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
前端开发知识(一)-html
最新发布
modi000的博客
07-24 596
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
如何实现鼠标悬停图片放大的效果。
05-22
实现鼠标悬停图片放大的效果，可以通过以下几种方式： 1. 使用CSS transform属性 可以使用CSS的transform属性来实现图片放大效果。将图片的缩放比例设为1.2或其他比例，当鼠标悬停在图片上时，将缩放比例改为1或原来的比例。 示例代码： ```html <style> .img-zoom { transition: transform .2s; } .img-zoom:hover { transform: scale(1.2); } </style> <img src="image.jpg" class="img-zoom"> ``` 2. 使用JavaScript和CSS 通过JavaScript来改变图片的样式，实现图片放大效果。当鼠标悬停在图片上时，将图片的宽高增加一定比例，当鼠标移开时，将图片宽高恢复到原来的大小。 示例代码： ```html <style> .img-zoom { transition: width .2s, height .2s; } </style> <img src="image.jpg" class="img-zoom" onmouseover="zoomIn(this)" onmouseout="zoomOut(this)"> <script> function zoomIn(img) { img.style.width = (img.clientWidth * 1.2) + "px"; img.style.height = (img.clientHeight * 1.2) + "px"; } function zoomOut(img) { img.style.width = ""; img.style.height = ""; } </script> ``` 3. 使用jQuery插件 可以使用一些开源的jQuery插件来实现图片放大效果，比如zoom.js、fancybox等。 使用zoom.js实现图片放大效果的示例代码： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script> <img src="image.jpg" data-zoom-image="image-large.jpg"> <script> $('img').zoom(); </script> ``` 以上是实现鼠标悬停图片放大的几种方式，可以根据实际需求选择适合的方法。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值