jQuery鼠标悬停上下拉伸图文切换效果
目录
今天给大家分享 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><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); }) });
页面效果展示:
图文切换效果二
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"> </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> </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"> </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"> </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 一些动画知识加上定时器的控制,相信大家通过看代码能够独立明白实现的整个过程,喜欢的或者是需要的拿走不谢,根据自己的需求修改即可。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jQuery鼠标悬停上下拉伸图文切换效果
码云笔记 » jQuery鼠标悬停上下拉伸图文切换效果
收藏一下,项目中会用到
这种效果经常见的