您的位置：首页 > Web前端 > JQuery

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

2017-06-24 10:51 881 查看

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

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();
})
})

欢迎各类指正和改进代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery html 图片鼠标

相关文章推荐

新的分享

章节导航