效果: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 &amp; CSS3 实现优雅的手风琴效果

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

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

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

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

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

  5. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  6. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  7. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  8. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  9. HTML中行内元素的竖直方向的padding和margin是否真的无效

    参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin- ...

随机推荐

  1. java项目启动后,数据库字段生成 user_name带下划线这种形式的

    hibernate 5.0 版本以上去掉了 hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy  这个属性,如果非 ...

  2. event.target指向谁?

    学习中,有时遇到event.target,总是不明白为什么要用target,后来学习了下,大概了解了event.target到底指什么元素了,关于event和this的内容,下回再说: 先摆结论:ev ...

  3. java读取properties配置文件总结

    java读取properties配置文件总结 在日常项目开发和学习中,我们不免会经常用到.propeties配置文件,例如数据库c3p0连接池的配置等.而我们经常读取配置文件的方法有以下两种: (1) ...

  4. java-原生爬虫机制源码

    这是一个web搜索的基本程序,从命令行输入搜索条件(起始的URL.处理url的最大数.要搜索的字符串),它就会逐个对Internet上的URL进行实时搜索,查找并输出匹配搜索条件的页面. 这个程序的原 ...

  5. MSDeploy

    http://blogs.iis.net/jamescoo/default.aspx   Web Deployment Tool Now Works With Credential Store Feb ...

  6. Thinkphp单字母快捷键

    在ThinkPHP中有许多使用简便的单字母函数(即快捷方法),可以很方便开发者快速的调用,但是字母函数却不方便记忆,本文将所有的字母函数总结一下,以方便以后查找. 1.U() URL组装 支持不同UR ...

  7. [vim] vim入门

    1. 概述 工欲善其事 必先利其器.vim是非常好用的文本编辑器,可以将它看作是vi的进阶.绝大多数Unix系统都会内置vi编辑器,vi是文本编辑器,vim是程序编辑器.相比vi,它可以根据文件的类型 ...

  8. 分布式监控系统Zabbix-3.0.3-完整安装记录(5)-邮件报警部署

    前面几篇陆续介绍了zabbix3.0.3监控系统的部署和监控项配置,今天这里分享下zabbix3.0.3的邮件报警的配置过程~由于采用sendmail发送邮件,常常会被认为是垃圾邮件被拒,所以不推荐这 ...

  9. javaee学习之servlet

    一.tomcat相关知识 tomecat虚拟主机与虚拟路径 1.tomcat的应用默认放在webapps目录下面,可以将其放在其他目录分区,让tomcat进行管理吗? 答:当然可以.方法:配置虚拟目录 ...

  10. mysql 查看最大连接数 设置最大连接数

    方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100   修改为 max_connections=1000 服务里重起MY ...