以下是 jquery常见问答faq特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery常见问答faq特效</title>
<link href="css/FIQ.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".zk").hide();
var u_num = getQueryString('u_sea');
if(u_num == 0 || u_num == null || u_num < 0 || u_num > 25){
u_num = 1;
}
//$("#zk_"+u_num).slideToggle();
//$("#"+u_num).addClass('xz');
$(".clik").click(function(){
var u_class = $(this).attr('class');
if(u_class == 'clik'){
$(this).addClass('xz');
}else{
$(this).removeClass('xz');
}
var zk_id = '#zk_'+$(this).attr('id');
$(zk_id).slideToggle(200);
return false;
});
});
function getQueryString(paras){
var url = location.href;
var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
var paraObj = {}
for (i=0; j=paraString[i]; i++){
paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);
}
var returnValue = paraObj[paras.toLowerCase()];
if(typeof(returnValue)=="undefined"){
return "";
}else{
return returnValue;
}
}
</script>
</head>
<body>
<div id="wrap">
<div class="com">
<div class="top">
</div>
<div class="search">
<div class="L_q"><p>常见问题</p></div>
<div class="R_q">
<a href="#" class="ser" onfocus="this.blur()" onclick="javascript:u_search();"></a>
<input id="user_key" type="text" name="textfield" onkeydown="return SubmitKeyClick(this,event)">
</div>
</div>
<div class="con_info">
<div class="info_left">
<ul class="dh">
<li class="xz"><a href="#">产品简介</a></li>
<li class=""><a href="#">功能介绍</a></li>
<li class=""><a href="#">常见问题</a></li>
</ul>
</div>
<div class="info_right">
<div class="liebiao">
<ul>
<li id="1" class="clik"><a class="link" href="#"><span class="num">1</span>什么是快播，快播有什么特点？</a></li>
<li id="zk_1" class="zk">
<div class="zk_con">
<div class="pc_1"></div>
<div class="pc_2">
<p></p>
<p><p><span style="font-size: smaller">快播播放器(Qvod Player)是一款基于准视频点播(QVOD)内核的，集在线点播、在线直播及本地播放于一体的全能播放器。 </span></p>
<p><span style="font-size: smaller">快播运用自主研发的QVOD 流媒体传输协议，率先实现了高清视频在互联网络的流畅播放。</span></p>
<p><span style="font-size: smaller">快播支持RMVB、MPEG、AVI、WMV等主流音视频格式，具有资源占用低、操作简捷、运行效率高，扩展能力强等特点，是目前国内最受欢迎的全能播放器。</span></p></p>
<p></p>
</div>
<div class="pc_3"></div>
</div>
</li>
<li id="2" class="clik"><a class="link" href="#"><span class="num">2</span>快播在哪里下载最新版？</a></li>
<li id="zk_2" class="zk">
<div class="zk_con">
<div class="pc_1"></div>
<div class="pc_2">
<p></p>
<p><p class="MsoListParagraph" style="text-indent: 0cm; margin-left: 18pt; mso-char-indent-count: 0"><span style="font-size: smaller"><span style="font-family: 宋体; color: black">打开快播官网主页</span></span><span lang="EN-US"><a target="_blank" href="#"></a></span><span style="font-size: smaller"><span style="font-family: 宋体; color: black">可下载安装程序。</span></span></p>
<p class="MsoListParagraph" style="text-indent: 0cm; margin-left: 18pt; mso-char-indent-count: 0"><span lang="EN-US" style="font-family: "Arial","sans-serif"; color: black; mso-bidi-font-size: 10.5pt"><o:p></o:p></span></p></p>
<p></p>
</div>
<div class="pc_3"></div>
</div>
</li>
<li id="3" class="clik"><a class="link" href="#"><span class="num">3</span>网络任务丢失后，DATA文件夹下的种子文件是否可以直接打开继续下载？</a></li>
<li id="zk_3" class="zk">
<div class="zk_con">
<div class="pc_1"></div>
<div class="pc_2">
<p></p>
<p><p class="MsoListParagraph" style="text-indent: 0cm; margin-left: 18pt; mso-char-indent-count: 0"><span style="font-size: smaller"><span style="font-family: 宋体">Data文件夹下的.torrent文件是点播电影的下载进度信息文件，不被其它BT软件识别。此类文件不会上传，也不会影响电脑正常使用。</span></span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent: 0cm; margin-left: 18pt; mso-char-indent-count: 0"><span style="font-size: smaller"><span style="font-family: 宋体">如果出现网络任务丢失的情况，是无法通过Data文件夹下的文件继续下载，请重新点播。</span></a></span> </p>
<p class="MsoListParagraph" style="text-indent: 0cm; margin-left: 18pt; mso-char-indent-count: 0"><span style="font-size: smaller"><span lang="EN-US"><o:p> </o:p></span></span><span lang="EN-US"><o:p></o:p></span><b><span lang="EN-US"><o:p></o:p></span></b></p>
<p></p>
</div>
<div class="pc_3"></div>
</div>
</li>
<li id="4" class="clik"><a class="link" href="#"><span class="num">4</span>快播苹果(IOS)版的电影如何传到电脑上</a></li>
<li id="zk_4" class="zk">
<div class="zk_con">
<div class="pc_1"></div>
<div class="pc_2">
<p></p>
<p><p><span style="font-size: smaller">由于苹果产品的原因目前还不支持把IOS设备里的视频传到电脑里观看。</span></p></p>
<p></p>
</div>
<div class="pc_3"></div>
</div>
</li>
</ul>
</div>
<div class="pagin_user" style="text-align:center;margin: 20px 0 0;">
<!-- 显示页数 -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码(FIQ.css):
body{margin:0px;padding:0px;font-size:12px;color:#454545;font-family:Verdana;}
body{background:url(bg.gif) repeat-x center top;background-color:#F5F7F6;}
div,form,img,ul,ol,li,dl,dt,dd,h1,h2,h3,p{margin:0px;padding:0px;border:0px;}
input,textarea,select{font-size:12px;color:#121212;}
li{list-style-type:none;text-align:left;}
/* links */
a:link{color:#454545;text-decoration:none;}
a:visited{color:#454545;text-decoration:none;}
a:hover{color:#ff6600;text-decoration:none;}
a:active{color:#454545;}
/* top */
.com{width:896px;margin:0px auto;}
#wrap{MARGIN:0px auto;WIDTH:expression((document.documentElement.clientWidth>1920||document.body.clientWidth>1920)?"1920px":"100%",(document.documentElement.clientWidth<=1000||document.body.clientWidth<=1000)?"1000px":"100%");max-width:1920px;min-width:1000px;background:url(top_bg.jpg) no-repeat center top;position:relative}
.top{width:100%;height:69px;color:#666768;text-align:right;}
.logo_links{width:300px;height:69px;display:block;float:left;}
.top span{width:500px;float:right;display:block;line-height:21px;padding-top:15px;}
.search{height:36px;clear:both;}
.L_q{width:165px;height:36px;background:url(fiq.gif) no-repeat left top;float:left;}
.L_q p{font-size:14px;font-weight:bold;color:#FFFFFF;padding:12px 0 0 15px;*padding-top:13px;}
.R_q{width:299px;height:28px;background:url(fiq.gif) no-repeat left -38px;float:right;margin-top:4px;}
.R_q input{width:235px;height:28px;line-height:28px;border:0px;background:none;float:left;padding-left:5px;color:#666666;}
a.ser{width:54px;height:28px;display:inline-block;float:right;}
.con_info{clear:both;width:896px;}
.info_left{float:left;width:172px;height:234px;background:url(fiq.gif) no-repeat left -68px;}
.dh{width:160px;padding-left:12px;padding-top:10px;}
.dh li{width:143px;height:30px;line-height:30px;padding-left:17px;float:left;font-size:14px;background:url(fiq.gif) no-repeat 0px -364px;}
.dh li.xz{background:url(fiq.gif) no-repeat 0px -334px;color:#1090BF;}
.dh li a:link{color:#454545;text-decoration:none;}
.dh li a:visited{color:#454545;text-decoration:none;}
.dh li a:hover{color:#ff6600;text-decoration:none;}
.dh li.xz a:link{color:#128EC1;text-decoration:none;}
.dh li.xz a:visited{color:#128EC1;text-decoration:none;}
.dh li.xz a:hover{color:#ff6600;text-decoration:none;}
.info_right{float:right;width:716px;}
.liebiao{width:100%;margin-top:7px;overflow:hidden;}
.liebiao li{width:716px;height:33px;background:url(right_bg.gif) no-repeat left 0px;margin-top:3px;font-size:14px;}
.liebiao li .num{width:34px;height:33px;line-height:33px;display:inline-block;text-align:center;margin-right:10px;}
.liebiao li .link{width:716px;height:33px;display:block;}
.liebiao li.xz{background:url(right_bg.gif) no-repeat left -36px;font-weight:bold;}
.liebiao li.zk{background:none;height:auto;}
.zk_con{width:716px;clear:both;}
.zk_con .pc_1{width:716px;height:10px;overflow:hidden;background:url(right_bg.gif) no-repeat left -72px;}
.zk_con .pc_2{width:700px;border-left:1px solid #C8E1E8;color:#595959;line-height:28px;font-size:14px;font-weight:normal;background-color:#FFFFFF;border-right:1px solid #C8E1E8;padding:10px 4px 10px 10px;}
.zk_con .pc_3{width:716px;height:4px;overflow:hidden;background:url(right_bg.gif) no-repeat left -85px;}
.foot{width:896px;height:80px;text-align:center;display:inline-block;line-height:22px;clear:both;margin-top:50px;background:url(foot_bg.gif) repeat-x center top;}
div.list-pager{position:absolute;top:0px;right:0px;}
.pagin_user{clear:both;text-align:center;padding:10px 0px 0px;margin:10px 0px 0px;}
.prev{margin-right:4px;display:inline-block;}
.pagin_user a{color:#666666!important;display:-moz-inline-box;display:inline-block;vertical-align:middle;border:1px solid #cccccc;width:auto!important;min-width:12px;width:12px;height:20px;line-height:20px;text-align:center;white-space:nowrap;overflow:visible;padding:0px 4px;}
.pagin_user .disabled{margin-right:4px;color:#666666!important;display:-moz-inline-box;display:inline-block;vertical-align:middle;border:1px solid #cccccc;width:auto!important;min-width:12px;width:12px;height:20px;line-height:20px;text-align:center;white-space:nowrap;overflow:visible;padding:0px 4px;}
.pagin_user .current{color:#FFFFFF!important;border:none;background-color:#999999;border:1px solid #999999;display:inline-block;height:20px;line-height:20px;min-width:12px;overflow:visible;padding:0 4px;text-align:center;vertical-align:middle;white-space:nowrap;width:auto !important;}
.pagin_user a:hover{text-decoration:none;border:1px solid #666666;color:#394247!important;}
分享到QQ
分享到微博
微信扫一扫
