码云笔记提示:你现在浏览的网站是镜像网站

请访问原网站:www.mybj123.com
声明:码云笔记唯一指定网址为:mybj123 .com,其他网址均为冒充,望周知!!!前端技术交流群:565733884

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

资源共享 码云 211℃ 0评论
目录
[隐藏]

今天给大家分享6款有关鼠标悬停图文切换效果例子,这种效果呢在日常的网页中大家会经常见到,使得原本平凡单调的网页看起来更加生动更加炫酷,用户体验很好,让我们整个网页看起来高端大气上档次。那么这样一个图文切换效果是如何实现的呢?其实很简单,就是利用jQuery的自定义动画animate知识和定时器setTimeout的知识就可以了。关于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>
            <img src="images/demo01.jpg" width="157" height="203" />
            <div>
                <h3>码云笔记</h3>
                <p>前端博客(mybj123.com),关注Web前端开发技术,移动前端开发,前端资讯,致力于解决web前端开发中的实际问题和分享优秀的网页设计资源。</p>
            </div>
        </li>
</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代码:

<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>

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

<div id="wrap">
    <h1>DEMO 3</h1>
    <div class="item3">
        <img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>码云笔记</p></h2>
        <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>

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

<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>

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

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

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

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

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

转载请注明:码云笔记 » jQuery鼠标悬停上下拉伸图文切换效果

喜欢 (6)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 收藏一下,项目中会用到
    Kdhdu2019-01-29 09:53 回复