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

基于jQuery悬停图片变色放大特效

2015-06-02 13:39 866 查看

分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码。效果图如下：

在线预览源码下载

实现的代码。

html代码：

<div style="width: 620px; margin: 40px auto 0 auto;">
<div class="img">
<div class="inner">
<div>
<img src="image/1-1.jpg" /></div>
<div>
<img src="image/1-2.jpg" /></div>
</div>
</div>
<div class="img">
<div class="inner">
<div>
<img src="image/2-1.jpg" /></div>
<div>
<img src="image/2-2.jpg" /></div>
</div>
</div>
<div class="img">
<div class="inner">
<div>
<img src="image/3-1.jpg" /></div>
<div>
<img src="image/3-2.jpg" /></div>
</div>
</div>
<div class="img">
<div class="inner">
<div>
<img src="image/4-1.jpg" /></div>
<div>
<img src="image/4-2.jpg" /></div>
</div>
</div>
<div class="img">
<div class="inner">
<div>
<img src="image/1-1.jpg" /></div>
<div>
<img src="image/1-2.jpg" /></div>
</div>
</div>
<div class="img">
<div class="inner">
<div>
<img src="image/2-1.jpg" /></div>
<div>
<img src="image/2-2.jpg" /></div>
</div>
</div>
</div>
<script type="text/javascript">
$(".img").mouseenter(function () {
var $this = $(this);
var $div = $this.find(".inner div");
$div.eq(1).stop();
$div.eq(1).css({ "top": "0px", "left": "0px", "width": "200px", "height": "200px" });
$div.eq(0).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "0" }, 500);
$div.eq(1).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "1" }, 500);
}).mouseleave(function () {
var $this = $(this);
var $div = $this.find(".inner div");
$div.eq(0).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "1" }, 500);
$div.eq(1).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "0" }, 500);
});
</script>

via：http://www.w2bc.com/Article/41297

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

标签：

相关文章推荐

新的分享

章节导航