jQuery效果之简单的手风琴效果
实现效果如图所示:
html结构:
<div class="item_box box10">
<div class="item_box_wp">
<div class="voice_2">
<ul>
<li class="li1" id="li1">
<div class="fold" style="display:none;">
<span class="img"></span>
<span class="txt">插件库</span>
</div>
<div class="unfold" style="display:block">
<dl>
<dt><img src="data:images/img10.png" /></dt>
<dd>
</dd>
<dd>使用语音外呼的模式将指定的语音呼入至接听人,可通过这种方式为针对性的客户提供会议通知、活动通知,并可通过API接口程序化控制呼出时间、呼出效果反馈</dd>
</dl>
</div>
</li>
<li class="li2">
<div class="fold">
<span class="img"></span>
<span class="txt">点击呼叫</span>
</div>
<div class="unfold">
<dl>
<dt><img src="data:images/img42.png" /></dt>
<dd>
</dd>
<dd>通过APP应用内按钮或浏览器网页按钮点击并发起IP通话、运营商线路通话服务,减少用户交互,提升用户体验</dd>
</dl>
</div>
</li>
<li class="li3">
<div class="fold">
<span class="img"></span>
<span class="txt">直拨通话</span>
</div>
<div class="unfold">
<dl>
<dt><img src="data:images/img49.png" /></dt>
<dd>
</dd>
<dd>无论是智能终端、浏览器模式,通过APP或者网页发起通话,接通方为手机用户或固话用户,常见集成至与企业服务相关的移动应用、企业客服座席。</dd>
</dl>
</div>
</li>
<li class="li4">
<div class="fold">
<span class="img"></span>
<span class="txt">回拨通话</span>
</div>
<div class="unfold">
<dl>
<dt><img src="data:images/img50.png" /></dt>
<dd>
</dd>
<dd>同时通过平台方发起主叫和被叫双方,定制通话方满足不同需求的客户服务,企业服务易可根据具体业务需求为客户提供定制服务</dd>
</dl>
</div>
</li>
<li class="li5">
<div class="fold">
<span class="img"></span>
<span class="txt">互联网通话</span>
</div>
<div class="unfold">
<dl>
<dt><img src="data:images/img51.png" /></dt>
<dd>
</dd>
<dd>基于互联网纯网络通话,无运营商和地域限制,拥有更清晰的语音质量,支持语音三方密钥的加密传输</dd>
</dl>
</div>
</li>
<li class="li6">
<div class="fold">
<span class="img"></span>
<span class="txt">语音会议</span>
</div>
<div class="unfold">
<dl>
<dt><img src="data:images/img52.png" /></dt>
<dd>
</dd>
<dd>同时桥接多人基于IP、电话语音的会议服务,基于API控制会议时长、成员邀请、禁音、移除等功能。</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</div>
js代码:
$(function(){
//语音通知手风琴效果
$(".voice_2 ul li").each(function(){
var fold = $(this).find(".fold");
var unfold = $(this).find(".unfold");
if(fold.is(":hidden")){
$(this).width(680);
}else{
$(this).width(100);
}
}) $(".voice_2 ul li").click(function(){
var li_index = $(this).index();
$(this).animate({width:680},200);
$(this).find(".unfold").show();
$(this).find(".fold").hide();
$(this).siblings().animate({width:100},200);
$(this).siblings().find(".unfold").hide();
$(this).siblings().find(".fold").show();
})
jQuery效果之简单的手风琴效果的更多相关文章
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- jQuery实现手机竖直手风琴效果
效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- jQuery插件实例四:手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- Jquery实现的简单轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
随机推荐
- 吴恩达机器学习笔记26-样本和直观理解1(Examples and Intuitions I)
从本质上讲,神经网络能够通过学习得出其自身的一系列特征.在普通的逻辑回归中,我们被限制为使用数据中的原始特征
- Python学习笔记【第十五篇】:Python网络编程三ftp案例练习--断点续传
开发一个支持多用户在线的FTP程序-------------------主要是学习思路 实现功能点 1:用户登陆验证(用户名.密码) 2:实现多用户登陆 3:实现简单的cmd命令操作 4:文件的上传( ...
- nginx服务器入门知识汇总
IP-hash 就是根据IP进行hash计算,然后分配到对应的服务器,好处就是不用session同步,固定IP会固定访问一台服务器,缺点就是恶意攻击,会造成某台服务器压垮.提供的服务不同,面向的地区不 ...
- 可能是把Java内存区域讲的最清楚的一篇文章
写在前面(常见面试题) 下面是面试官可能在“Java内存区域”知识点问你的问题,快拿出小本本记下来! 基本问题: 介绍下Java内存区域(运行时数据区). Java对象的创建过程(五步,建议能默写出来 ...
- Kubernetes 笔记 02 demo 初体验
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 从前面的文章我 ...
- python基础-文件操作(10)
一.什么是文件 等等这些都叫做文件,各种格式的.但不仅仅限制于这些. 二.文件的作用 大家应该听说过一句话:“好记性不如烂笔头”. 不仅人的大脑会遗忘事情,计算机也会如此,比如一个程序在运行过程中用了 ...
- 关于git 指令
命令行操作(由于是Linux命令行下的普通用户,都是在$级别下操作): 一. 本机配置 添加用户 git config –global user.name “XX” git config –gloab ...
- (转载)CPU、内存、硬盘、指令以及他们之间的关系
CPU.内存.硬盘.指令以及他们之间的关系 最近读完<程序是怎样跑起来的>以及<深入理解计算机系统>的3.6.9章节后对计算机的组成有了更深入细致的了解,现总结一下对CPU.内 ...
- mysql 开发进阶篇系列 9 锁问题 (Innodb 行锁实现方式)
一.概述 Innodb 行锁是通过给索引上的索引项加锁来实现的.这一点与(oracle,sql server)不同后者是通过在数据块中对相应的数据行加锁.这意味着只有通过索引条件检索数据,innodb ...
- form详解
form ** form常用属性 action 指定请求的地址 method 请求方式,如果是post形式发出的,表单的输入值就会放在请求体中,并且会进行编码处理,编码的方式在请求头中的Content ...