效果：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. 基础知识漫谈（2）：从设计UI框架开始

    说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...

  2. SEO：让搜索引擎对你的网站更有亲和力(译)

    人可以通过查看网站信息了解网站的内容,但是搜索引擎只对标签感兴趣,对内容的识别能力是很低的,如何让蜘蛛通过标签认识你的文章内容呢~ 原文网址:http://schema.org/docs/gs.htm ...

  3. 探索c#之尾递归编译器优化

    阅读目录: 递归运用 尾递归优化 编译器优化 递归运用 一个函数直接或间接的调用自身,这个函数即可叫做递归函数. 递归主要功能是把问题转换成较小规模的子问题,以子问题的解去逐渐逼近最终结果. 递归最重 ...

  4. Worktile 技术架构概要

    其实早就该写这篇博客了,一直说忙于工作没有时间,其实时间挤挤总会有的,可能就是因为懒吧!从2013年11月一直拖到现在,今天就简单谈谈 Worktile 的技术架构吧 . Worktile 自上线到现 ...

  5. 敏捷是什么？PMO是什么？

    敏捷组织中PMO应遵循的准则 敏捷改变了人们的工作方式,不仅仅是开发部门,而且还包括其它的部门,例如HR.财务以及PMO等.在大多数组织中,PMO是一个控制体.它指导项目团队的规范.模板以及流程.目前 ...

  6. Ajax概要：

    Ajax概要: Ajax不是个全新的技术,它是多种技术合并在一起产生的,包括XHTML,CSS,JavaScript,XmlHttpRequest,XML,JSON,DOM等 优点:(这也解释了为何我 ...

  7. iOS中多线程知识总结(二)

    1.GCD GCD全称是Grand Central Dispatch,译为"强大的中枢管理器" 1)什么是任务?什么是队列? 任务和队列是GCD的核心. 任务: 执行什么操作 队列 ...

  8. jQuery插件：jqGrid使用（一）

    1. Loading Data Load from JavaScript Array BundleConfig.cs using System.Web; using System.Web.Optimi ...

  9. Oracle_SQL函数-单行函数

    SQL函数 SQL函数分类 SQL函数主要有两种,分为单行函数.多行函数 单行函数:只对一行进行变换,每行返回一个结果.可以转换数据类型,可以嵌套参数可以是一列或一个值 多行函数:多行函数,每次对一组 ...

  10. T-Sql（五）xml操作

    t-sql中的xml操作在我们平时做项目的过程中用的很少,因为我们处理的数据量很少,除非一些用到xml的地方,t-sql中xml操作一般用在数据量很大,性能优化的地方,当然我在平时做项目的时候也是没用 ...