web前端开发个人技术博客
当前位置: 免费资源 > jQuery鼠标悬停上下拉伸图文切换效果

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

2019-01-25 分类:免费资源 作者:码云 阅读(3345)

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

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

注:记得引入jQuery库

公共css代码:

1
 *{margin:0;padding:0;} #wrap{margin:10px auto;width:640px;overflow:hidden;} #wrap h1{margin:20px 0;text-align:center;color:#006393;}

图文切换效果一

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
</p>
<!-- 第一个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>
<p>

CSS代码:

1
 .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代码:

1
 $(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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
</p>
<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>
<p>

CSS代码:

1
 .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代码:

1
 $(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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</p>
<div id="wrap">
<h1>DEMO 3</h1>
<div class="item3"><img src="images/demo01.jpg" width="157" height="203" />
<p>码云笔记</p>
<div class="cornerTL"> </div>
<div class="cornerTR"> </div>
<div class="cornerBL"> </div>
<div class="cornerBR"> </div>
<dl>
<dt>
<h3>码云笔记</h3>
</dt>
<dd>前端博客(mybj123.com),关注Web前端开发技术,移动前端开发,前端资讯,致力于解决web前端开发中的实际问题和分享优秀的网页设计资源。</dd>
</dl>
</div>
</div>
<p>

CSS代码:

1
 .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代码:

1
 $(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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
</p>
<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>
<p>

CSS代码:

1
 .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代码:

1
 $(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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</p>
<div id="wrap">
<h1>DEMO 5</h1>
<div class="item5"><img src="images/demo01.jpg" width="157" height="203" />
<p>码云笔记</p>
<div class="cornerTL"> </div>
<dl>
<dt>
<h3>码云笔记</h3>
</dt>
<dd>前端博客(mybj123.com),关注Web前端开发技术,移动前端开发,前端资讯,致力于解决web前端开发中的实际问题和分享优秀的网页设计资源。</dd>
</dl>
</div>
</div>
<p>

CSS代码:

1
 .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代码:

1
 $(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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</p>
<div id="wrap">
<h1>DEMO 6</h1>
<div class="item6"><img src="images/demo01.jpg" width="157" height="203" />
<p>码云笔记</p>
<div class="cornerCC"> </div>
<dl>
<dt>
<h3>码云笔记</h3>
</dt>
<dd>前端博客(mybj123.com),关注Web前端开发技术,移动前端开发,前端资讯,致力于解决web前端开发中的实际问题和分享优秀的网页设计资源。</dd>
</dl>
</div>
</div>
<p>

CSS代码:

1
 .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代码:

1
 $(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一些动画知识加上定时器的控制,相信大家通过看代码能够独立明白实现的整个过程,喜欢的或者是需要的拿走不谢,根据自己的需求修改即可。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - jQuery鼠标悬停上下拉伸图文切换效果

  1. Kdhdu Linux Chrome 62.0.3202.84

    收藏一下,项目中会用到

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @Kdhdu这种效果经常见的

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论