资讯专栏INFORMATION COLUMN

jQuery,别具一格的手风琴菜单

cncoder / 2716人阅读

摘要:,别具一格的手风琴菜单的全部代码的全部代码温泉酒店情侣酒店设计师酒店青年旅舍特色客栈海岛酒店海外温泉基于横向手风琴效果是一款基于实现的左右滑动手风琴图片轮播切换特效。

jQuery,别具一格的手风琴菜单
css的全部代码!!!
html的全部代码!!!!
  • 温泉酒店

  • 情侣酒店

  • 设计师酒店

  • 青年旅舍

  • 特色客栈

  • 海岛酒店

  • 海外温泉

$(function(){
    $("li").mouseenter(function(){
        $(this).find("span").removeClass("mask");
        $(this).find("p").hide();
        $(this).siblings().stop().animate({
            "width":"133px"
        },50);
        $(this).stop().animate({
            "width":"400px"
        },50);
    });
    $("li").mouseleave(function(){
        $(this).find("span").addClass("mask");
        $(this).find("p").show();
    });
    $("ul").mouseleave(function(){
        $("li").eq(0).stop().animate({
            "width":"174px"
        },50);
        $("li").not(":first").stop().animate({
            "width":"171px"
        },50);
    });
});
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下:

亲们,这次我们做的和上次的手风琴不一样,这次是横向的,很多网站里都会用到,希望我的可以帮到大家,see you!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87137.html

相关文章

  • jQuery风琴制作

    摘要:,通过高度变化向下增大来动态地显示所有匹配的元素。,将匹配的元素列表变为前一次的状态。,取得一个包含着所有匹配元素的唯一父元素的元素集合。,隐藏显示的元素。完成了这几步之后,我们的手风琴菜单就出来了,来看一下我们的效果吧 jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! ...

    muddyway 评论0 收藏0
  • You-Dont-Need : 你不需要系列

    摘要:是强大的,你可以做很多事情没有。如果你想要你的项目需要更少的依赖,并且你清楚的知道你的目标浏览器,那么你可能不需要。我们并不需要为了操作等再学习一下的。但是,他们往往需要更多的资源,功能不强,难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的,你可以做很多事情没有JS。 本文教你使用原生CSS做下面的事情。 内容目录 手风琴/切换 圆盘传送带...

    anonymoussf 评论0 收藏0
  • You-Dont-Need : 你不需要系列

    摘要:是强大的,你可以做很多事情没有。如果你想要你的项目需要更少的依赖,并且你清楚的知道你的目标浏览器,那么你可能不需要。我们并不需要为了操作等再学习一下的。但是,他们往往需要更多的资源,功能不强,难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的,你可以做很多事情没有JS。 本文教你使用原生CSS做下面的事情。 内容目录 手风琴/切换 圆盘传送带...

    bawn 评论0 收藏0
  • 《第40天 : JQuery - 风琴列表》

    摘要:源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的手风琴列表样式。该方法检查被选元素的可见状态。 showImg(https://segmentfault.com/img/bVbjavP?w=387&h=408); 源码下载地址:链接:https://pan.baidu.com/s/1x9c1... 提取码:2bzr 如果有赞就很幸福了. 今天要和你们分享的是我看了...

    songze 评论0 收藏0
  • 《第40天 : JQuery - 风琴列表》

    摘要:源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的手风琴列表样式。该方法检查被选元素的可见状态。 showImg(https://segmentfault.com/img/bVbjavP?w=387&h=408); 源码下载地址:链接:https://pan.baidu.com/s/1x9c1... 提取码:2bzr 如果有赞就很幸福了. 今天要和你们分享的是我看了...

    zhiwei 评论0 收藏0

发表评论

0条评论

cncoder

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<