使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > jQuery鼠标悬停上下拉伸图文切换效果
码云码云 前端开发

jQuery鼠标悬停上下拉伸图文切换效果

目录
文章目录隐藏
  1. 图文切换效果一
  2. 图文切换效果二
  3. 图文切换效果三
  4. 图文切换效果四
  5. 图文切换效果五
  6. 图文切换效果六
  7. 其他图片素材
  8. 结束语

今天给大家分享 6 款有关鼠标悬停图文切换效果例子，这种效果呢在日常的网页中大家会经常见到，使得原本平凡单调的网页看起来更加生动更加炫酷，用户体验很好，让我们整个网页看起来高端大气上档次。那么这样一个图文切换效果是如何实现的呢？其实很简单，就是利用 jQuery 的自定义动画 animate 知识和定时器 setTimeout 的知识就可以了。关于 jQuery 动画大家可以看一下我之前写的 jQuery 教程《[jQuery 教程]自定义动画（十九）》和《[jQuery 教程]淡入淡出方法（十七）》，这里不再多赘述，没有难的东西，都是最基础的东西实现的，所以接下来我会把所有代码贴出来分享给大家，有需要的拿走即可。

jQuery 鼠标悬停上下拉伸图文切换效果

注：记得引入 jQuery 库

公共 css 代码：

* {
	margin: 0;
	padding: 0;
}

#wrap {
	margin: 10px auto;
	width: 640px;
	overflow: hidden;
}

#wrap h1 {
	margin: 20px 0;
	text-align: center;
	color: #006393;
}

图文切换效果一

HTML 代码：

<!-- 第一个 demo -->
<div id="wrap">
<h1>DEMO 1</h1>
<ul class="item1">
<li><br />
<div>
<h3>码云笔记</h3>
<p>前端博客（mybj123.com)，关注 Web 前端开发技术，移动前端开发，前端资讯，致力于解决 web 前端开发中的实际问题和分享优秀的网页设计资源。</p>
</div>
</li>
</ul>
</div>

CSS 代码：

.item1 img {
	vertical-align: top;
}

.item1 li {
	position: relative;
	float: left;
	margin-right: 3px;
	width: 157px;
	height: 203px;
	overflow: hidden;
	cursor: pointer;
}

.item1 div {
	position: absolute;
	left: 0;
	top: 120px;
	width: 100%;
	height: 50px;
	text-align: center;
	background: url(images/demo02.png) no-repeat;
	color: #FFF;
	overflow: hidden;
}

.item1 p {
	display: none;
	margin: 5px auto 0;
	width: 135px;
	line-height: 20px;
	text-align: left;
	text-indent: 2em;
	font-size: 12px;
}

.item1 h3 {
	margin: 11px 0;
	height: 25px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat 0 -8px;
}

jQuery 代码：

$(function() {
    $(".item1 li").hover(function() {
        var that = this;
        item1Timer = setTimeout(function() {
            $(that).find("div").animate({
                "top": 0,
                "height": 204
            },
            300,
            function() {
                $(that).find("p").fadeIn(200);
            });
        },
        100);
    },
    function() {
        var that = this;
        clearTimeout(item1Timer);
        $(that).find("p").fadeOut(200);
        $(that).find("div").animate({
            "top": 120,
            "height": 50
        },
        300);
    })
});

页面效果展示：

jQuery 鼠标悬停上下拉伸图文切换效果

图文切换效果二

HTML 代码：

<html>
 <head></head>
 <body>
  <div id="wrap"> 
   <h1>DEMO 2</h1> 
   <div class="item2">
    <img src="images/demo01.jpg" width="157" height="203" /> 
    <div class="item2-txt"> 
     <h3>码云笔记</h3> 
    </div> 
    <div class="caption"> 
     <h3>码云笔记</h3> 
     <p>前端博客（mybj123.com)，关注 Web 前端开发技术，移动前端开发，前端资讯，致力于解决 web 前端开发中的实际问题和分享优秀的网页设计资源。</p> 
    </div> 
   </div> 
  </div>
 </body>
</html>

CSS 代码：

.item2 {
	position: relative;
	float: left;
	margin-right: 3px;
	width: 157px;
	height: 203px;
	overflow: hidden;
	cursor: pointer;
}

.item2 .caption {
	position: absolute;
	left: 0;
	display: none;
	width: 157px;
	height: 203px;
	color: #fff;
	font-weight: bold;
	background: url(images/demo02.png) no-repeat;
}

.item2 h3 {
	margin: 10px 0 5px;
	height: 25px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat 0 -10px;
}

.item2 p {
	padding: 0 12px;
	margin: 0;
	line-height: 20px;
	text-indent: 2em;
	font-size: 12px;
	color: #fff;
	font-weight: normal;
}

.item2 img {
	border: 0;
	position: absolute;
}

.item2-txt {
	position: absolute;
	left: 0;
	top: 120px;
	width: 100%;
	height: 40px;
	text-align: center;
	color: #FFF;
	overflow: hidden;
	background: url(images/demo02.png) no-repeat;
}

jQuery 代码：

$(function() {
    $(".item2").hover(function() {
        var that = this;
        item2Timer = setTimeout(function() {
            $(that).find('div.caption').slideDown(300);
            $(that).find('.item2-txt').fadeOut(200);
        },
        100);
    },
    function() {
        var that = this;
        clearTimeout(item2Timer);
        $(that).find('div.caption').slideUp(300);
        $(that).find('.item2-txt').fadeIn(200);
    });
});

效果如下：

图文切换效果二

图文切换效果三

HTML 代码：

<html>
 <head></head>
 <body>
  <div id="wrap"> 
   <h1>DEMO 3</h1> 
   <div class="item3">
    <img src="images/demo01.jpg" width="157" height="203" /> 
    <p>码云笔记</p> 
    <div class="cornerTL">
     &nbsp;
    </div> 
    <div class="cornerTR">
     &nbsp;
    </div> 
    <div class="cornerBL">
     &nbsp;
    </div> 
    <div class="cornerBR">
     &nbsp;
    </div> 
    <dl> 
     <dt> 
      <h3>码云笔记</h3> 
     </dt> 
     <dd>
      前端博客（mybj123.com)，关注 Web 前端开发技术，移动前端开发，前端资讯，致力于解决 web 前端开发中的实际问题和分享优秀的网页设计资源。
     </dd> 
    </dl> 
   </div> 
  </div>
 </body>
</html>

CSS 代码：

.item3 {
	position: relative;
	float: left;
	margin-right: 3px;
	width: 157px;
	height: 203px;
	cursor: pointer;
	overflow: hidden;
}

.item3 h2 {
	position: absolute;
	left: 0;
	top: 130px;
	height: 40px;
	width: 100%;
	background: url(images/demo02.png) no-repeat;
}

.item3 h2 p {
	height: 40px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat;
}

.item3 div {
	position: absolute;
	width: 0;
	height: 0;
	background: url(images/demo02.png) repeat;
	overflow: hidden;
	_zoom: 1;
}

.item3 .cornerTL {
	left: 0;
	top: 0;
}

.item3 .cornerTR {
	right: 0;
	top: 0;
}

.item3 .cornerBL {
	left: 0;
	bottom: 0;
}

.item3 .cornerBR {
	right: 0;
	bottom: 0;
}

.item3 dl {
	position: absolute;
	top: 0;
	left: 0;
	width: 157px;
	height: 203px;
	display: none;
}

.item3 dt {
	height: 40px;
	width: 100%;
	line-height: 40px;
	text-align: center;
	color: #FFF;
}

.item3 dt h3 {
	height: 40px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat;
}

.item3 dd {
	padding: 0 12px;
	width: 133px;
	line-height: 20px;
	text-indent: 2em;
	color: #FFF;
	font-size: 12px;
}

jQuery 代码：

$(function() {
    $(".item3").hover(function() {
        var that = this;
        item3Timer = setTimeout(function() {
            $(that).find("div").animate({
                width: 148,
                height: 148
            },
            300,
            function() {
                $(that).find("h2").fadeOut(200);
                $(that).find("dl").fadeIn(200);
            });
        },
        100);
    },
    function() {
        var that = this;
        clearTimeout(item3Timer);
        $(that).find("dl").fadeOut(200);
        $(that).find("div").stop().animate({
            width: 0,
            height: 0
        },
        300);
        $(that).find("h2").fadeIn(200);
    })
});

效果展示如下：

图文切换三

图文切换效果四

HTML 代码：

<html>
 <head></head>
 <body>
  <div id="wrap"> 
   <h1>DEMO 4</h1> 
   <div class="item4">
    <img src="images/demo01.jpg" width="157" height="203" /> 
    <div class="item4-txt"> 
     <h3>码云笔记</h3> 
    </div> 
    <div class="caption"> 
     <h3>码云笔记</h3> 
     <p>前端博客（mybj123.com)，关注 Web 前端开发技术，移动前端开发，前端资讯，致力于解决 web 前端开发中的实际问题和分享优秀的网页设计资源。</p> 
    </div> 
   </div> 
  </div>
 </body>
</html>

CSS 代码：

.item4 {
	width: 157px;
	height: 203px;
	margin-right: 3px;
	overflow: hidden;
	position: relative;
	float: left;
	cursor: pointer;
}

.item4 .caption {
	width: 157px;
	height: 203px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: 0;
	display: none;
	background: url(images/demo02.png) no-repeat;
}

.item4 h3 {
	margin: 10px 0 5px;
	height: 25px;
	text-indent: -10000px;
	background-image: url(images/demo03.png);
	background-repeat: no-repeat;
	background-position: 0 -8px;
}

.item4 p {
	padding: 0 12px;
	margin: 0;
	text-indent: 2em;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	font-weight: normal;
}

.item4 img {
	border: 0;
	position: absolute;
}

.item4-txt {
	position: absolute;
	left: 0;
	top: 120px;
	width: 100%;
	height: 50px;
	text-align: center;
	color: #FFF;
	overflow: hidden;
	background: url(images/demo02.png) no-repeat;
}

jQuery 代码：

$(function() {
    var move = -50;
    var zoom = 1.5;
    $(".item4").each(function() {
        var that = this $(that).bind({
            mouseenter: function() {
                item4Timer = setTimeout(function() {
                    width = $(that).width() * zoom;
                    height = $(that).height() * zoom;
                    $(that).find('img').animate({
                        'width': width,
                        'height': height,
                        'top': move,
                        'left': move
                    },
                    500);
                    $(that).find('div.caption').fadeIn(500);
                    $(that).find('.item4-txt').fadeOut(500);
                },
                200);
            },
            mouseleave: function() {
                clearTimeout(item4Timer);
                $(that).find('img').animate({
                    'width': $(that).width(),
                    'height': $(that).height(),
                    'top': '0',
                    'left': '0'
                },
                500);
                $(that).find('div.caption').fadeOut(500);
                $(that).find('.item4-txt').fadeIn(500);
            }
        });
    })
});

效果展示：

图文切换效果四

图文切换效果五

HTML 代码：

<html>
 <head></head>
 <body>
  <div id="wrap"> 
   <h1>DEMO 5</h1> 
   <div class="item5">
    <img src="images/demo01.jpg" width="157" height="203" /> 
    <p>码云笔记</p> 
    <div class="cornerTL">
     &nbsp;
    </div> 
    <dl> 
     <dt> 
      <h3>码云笔记</h3> 
     </dt> 
     <dd>
      前端博客（mybj123.com)，关注 Web 前端开发技术，移动前端开发，前端资讯，致力于解决 web 前端开发中的实际问题和分享优秀的网页设计资源。
     </dd> 
    </dl> 
   </div> 
  </div>
 </body>
</html>

CSS 代码：

.item5 {
	position: relative;
	float: left;
	margin-right: 3px;
	width: 157px;
	height: 203px;
	cursor: pointer;
	overflow: hidden;
}

.item5 h2 {
	position: absolute;
	left: 0;
	top: 130px;
	height: 40px;
	width: 100%;
	background: url(images/demo02.png) no-repeat;
}

.item5 h2 p {
	height: 40px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat;
}

.item5 div {
	position: absolute;
	width: 0;
	height: 0;
	background: url(images/demo02.png) repeat;
	overflow: hidden;
	_zoom: 1;
}

.item5 .cornerTL {
	left: 0;
	top: 0;
}

.item5 .cornerTR {
	right: 0;
	top: 0;
}

.item5 .cornerBL {
	left: 0;
	bottom: 0;
}

.item5 .cornerBR {
	right: 0;
	bottom: 0;
}

.item5 .cornerCC {
	left: 78px;
	top: 101px;
}

.item5 dl {
	position: absolute;
	top: 0;
	left: 0;
	width: 157px;
	height: 203px;
	display: none;
}

.item5 dt {
	height: 40px;
	width: 100%;
	line-height: 40px;
	text-align: center;
	color: #FFF;
}

.item5 dt h3 {
	height: 40px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat;
}

.item5 dd {
	padding: 0 12px;
	width: 133px;
	line-height: 20px;
	text-indent: 2em;
	color: #FFF;
	font-size: 12px;
}

jQuery 代码：

$(function() {
    $(".item5").hover(function() {
        var that = this;
        item5Timer = setTimeout(function() {
            $(that).find("div").animate({
                width: 157,
                height: 203
            },
            300,
            function() {
                $(that).find("h2").fadeOut(200);
                $(that).find("dl").fadeIn(200);
            });
        },
        100);
    },
    function() {
        var that = this;
        clearTimeout(item5Timer);
        $(that).find("dl").fadeOut(200);
        $(that).find("div").stop().animate({
            width: 0,
            height: 0
        },
        300);
        $(that).find("h2").fadeIn(200);
    })
});

页面展示效果：

图文切换效果五

图文切换效果六

HTML 代码：

<html>
 <head></head>
 <body>
  <div id="wrap"> 
   <h1>DEMO 6</h1> 
   <div class="item6">
    <img src="images/demo01.jpg" width="157" height="203" /> 
    <p>码云笔记</p> 
    <div class="cornerCC">
     &nbsp;
    </div> 
    <dl> 
     <dt> 
      <h3>码云笔记</h3> 
     </dt> 
     <dd>
      前端博客（mybj123.com)，关注 Web 前端开发技术，移动前端开发，前端资讯，致力于解决 web 前端开发中的实际问题和分享优秀的网页设计资源。
     </dd> 
    </dl> 
   </div> 
  </div>
 </body>
</html>

CSS 代码：

.item6 {
	position: relative;
	float: left;
	margin-right: 3px;
	width: 157px;
	height: 203px;
	cursor: pointer;
	overflow: hidden;
}

.item6 h2 {
	position: absolute;
	left: 0;
	top: 130px;
	height: 40px;
	width: 100%;
	background: url(images/demo02.png) no-repeat;
}

.item6 h2 p {
	height: 40px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat;
}

.item6 div {
	position: absolute;
	width: 0;
	height: 0;
	background: url(images/demo02.png) repeat;
	overflow: hidden;
	_zoom: 1;
}

.item6 .cornerCC {
	left: 78px;
	top: 101px;
}

.item6 dl {
	position: absolute;
	top: 0;
	left: 0;
	width: 157px;
	height: 203px;
	display: none;
}

.item6 dt {
	height: 40px;
	width: 100%;
	line-height: 40px;
	text-align: center;
	color: #FFF;
}

.item6 dt h3 {
	height: 40px;
	text-indent: -10000px;
	background: url(images/demo03.png) no-repeat;
}

.item6 dd {
	padding: 0 12px;
	width: 133px;
	line-height: 20px;
	text-indent: 2em;
	color: #FFF;
	font-size: 12px;
}

jQuery 代码：

$(function() {
    $(".item6").hover(function() {
        var that = this;
        item6Timer = setTimeout(function() {
            $(that).find("div").animate({
                width: 157,
                height: 203,
                left: 0,
                top: 0
            },
            300,
            function() {
                $(that).find("h2").fadeOut(200);
                $(that).find("dl").fadeIn(200);
            });
        },
        100);
    },
    function() {
        var that = this;
        clearTimeout(item6Timer);
        $(that).find("dl").fadeOut(200);
        $(that).find("div").stop().animate({
            width: 0,
            height: 0,
            left: 78,
            top: 101
        },
        300);
        $(that).find("h2").fadeIn(200);
    })
});

效果如下图：

图文切换效果六

其他图片素材

图文求换效果素材图片图文求换效果素材图片图文求换效果素材图片

结束语

以上就是今天我为大家带来的图文切换效果的全部代码，因为实现起来非常简单，就是利用 jQuery 一些动画知识加上定时器的控制，相信大家通过看代码能够独立明白实现的整个过程，喜欢的或者是需要的拿走不谢，根据自己的需求修改即可。

「点点赞赏，手留余香」

赞 8 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » jQuery鼠标悬停上下拉伸图文切换效果

码云 会员

分享到：

相关推荐

2 评论

  1. 收藏一下，项目中会用到

回复 码云 取消回复