前端经验

JQuery hover鼠标经过浮出标题效果

最近在做扎根沈阳专题,中间要加一个年货大集的横切,效果大概是这样的, 默认只显示价格不显示商品名称,其实这个效果很好写,最简单的办法如下:

HTML

<a href="" class="proimg">
    <div class="msk">
        <div class="kg"><span>价格:<em>25</em>元</span></div>
        <div class="name">碧更果 500g</div>
    </div>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" alt="" />
</a>


CSS

a.proimg{position:relative;width: 200px;height: 200px; margin-bottom: 10px;overflow: hidden;}
a.proimg .msk{position: absolute;width: 200px;height: 66px;bottom: -36px;}/*默认状态下*/
a.proimg:hover .msk{bottom: 0;}/*鼠标经过状态下*/
a.proimg .msk .kg{height: 30px;}
a.proimg .msk .kg span{height: 30px;float: right;padding: 0 15px;line-height: 30px;background-color: rgba(218,11,11,0.9);filter:progid:DXImageTransform.Microsoft.gradient( Gr0adientType = 0,startColorstr = '#5Ada0b0b',endColorstr = '#5Ada0b0b')\9;color: #fff;font-size: 15px;font-style: italic;}
a.proimg .msk .kg span em{font:italic 16px/30px Consolas,"Liberation Mono",Courier,monospace;}
a.proimg .msk .name{height: 36px;line-height: 36px;width: 100%;background-color: rgba(0,0,0,0.9);filter:progid:DXImageTransform.Microsoft.gradient( Gr0adientType = 0,startColorstr = '#5A000000',endColorstr = '#5A000000')\9;text-align: center;font-size: 18px;color: #fff}
a.proimg img{width: 200px;height: 200px;}


但是这样写就没有了过渡的效果,显得很生硬,这不是我们追求的效果,那要实现更好的效果有两种方法,第一是用CSS3动画效果来实现,第二种是用JQuery的animate动画效果来实现,CSS3唯一缺陷就是兼容性问题,目前国内IE9以下的浏览器还有很多,而我们不得不考虑这些用户,所以我们只能换一种兼容性好的方法,JQuery的animate来实现了,代码如下:

HTML

<a href="" class="proimg">
    <div class="msk">
        <div class="kg"><span>价格:<em>25</em>元</span></div>
        <div class="name">碧更果 500g</div>
    </div>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" alt="" />
</a>


CSS

.pro{position:relative;width: 200px;height: 200px; margin-bottom: 10px;overflow: hidden;}
.pro .msk{position: absolute;width: 200px;height: 66px;bottom: -36px;}
.pro .msk .kg{height: 30px;}
.pro .msk .kg span{height: 30px;float: right;padding: 0 15px;line-height: 30px;background-color: rgba(218,11,11,0.9);filter:progid:DXImageTransform.Microsoft.gradient( Gr0adientType = 0,startColorstr = '#5Ada0b0b',endColorstr = '#5Ada0b0b')\9;color: #fff;font-size: 15px;font-style: italic;}
.pro .msk .kg span em{font:italic 16px/30px Consolas,"Liberation Mono",Courier,monospace;}
.pro .msk .name{height: 36px;line-height: 36px;width: 100%;background-color: rgba(0,0,0,0.9);filter:progid:DXImageTransform.Microsoft.gradient( Gr0adientType = 0,startColorstr = '#5A000000',endColorstr = '#5A000000')\9;text-align: center;font-size: 18px;color: #fff}
.pro img{width: 200px;height: 200px;}


JQuery

$(function(){
    $(".proimg").hover(function(){
        $(this).find(".msk").stop().animate({bottom:"0"},200);
     },function(){
        $(this).find(".msk").stop().animate({bottom:"-36px"},300);
     });
});


这里有两处地方要注意

$(this).find(".msk")

是防止鼠标滑过其中一个元素的时候所有元素都引起变化


.stop()

是为了防止鼠标反复滑过引起的动画效果堆积

See the Pen vLEWOJ by bologer (@htmler) on CodePen.

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4