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

最新推荐文章于 2022-05-20 18:05:50 发布

一只特立独行的pig

最新推荐文章于 2022-05-20 18:05:50 发布

阅读量1w

点赞数 5

分类专栏： jQuery 学习日志文章标签： jquery html 图片鼠标

本文链接：https://blog.csdn.net/sandy975/article/details/73658470

版权

学习日志同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

首先，我们来看最简单的效果，就是当鼠标滑过时，图片在网页空白区域出现放大效果。具体如下图所示：
这里写图片描述
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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录