jquery鼠标悬浮翻转缩略图

jquery鼠标悬浮翻转缩略图

jquery hover鼠标悬停图片特效,当鼠标滑过品牌图片,隐藏的图片会翻转过来。

淘建站为您提供更多_图片代码_缩略图_翻转_品牌,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 363 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:图片代码 > 缩略图 难易程度:高级

品牌图片列表

<div class="brand">
    <a target="_blank" href="http://www.sucaiq.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
    <a target="_blank" href="http://www.sucaiq.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
    <a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
</div>
//品牌翻转
var allBrandAnimate = function(t, d) {
    if (t.find('.brand b').length != 0) {
        return false;
    }
    t.find('.brand a').each(function() {
        $(this).append('<b>' + $(this).find('img').attr('alt') + '</b>')
    });
    t.find('.brand a').hover(function() {
        $(this).find('img').stop().animate({'height': 0, 'top': '35px'}, d, function() {
            $(this).hide().next().show();
            $(this).next().animate({
                'height': '70px',
                'top': '0'
            }, d);
        });
    }, function() {
        $(this).find('b').animate({'height': 0, 'top': '35px'}, d, function() {
            $(this).hide().prev().show();
            $(this).prev().animate({
                'height': '70px',
                'top': '0'
            }, d);
        });
    });
}
allBrandAnimate($('.allbrand'), 80);

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/766.html
jquery鼠标悬浮翻转缩略图 希望对你有帮助,感谢您的支持!
  • 纯css3发光3D立方体翻转动画特效

    纯css3发光3D立方体翻转动画特效

  • flipshow.js各个方向翻转图片

    flipshow.js各个方向翻转图片

  • jQuery鼠标滑过图片翻转变大效果

    jQuery鼠标滑过图片翻转变大效果

  • jquery投票工具点击量翻转累加

    jquery投票工具点击量翻转累加

  • StackSlider3D左右按钮翻转图片

    StackSlider3D左右按钮翻转图片

  • jQuery Flipping Gallery翻转画廊插件

    jQuery Flipping Gallery翻转画廊插件

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2