最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » jQuery鼠标悬停上下拉伸图文切换效果

2 评论

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

发表评论