效果：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. Code First开发系列之领域建模和管理实体关系

    返回<8天掌握EF的Code First开发>总目录 本篇目录 理解Code First及其约定和配置 创建数据表结构 管理实体关系 三种继承模式 本章小结 自我测试 本篇的源码下载:点击 ...

  2. HTML和CSS经典布局6

    如下图: 需求: 1. 如图 2. 可以从任意div标签开始. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  3. .Net开发笔记（二十）创建一个需要授权的第三方组件

    在使用需要授权的软件时,注册付费的目标是软件的使用者,我们开发人员平时用到的一些第三方组件也是需要授权付费的,也就是说,付费者是开发人员,并不是系统(使用了该第三方组件)的最终使用者. 以上两者的区别 ...

  4. [备忘]没有为扩展名“.cshtml”注册的生成提供程序

    webconfig中配置 <compilation debug="true" targetFramework="4.5.1">       < ...

  5. Java 浅析三大特性之一继承

    上文Java 浅析三大特性之一封装我们说到Java是一个注重编写类,注重于代码和功能复用的语言.Java实现代码复用的方式有很多,这里介绍一个重要的复用方式--继承. 在介绍继承之前,我们要明确一点, ...

  6. C# BS消息推送 SignalR Hubs环境搭建与开发（二）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 开始开发 1)新建一个MVC项目,叫做SignalRDemo 2)安装SignalR包 In ...

  7. 机器学习理论知识部分--偏差方差平衡（bias-variance tradeoff）

    摘要: 1.常见问题 1.1 什么是偏差与方差? 1.2 为什么会产生过拟合,有哪些方法可以预防或克服过拟合? 2.模型选择例子 3.特征选择例子 4.特征工程与数据预处理例子 内容: 1.常见问题 ...

  8. 【NodeJS 学习笔记04】新闻发布系统

    前言 昨天,我们跟着这位大哥的博客(https://github.com/nswbmw/N-blog/wiki/_pages)进行了nodeJS初步的学习,最后也能将数据插入数据库了 但是一味的跟着别 ...

  9. 当前不会命中断点。源代码与原始版本不同 (VS2012)

    遇到“当前不会命中断点.源代码与原始版本不同”的问题. 在网上查的类似: 一般studio会提示将“工具”,“选项”,“调试”,“要求源文件与原始版本完成匹配”去掉勾.但是这个配置去掉治标不治本,错误 ...

  10. salesforce 零基础学习（四十八）自定义列表分页之Pagination基类封装 ※※※

    我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...