解决方案:jQuery实现了鼠标在图片缩放效果上的作用

首先，让我们看一下最简单的效果，即当鼠标移到上方时，图片将在网页的空白区域中放大。详细信息如下图所示：

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事件。具体想法是：

①当鼠标悬停在图片上方时，创建一个图片

元素，内容是图片的放大版本，然后分配给变量，然后使用append（）方法将元素添加到

②当鼠标移出图片时，将其删除

元素

具体的jQuery代码如下：

   $(function(){
        $("img.Japan").mouseover(function(e){
            var landscape="
+this.src+" alt=风景预览图 width=400px height=300px/>
";
            $("body").append(landscape);
        }).mouseout(function(){
                $("#landscape").remove();
            })
    })

                  欢迎各类指正和改进代码

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-345074-1.html