效果：http://hovertree.com/texiao/jquery/65/

效果图：

手机扫描二维码查看效果：

代码：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery扁平UI设计垂直手风琴特效 - 何问起</title><base target="_blank" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/65/css/normalize.css" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/65/css/demo.css">

<!--必要样式-->

<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/65/css/style.css">

</head>

<body>

<div class="accordion">

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Location-Pin.png" alt="">

<h3>Location</h3>

</div>

<p>您正在何问起特效库。<a href="http://hovertree.com/">首页</a> - <a href="http://hovertree.com/texiao/">特效库</a> - <a href="http://hovertree.com/texiao/jquery/65/">手风琴</a></p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Headphones.png" alt="">

<h3>Music</h3>

</div>

<p>好听音乐。<audio controls="controls" src="http://cms.hovertree.com/hovertreesound/hwqxnl.mp3"></audio></p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Lightbulb.png" alt="">

<h3>Notes</h3>

</div>

<p>受到网店的影响，<a href="http://hovertree.com/h/bjaf/6sm1esjw.htm">服装店</a>的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流，让何问起准备一下， 要在网上开网店，要为服装店建立网站。</p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Bookmarks.png" alt="">

<h3>Books</h3>

</div>

<p>电子书：<br /><a href="http://hovertree.com/h/bjaf/246k8ygw.htm">http://hovertree.com/h/bjaf/246k8ygw.htm</a>

<br /><a href="http://hovertree.com/h/bjaf/dianzishu.htm">电子书特效</a></p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Lightning-Bolt.png" alt="">

<h3>Tendances</h3>

</div>

<p>燃烧吧 何问起 <a href="http://hovertree.com/h/bjaf/xmrvjvng.htm">看看</a></p>

</div>

<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/vk9yjrpm.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>

<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>

<script type="text/javascript">

(function ($) {

'use strict';

$('.item').on("click", function () {

$(this).next().slideToggle(100);

$('p').not($(this).next()).slideUp('fast');

});

}(jQuery));

</script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/vk9yjrpm.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery实现手机竖直手风琴效果的更多相关文章

  1. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  2. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  3. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  4. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  6. jQuery点击收缩展开滑动显示内容竖直手风琴代码

    <div class="position"> <div class="positiontop"> <span class=&quo ...

  7. numpy基础教程--对数组进行水平拼接和竖直拼接

    在处理数组的时候经常要用到拼接,numpy中有两个非常实用的函数,可以快捷对数组进行拼接 1.hstack(tup)函数可以接收维度相同的数组,进行水平拼接. 2.vstack(tup)用来竖直拼接 ...

  8. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  9. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

随机推荐

  1. 开始用Word 2013来写博客

    第一步:如果从未发布过博客文章的话,需要在菜单里面选这里添加博客账号   第二步:选择正确的设置   第三步:写完博客之后,按这里就可以发布了!   如果以后需要写新的博客的话,还可以直接点这里:   ...

  2. uwp如何建立任何形状的头像，如圆形，方形，六边形等

    最近掌上英雄联盟更新了新的界面,其中“我”界面的更新比较大,我目前还在加紧跟进.在做这个界面的时候,这个头像我想了一下,其实挺好解决的.先上个原图 这个头像一开始我也完全找不到头绪,然后我把头像放大了 ...

  3. QUOTED_IDENTIFIER 选项对 index 的影响

    在修改或创建Index时,有时会收到一些Error Message,指明Set options设置错误,最常见的选项是:SET QUOTED_IDENTIFIER 选项 当创建或修改的index包含c ...

  4. CTE 递归查询

    使用CTE进行递归查询,能够实现对层次结构的数据的快速访问,非常有用. TSql CTE 递归原理探究 TSql 分层和递归查询 1,CTE的递归结构 递归查询的结构包括两部分:起始点和迭代公式. 使 ...

  5. jQuery源码分析系列(34) : Ajax - 预处理jsonp

    上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...

  6. OpenCASCADE Coordinate Transforms

    OpenCASCADE Coordinate Transforms eryar@163.com Abstract. The purpose of the OpenGL graphics process ...

  7. Memory Management in Open Cascade

    Open Cascade中的内存管理 Memory Management in Open Cascade eryar@163.com 一.C++中的内存管理 Memory Management in ...

  8. MVC4做网站后台:栏目管理1、添加栏目

    把栏目添加删除跟前台混在一起结构清晰,现在有了后台管理的区域就把后台管理相关的代码分开. 要实现功能: 1.添加栏目 2.删除栏目 3.修改栏目信息 -- 一.开始 1.添加 接口InterfaceC ...

  9. javascript运动系列第二篇——变速运动

    × 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...

  10. JBOSS.71.1.Final安装配置

    对于JBOSS大家了解多少,相信做Java开发的小童鞋对于Tomcat一定不陌生,而今天为大家介绍的JBOSS也是一款服务器软件,相比Tomcat,JBOSS对于高级的JavaEE相对来说更强大一点, ...