以下是 云之讯jQuery扁平手风琴代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云之讯jQuery扁平手风琴代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel='stylesheet' type='text/css' href='css/base.css'/>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<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="images/img10.png" /></dt>
<dd>
<b>内容<a href="#">查看接口文档>></a></b>
</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="images/img42.png" /></dt>
<dd>
<b>点击呼叫<a href="#">查看接口文档>></a></b>
</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="images/img49.png" /></dt>
<dd>
<b>直拨通话<a href="#">查看接口文档>></a></b>
</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="images/img50.png" /></dt>
<dd>
<b>回拨通话<a href="#">查看接口文档>></a></b>
</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="images/img51.png" /></dt>
<dd>
<b>互联网通话<a href="#">查看接口文档>></a></b>
</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="images/img52.png" /></dt>
<dd>
<b>语音会议<a href="#">查看接口文档>></a></b>
</dd>
<dd>同时桥接多人基于IP、电话语音的会议服务，基于API控制会议时长、成员邀请、禁音、移除等功能。</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(base.js):
// JavaScript Document$(function(){
//导航菜单 var ytx={
}
;
$('[t_nav]').hover(function(){
var _nav = $(this).attr('t_nav');
clearTimeout( ytx[ _nav + '_timer' ] );
ytx[ _nav + '_timer' ] = setTimeout(function(){
$('#'+_nav).stop(true,true).slideDown(200);
}
,150);
}
,function(){
var _nav = $(this).attr('t_nav');
clearTimeout( ytx[ _nav + '_timer' ] );
ytx[ _nav + '_timer' ] = setTimeout(function(){
$('#'+_nav).stop(true,true).slideUp(200);
}
,150);
}
);
//导航绿色标题高度处理$(".submenu dl").each(function(){
var dl_h = $(this).height();
$(this).find("dt").height(dl_h);
}
)//首页短信、im、语音、视频动画效果$(".box1 ul li").hover(function(){
$(this).find(".unhover").find("i").animate({
bottom:-145,opacity:'0'}
,500);
$(this).find(".unhover").find(".txt").animate({
left:-125,opacity:'0'}
,500);
$(this).find(".hover").show().find("i").animate({
top:0}
,500);
$(this).find(".hover").show().find(".txt").animate({
right:0}
,500);
}
,function(){
$(this).find(".unhover").find("i").animate({
bottom:0,opacity:'1'}
,500);
$(this).find(".unhover").find(".txt").animate({
left:0,opacity:'1'}
,500);
$(this).find(".hover").find("i").animate({
top:-125}
,500);
$(this).find(".hover").find(".txt").animate({
right:-110}
,500);
}
)//首页“简单”、“可靠”、“专注”、“全球”动画效果var current = $(".index_2 span.txt.current").index();
$(".index_2 span.txt").not(".current").hover(function(){
var span_index = $(this).index();
$(this).addClass("current");
$(".txt_desc").find("span").eq(span_index).fadeIn(800).siblings("span").fadeOut(800);
}
,function(){
var span_index = $(this).index();
$(this).removeClass("current");
$(".txt_desc").find("span").eq(span_index).fadeOut(800).siblings("span").eq(current).fadeIn(800);
}
)//首页客户图标鼠标放上去状态变化$(".index_4 ul li").hover(function(){
var img_src = $(this).find("img").attr("src");
var img_name = img_src.substring(7).replace(".png","");
//alert(img_name);
$(this).find("img").attr("src","/front/"+img_name+"_hover.png");
}
,function(){
var img_src = $(this).find("img").attr("src");
var img_name = img_src.substring(7).replace("_hover.png","");
$(this).find("img").attr("src","/front/"+img_name+".png");
}
)//语音通知手风琴效果$(".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();
}
)//下拉框处理$("div.select_box ul li:even").css("background","#f5f5f5");
$("div.select_box").click(function(e){
if("readonly" == $(this).attr('readonly')){
return false;
}
e.stopPropagation();
$(this).children("ul").toggle();
$(this).toggleClass("focus");
}
);
}
)CSS代码(base.css):
@charset "utf-8";/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,hr{margin:0px;padding:0px;}
body{font-size:12px;line-height:1.5;font-family:微软雅黑;background:#fff;}
h1,h2,h3,h4,h5,h6{font-family:arial,"hiragino sans gb","microsoft yahei","Simsun",sans-serif;font-size:100%;font-weight:normal;}
input,textarea,select,button{font-size:12px;,font-weight:normal;vertical-align:middle;}
input[type='button'],input[type='submit'],select,button{cursor:pointer;}
table{border-spacing:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
q:before,q:after{content:"";}
abbr,acronym{border:0 none;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
fieldset,img,a img,iframe{border-style:none;border-width:0;}
img{vertical-align:middle;vertical-align:middle;outline:none;}
textarea{overflow-y:auto;}
legend{color:#000;}
a{text-decoration:none;outline:none;cursor:pointer;color:#298ff8;}
a:link,a:visited{text-decoration:none;}
hr{height:0;}
/*---------------首页---------------*/
/*首页banner*/
.ft_banner{width:100%;background:url("img/banner12.png") center center no-repeat;height:660px;}
.ft_banner_wp{width:1180px;margin:0 auto;position:relative;}
/*轮播图*/
.banner_box{width:100%;height:550px;overflow:hidden;}
.banner_box .banner{width:100%;height:550px;overflow:hidden;position:relative;}
.banner_box .banner_list{width:100%;height:550px;position:relative;}
.banner_list li{width:100%;height:550px;position:absolute;left:0;top:0;opacity:0;filter:alpha:opacity(0);}
.banner_list .bm1{background:url(img/banner1.png) 50% 0 #319ACC no-repeat;}
.banner_list .bm2{background:url(img/banner2.png) 50% 0 #5390D5 no-repeat;}
/*.banner_list .bm3{background:url(img/banner3.png) 50% 0 no-repeat;}
.banner_list .bm4{background:url(img/banner4.png) 50% 0 no-repeat;}
.banner_list .bm5{background:url(img/banner5.png) 50% 0 no-repeat;}
*/
.slide_btns{position:absolute;width:1180px;top:225px;left:50%;margin-left:-590px;z-index:11;}
.banner_box .prev_btn,.banner_box .next_btn{display:block;width:31px;height:90px;position:absolute;opacity:0.5;filter:alpha:opacity(50);}
.banner_box .prev_btn{left:0px;background:url(img/slide_icon.png) 0 0px no-repeat;}
.banner_box .next_btn{right:0px;background:url(img/slide_icon.png) -39px 0px no-repeat;}
.banner_box .circle_btns{/*width:100%;*/
width:140px;height:20px;position:absolute;bottom:18px;left:50%;text-align:center;z-index:11;margin-left:-70px;}
.banner_box .circle_btns a{display:inline-block;width:20px;height:20px;background:url(img/slide_icon.png) -50px -100px no-repeat;margin-right:10px;}
.banner_box .circle_btns .a1{margin-right:0;}
.banner_box .circle_btns .cur{background-position:0px -100px;}
.banner_list .bm_txt{width:1180px;margin:102px auto 0px auto;color:#fefefe;position:relative;}
.banner_list .bm_txt h1{font-size:60px;position:absolute;right:55px;top:0px;}
.banner_list .bm_txt h2{font-size:48px;position:absolute;right:55px;top:90px;}
.banner_list .bm_txt p{font-size:18px;position:absolute;right:55px;}
.banner_list .bm_txt p.p1{top:189px;}
.banner_list .bm_txt p.p2{top:233px;}
.banner_list .bm2_txt p.p3{top:278px;}
/*首页*/
.item_box{width:100%;padding:0px 0px 82px 0px;overflow:hidden;}
.item_box_wp{width:1180px;margin:0 auto;}
.item_box_wp .title{background:url("img/cloud.png") center center no-repeat;width:1180px;min-height:87px;margin:30px auto 55px auto;text-align:center;}
.item_box_wp .title h1{font-size:36px;color:#3f616c;}
.item_box_wp .title h2{font-size:18px;color:#aaa;}
.item_box_wp h3{color:#67b83d;font-size:36px;margin:74px 0px 50px 0px;}
.item_box_wp h4{color:#3f616c;font-size:36px;margin:65px 0px 25px 0px;text-align:center;}
.box1{border-bottom:1px #cccccc solid;}
.box1 ul li{float:left;display:inline;margin-right:106px;width:215px;text-align:center;overflow:hidden;}
.box1 ul li.last{margin-right:0px;}
.box1 ul li dt{background:#fafafa;border-radius:90px;width:180px;height:180px;text-align:center;cursor:pointer;margin-bottom:20px;margin-left:18px;font-size:14px;position:relative;}
.box1 ul li dt a{display:inline-block;color:#333;width:180px;height:180px;top:0px;left:0px;position:absolute;border-radius:90px;overflow:hidden;}
.box1 ul li dt i{display:inline-block;text-align:center;vertical-align:middle;background:url("img/icon.png") 0 0 no-repeat;position:relative;}
.box1 ul li.li1 dt i{background-position:0 0;width:64px;height:85px;margin:40px 58px 15px 58px;}
.box1 ul li.li2 dt i{background-position:0 -101px;width:94px;height:94px;margin:33px 43px 13px 43px;}
.box1 ul li.li3 dt i{background-position:0 -203px;width:54px;height:98px;margin:27px 63px 13px 63px;}
.box1 ul li.li4 dt i{background-position:0 -325px;width:76px;height:64px;margin:51px 52px 23px 52px;}
.box1 ul li dt a.hover{top:0px;left:0px;}
.box1 ul li.li1 dt a.hover i{background-position:-76px 0;top:-125px;}
.box1 ul li.li2 dt a.hover i{background-position:-108px -101px;top:-125px;}
.box1 ul li.li3 dt a.hover i{background-position:-67px -203px;top:-125px;}
.box1 ul li.li4 dt a.hover i{background-position:-83px -325px;top:-125px;}
.box1 ul li dt a .txt{position:relative;}
.box1 ul li dt a.hover .txt{right:-100px;}
.box1 ul li dt a.hover .txt{color:#fff;}
.box1 ul li dd{color:#666;font-size:12px;margin-bottom:20px;line-height:22px;}
.box1 ul li dd.tit{font-size:18px;color:#78b500;font-weight:normal;margin-bottom:5px;display:inline-block;}
.box1 ul li dd a{display:inline-block;color:#78b500;width:92px;height:28px;line-height:28px;text-align:center;border-radius:5px;border:1px #78b500 solid;}
.box1 ul li:hover dd a{background:#78b500;color:#fff;}
/*短信、语音、视频等动画*/
.box1 ul li dt{transition:background 0.5s;-moz-transition:background 0.5s;/* Firefox 4 */
-webkit-transition:background 0.5s;/* Safari and Chrome */
-o-transition:background 0.5s;/* Opera */
}
.box1 ul li:hover dt{background:#84d23f;}
.box2{background:#f9f9f9;padding:75px 0px 0px 0px;border-bottom:1px #cccccc solid;}
.index_2{width:1180px;margin:0 auto;position:relative;}
.index_2 span.txt{font-size:18px;color:#333;background:#fff;display:inline-block;width:80px;height:80px;line-height:80px;border-radius:40px;box-shadow:2px 4px 10px #ccc;text-align:center;position:absolute;cursor:pointer;}
.index_2 span.txt1{left:69px;top:202px;}
.index_2 span.txt2{left:334px;top:0px;}
.index_2 span.txt3{left:766px;top:0px;}
.index_2 span.txt4{left:1025px;top:202px;}
.index_2 .txt_desc span{position:absolute;}
.index_2 .txt_desc span em{font-style:normal;position:relative;font-size:14px;color:#333;display:inline-block;width:277px;height:211px;background:url("img/desc_bg.png") 0 0 no-repeat;line-height:35px;padding:32px 44px 0px 44px;}
.index_2 .txt_desc span.span1 img{position:relative;left:-350px;top:-82px;}
.index_2 .txt_desc span.span1{background:url("img/img57.png") 0 0 no-repeat;top:108px;left:284px;width:680px;height:306px;}
.index_2 .txt_desc span.span2{background:url("img/img58.png") 0 0 no-repeat;top:120px;left:248px;width:680px;height:311px;}
.index_2 .txt_desc span.span3{background:url("img/img59.png") 0 0 no-repeat;top:160px;left:248px;width:680px;height:202px;}
.index_2 .txt_desc span.span4{background:url("img/img60.png") 0 0 no-repeat;top:120px;left:284px;width:680px;height:267px;}
.index_2 .txt_desc span.span1 em{top:30px;right:-307px;}
.index_2 .txt_desc span.span2 em{top:18px;right:-343px;}
.index_2 .txt_desc span.span3 em{top:-23px;right:-343px;}
.index_2 .txt_desc span.span4 em{top:17px;right:-307px;}
/*简单、可靠、专注、全球动画*/
.index_2 span.txt{transition:transform 1s ease-out;;-moz-transition:-moz-transform 1s ease-out;;/* Firefox 4 */
-webkit-transition:-webkit-transform 1s ease-out;;/* Safari and Chrome */
-o-transition:-o-transform 1s ease-out;;/* Opera */
}
.index_2 span.txt:hover,.index_2 span.txt.current{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.box3{padding:0px;width:100%;position:relative;height:510px;}
.bg_attach1{width:100%;background:url("img/bg1.png") 0 center fixed no-repeat;position:absolute;top:0px;left:0px;height:1124px;}
.bg_attach2{width:100%;background:#3390c1;opacity:0.6;position:absolute;top:0px;left:0px;height:510px;}
.index_3{position:relative;z-index:11;margin:75px auto 0px auto;width:1035px;}
.index_3 p span{position:absolute;font-size:30px;color:#fff;left:658px;}
.index_3 p .span1{top:54px;}
.index_3 p .span2{top:157px;}
.index_3 p .span3{top:263px;}
.index_3 p .span1 em{display:inline-block;width:90px;}
.index_3 p .span2 em{display:inline-block;width:82px;}
.index_3 p .span3 em{display:inline-block;width:98px;}
.index_4{width:995px;margin:0 auto;}
.box4 .item_box_wp{text-align:center;}
.box4 ul{float:left;display:inline;width:995px;border:1px #eee solid;background:#fff;}
.box4 ul li{float:left;display:inline;width:248px;border-right:1px #eee solid;border-bottom:1px #eee solid;height:78px;line-height:78px;cursor:pointer;}
.box4 ul li.last{margin-right:-1px;}
.box4 ul li.bottom{margin-bottom:-1px;}
/*短信*/
.ft_banner1{width:100%;height:430px;background:url("img/banner6.png") center center;}
.message_1{margin-top:70px;}
.message_1 ul{margin-bottom:68px;overflow:hidden;}
.message_1 ul li{float:left;display:inline;margin:0px 140px;width:310px;text-align:center;}
.message_1 dl{width:100%;text-align:center;}
.message_1 dt{margin-bottom:15px;}
.message_1 dd{line-height:25px;font-size:14px;color:#666;}
.message_1 dd.tit{font-size:24px;color:#333;margin-bottom:15px;}
.doc_link{text-align:center;}
.doc_link a{border:1px #aaa solid;border-radius:4px;padding:10px 14px;font-size:14px;color:#666;background:#fff;}
.box6{background:url("img/bg2.png") center center repeat-y;height:600px;padding:0px;}
.message_2{margin-bottom:42px;}
.message_2 ul li{float:left;display:inline;margin-left:20px;}
.message_2 ul li.li1{width:560px;margin-bottom:30px;}
.message_2 ul li.li2{width:580px;}
.message_2 ul li dl{overflow:hidden;margin:0px 30px 81px 30px;}
.message_2 ul li dl.dl2{margin-left:65px;}
.message_2 ul li dt{float:left;display:inline;}
.message_2 ul li .dl2 dt{float:right;display:inline;}
.message_2 ul li dd{font-size:14px;color:#fff;line-height:40px;width:210px;}
.message_2 ul li .dl1 dd{margin-left:270px;margin-top:42px;}
.message_2 ul li .dl2 dd{margin-right:42px;margin-top:60px;}
.box7{background:url("img/bg3.png") 0 43px repeat-x;padding:0px;height:840px;}
.steps_box{background:#f8f8f8;padding:35px 0px 30px 0px;}
.steps_box h5{margin-bottom:35px;margin-left:25px;}
.steps_info{text-align:center;margin:0px 29px;}
.steps_box span{width:321px;text-align:center;display:inline-block;}
.steps_box .span2{margin:0px 75px;}
.steps_box span a{display:inline-block;font-size:18px;width:321px;height:55px;line-height:55px;background:#53b9fa;border-radius:12px;color:#fff;text-align:center;margin-bottom:10px;}
.steps_box span em{font-size:12px;color:#999;font-style:normal;display:inline-block;height:38px;margin:0px 25px;}
.box8{padding:129px 0px 142px 0px;height:317px;background:#f7fbf3;}
.box8 h3{margin:0px 0px 40px 0px;color:#cacbcd;font-size:60px;}
.step_box{position:relative;width:877px;margin:0 auto;}
.step_box span{position:absolute;background:url("img/step_bg.png") 0 0 no-repeat;display:inline-block;height:78px;line-height:58px;color:#6dac00;font-size:18px;text-align:center;}
.step_box span.step1{top:0px;left:22px;width:119px;}
.step_box span.step2{top:0px;left:213px;width:178px;}
.step_box span.step3{top:0px;left:451px;width:199px;}
.step_box span.step4{top:0px;left:758px;width:119px;}
.step_box img{position:absolute;left:0px;top:91px;}
/*语音通话*/
.ft_banner2{width:100%;height:430px;background:url("img/banner7.png") center center;}
.voice_1{width:100%;text-align:center;}
.voice_1 .img{margin-bottom:60px;}
.box10{background:#404344;padding:0px;height:610px;}
.voice_2{width:1180px;position:relative;left:50%;margin-left:-590px;}
.voice_2 ul li{float:left;display:inline;height:610px;color:#fff;cursor:pointer;position:relative;}
.voice_2 ul li.li1{background:#4a9ebd}
.voice_2 ul li.li2{background:#4abdb9}
.voice_2 ul li.li3{background:#90d73d}
.voice_2 ul li.li4{background:#e3d02c}
.voice_2 ul li.li5{background:#e37e2c}
.voice_2 ul li.li6{background:#cc428d}
.voice_2 .fold{width:100px;height:100%;text-align:center;position:absolute;top:0px;left:0px;}
.voice_2 .fold .img{display:block;background:url("img/icon.png") 0 0 no-repeat;margin-bottom:20px;margin-top:236px;}
.voice_2 .li1 .fold .img{background-position:-482px -181px;width:56px;height:113px;margin:236px 20px 20px 20px;}
.voice_2 .li2 .fold .img{background-position:0 -417px;width:51px;height:138px;margin:236px 25px 28px 25px;}
.voice_2 .li3 .fold .img{background-position:-64px -413px;width:54px;height:142px;margin:239px 23px 20px 23px;}
.voice_2 .li4 .fold .img{background-position:-136px -204px;width:76px;height:96px;margin:276px 12px 26px 12px;}
.voice_2 .li5 .fold .img{background-position:-141px -420px;width:53px;height:116px;margin:259px 23px 24px 23px;}
.voice_2 .li6 .fold .img{background-position:-172px -306px;width:54px;height:104px;margin:270px 23px 25px 23px;}
.voice_2 .fold .txt{font-size:24px;display:block;width:25px;font-weight:normal;margin:0px 38px;line-height:25px;}
.voice_2 .unfold{width:680px;height:100%;display:none;position:absolute;top:0px;left:0px;}
.voice_2 .unfold dl{margin:50px 60px 0px 60px;}
.voice_2 .unfold dt{width:100%;text-align:center;margin-bottom:40px;}
.voice_2 .unfold dd{font-size:18px;line-height:35px;}
.voice_2 .unfold dd b{font-size:30px;font-weight:normal;}
.voice_2 .unfold dd b a{font-size:14px;display:inline-block;color:#fff;margin-left:40px;}
.box11 .item_box_wp .title{background:none;}
.voice_3{margin:58px 0px 50px 0px;overflow:hidden;}
.voice_3 ul li{float:left;display:inline;width:215px;margin-right:105px;text-align:center;}
.voice_3 ul li.li4{margin-right:0px;}
.voice_3 dt{background:url("img/icon.png") 0 0 no-repeat;}
.voice_3 ul li.li1 dt{background-position:-217px -430px;width:124px;height:109px;margin:27px 45px 20px 45px;}
.voice_3 ul li.li2 dt{background-position:-241px -295px;width:157px;height:125px;margin:10px 29px 20px 29px;}
.voice_3 ul li.li3 dt{background-position:-227px -146px;width:94px;height:135px;margin:0px 60px 20px 60px;}
.voice_3 ul li.li4 dt{background-position:-178px 0px;width:64px;height:100px;margin:36px 75px 20px 75px;}
.voice_3 dd{font-size:12px;color:#666;}
.voice_3 dd b{font-size:18px;color:#333;font-weight:normal;}
.voice_3 dd a{color:#666;display:inline-block;margin-top:10px;}
.ft_banner3{width:100%;height:430px;background:url("img/banner10.png") center center;}
分享到QQ
分享到微博
微信扫一扫
