客服弹出框
html代碼：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ在線客服jquery特效</title>
<link rel="stylesheet" type="text/css" href="common/css/layout.css" />
<script type="text/javascript" src="common/js/base.js"></script>
<script type="text/javascript" src="common/js/common.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<div class="ifltie">您使用的瀏覽器版本過低，為了您的資金安全和更好地用戶體驗(yàn)，建議立即升級(jí) <a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank">Internet Explorer</a> 或 <a href="https://www.google.com/intl/zh-CN/chrome/" target="_blank">Google Chrome</a></div>
<![endif]-->
<center>
<span style="font-size:15px; font-weight:bold; text-align:center; line-height:25px; color:#000; width:100%">jquery在線客服 <br />
</span>
</center>
<div class="suspend">
<dl>
<dt class="IE6PNG"></dt>
<dd class="suspendQQ"><a href="http://jq.qq.com/?_wv=1027&k=LohcW9" target="_blank"></a></dd>
<dd class="suspendTel"><a href="javascript:void(0);"></a></dd>
</dl>
</div>
<!--[if IE 6]><script type="text/javascript" src="common/js/IE6PNG.js"></script>
<script type="text/javascript">PNGmin.fix(".IE6PNG");</script><![endif]-->
<script type="text/javascript">
Common.init();
</script>
</body>
css代碼：
*{margin:0;padding:0}html,body {width:100%;height:100%;font-family:"Verdana","Microsoft Yahei","黑體";font-size:12px;line-height:20px;background:#ffffff;color:#454545;}a {font-family:"Verdana","Microsoft Yahei","黑體";font-size:12px;color:#454545;text-decoration:none;}a:hover {font-family:"Verdana","Microsoft Yahei","黑體";font-size:12px;color:#ce4e4e;text-decoration:none;}dl,dt,dd,h1,h2,h3,h4,h5,h6,p,ul,ul li,form,input,button,textarea {margin:0;padding:0;list-style-type:none;}img,form,input,button,textarea {border:0;outline:none;}img {display:block;}
.clear {zoom:1;clear:both;}.clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;overflow:hidden}.fl {float:left}.fr {float:right}.hide {display:none;}.oh {overflow:hidden;}
/* add */
.marked {color:#ed4646!important;}
.red {color:#ed4646!important;}
.blue {color:#03a8d9!important;}
.green {color:#91c53d!important;}
.greenNum {color:#7ca934!important;}
.gray {color:#888888!important;}
.blnone {border-left:none!important;}
.b1error {border:1px solid #ed4646!important;}
.bb1de {border-bottom:1px solid #e4e8ec!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mr10 {margin-right:10px!important;}
.ml10 {margin-left:10px!important;}
.MarkedA {color:#03a8d9!important;}
.MarkedB {color:#ed4646!important;}
.MarkedC {color:#91c53d!important;}
.MarkedD {color:#999999!important;}
/* ---- common ---- */
.section {width:100%;min-width:1200px;overflow:hidden;}
.container {width:1200px;margin:auto;}
/* headerData */
.headerData {width:100%;min-width:1200px;background:#f1f5f8 url(../images/headerDataLine.png) repeat-x;height:35px;}
.headerDataContainer {width:1200px;margin:auto;}
.realTimeData {float:left;}
.realTimeData li {float:left;margin-right:20px;}
.realTimeData li a {width:200px;height:35px;line-height:35px;display:block;background:url(../images/arrows.png) no-repeat right top;color:#ffffff;font-size:20px;}
.realTimeData li a span.realTimeDataLo {width:35px;height:35px;margin-right:10px;text-align:center;color:#ffffff;font-size:20px;float:left;display:block;background:url(../images/10Percent_0.png);}
.realTimeData li a:hover {background:url(../images/arrows.png) no-repeat right bottom;font-size:20px;color:#ffffff;}
.realTimeData li.btc {background:#03a8d9;}
.realTimeData li.ltc {background:#91c53d;}
.realTimeData li.stc {background:#e4c83f;}
.headerPlugin {height:35px;line-height:35px;float:right;border-right:1px solid #e4e8ec;}
.headerPlugin li {height:35px;float:left;border-left:1px solid #e4e8ec;padding:0 10px;}
.headerPlugin li.notice i {width:17px;height:16px;display:inline-block;float:left;margin:9px 5px 0 0;background:url(../images/icon.png);}
.headerPlugin li.notice a {max-width:200px;font-size:14px;color:#ed4646;overflow:hidden;}
.headerPlugin li.share i {width:15px;height:10px;margin-top:12px;background:url(../images/icon.png) 0 -20px;display:inline-block;}
.headerTell {height:35px;line-height:35px;font-size:16px;color:#888888;float:right;}
.headerTell span {width:16px;height:16px;float:left;margin:10px 5px 0 0;background:url(../images/tellLo.png);}
.qqService {width:95px;height:25px;background:url(../images/qqService.png) 0 -20px;display:block;float:right;margin:5px 20px 0 0;}
/* header */
#header {width:100%;height:110px;background:#ffffff;}
.header {width:100%;background:#ffffff;z-index:9999;position:relative}
.headerContainer {width:1200px;height:75px;margin:auto;position:relative;background:#ffffff;}
.logo {float:left;width:161px;height:44px;margin-top:8px;}
.logo a{width:161px;height:44px;background:url(../images/logo.png);background-size:100% 100%;display:block;}
.logo img {max-width:100%;}
.headerUser {float:right;height:28px;border:1px solid #e4e8ec;border-left:none;border-radius:3px;overflow:hidden;margin-top:23px;}
.headerUser a {height:28px;line-height:28px;padding:0 15px;text-align:center;border-left:1px solid #e4e8ec;display:inline-block;color:#888888;}
.headerUser a:hover {background:#f1f5f8;}
.headerUser a.headerUserBold {background:#f1f5f8;}
.headerUser a.headerUserBold:hover {background:#eeeeee;}
.headerAccount {width:150px;border:1px solid #e4e8ec;border-radius:3px;overflow:hidden;position:absolute;top:23px;right:0;z-index:9999;background:#f1f5f8;}
.headerAccount .headerAccountName a {height:28px;line-height:28px;padding:0 10px 0 15px;font-size:14px;display:block;color:#888888;}
.headerAccount .headerAccountName a i {width:14px;height:7px;line-height:7px;overflow:hidden;background:url(../images/icon.png) -30px -40px;display:inline-block;float:right;margin-top:10px;-webkit-transition: 0.3s all;-moz-transition: 0.3s all;-o-transition: 0.3s all;float:right;}
.headerAccount:hover .headerAccountName a i {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);}
.headerAccountGuide {border-top:1px solid #e4e8ec;display:none;z-index:9999;}
.headerAccountGuide a {display:block;height:25px;line-height:25px;padding:0 15px;}
.headerAccountGuide a:hover {background:#f4f4f4;}
.menu {width:auto;float:left;height:30px;line-height:30px;margin:24px 0 0 20px;background:#ffffff;}
.menu dt {float:left;}
.menu dt a,.menu dt a:hover,.menu dd a,.menu dd a:hover {height:30px;line-height:30px;padding:0 15px;font-weight:bold;display:inline-block;}
.menu dt a:hover,.menu dd a:hover,.menu dt.on a,.menu dd.on a {background:#f1f5f8;font-weight:bold;}
.menu dt a,.menu dt a:hover {font-size:18px;}
.highlight a,.highlight a:hover {color:#ed4646;}
.menu dt.menuBoundary {width:1px;height:18px;background:#e4e8ec;margin:7px 10px 0;}
.menu dd {float:left;}
.menu dd a,.menu dd a:hover {font-size:16px;}
/* ---- home ---- */
.sectionSlider {position:relative;}
/* slider */
.SliderPhoto {width:100%;height:330px;position:relative;border:1px solid #e4e8ec;z-index:9997;}
.SliderPhoto .SliderPhotoImg {width:100%;height:330px;margin:auto;position:relative;overflow:hidden;}
.SliderPhoto .SliderPhotoImg ul {width:100%;height:330px;position:relative;}
.SliderPhoto .SliderPhotoImg ul li {width:100%;height:330px;overflow:hidden;position:relative;}
.SliderPhoto .SliderPhotoImg ul li a {width:100%;height:330px;display:block;}
.SliderPhoto .SliderFocus {width:120px;position:absolute;bottom:10px;left:50%;margin-left:-60px;}
.SliderPhoto .SliderFocus span {width:10px;height:10px;line-height:10px;overflow:hidden;display:inline-block;border-radius:5px;background:#cccccc;margin:0 5px;}
.SliderPhoto .SliderFocus span.on {background:#ed4646;}
/* QRCode */
.QRCode {width:110px;height:200px;position:absolute;padding:15px 5px;background:#ffffff;border-radius:0 10px 10px 0;position:absolute;top:50px;left:50%;margin-left:470px;z-index:9998;}
/* accountHome */
.accountHome {width:280px;height:270px;background:url(../images/50Percent_0.png);border-radius:5px;overflow:hidden;position:absolute;top:30px;left:50%;margin-left:190px;z-index:9998;}
.accountHomeLogin {width:230px;margin:25px;}
.accountHomeFrom {margin-top:5px;}
.accountHomeFrom li {width:100%;margin-top:10px;}
.accountHomeFrom li .accountHomeFromText {width:210px;height:40px;line-height:40px;background:#ffffff;padding:0 10px;border-radius:3px;}
.accountHomeFrom li .accountHomeFromTextVC {width:100px;height:40px;line-height:40px;background:#ffffff;padding:0 10px;border-radius:3px;}
.accountHomeFrom li img {border-radius:3px;display:inline-block;margin-left:10px;*margin-top:-17px;}
.accountHomeFrom li .accountHomeFromButton {width:100%;height:40px;line-height:40px;color:#ffffff;font-size:18px;text-align:center;background:#ed4646;cursor:pointer;border-radius:3px;}
.accountHomeFrom li .accountHomeFromButton:hover {background:#dd4343;}
.accountHomeInfo {margin:25px;}
.accountHomeInfo dl {margin-bottom:20px;}
.accountHomeInfo dl dt {color:#ffffff;margin-bottom:5px;font-size:16px;}
.accountHomeInfo dl dd {height:25px;line-height:25px;color:#ffffff;font-size:14px;}
.accountHomeGuide {width:220px;}
.accountHomeGuide a {width:73px;height:30px;line-height:30px;font-size:16px;display:inline-block;}
.accountHomeGuide a:hover {font-size:16px;}
.accountHomeGuide a.guideTopup {color:#91c53d;}
.accountHomeGuide a.guideWithdraw {color:#ed4646;text-align:center;}
.accountHomeGuide a.guideSet {color:#03a8d9;text-align:right;}
.accountHomeGuide a i {width:20px;height:20px;display:inline-block;background:url(../images/dealBalanceGuide.png);margin:0 5px -4px 0;}
.accountHomeGuide a.guideTopup i {background-position:0 0;}
.accountHomeGuide a.guideWithdraw i {background-position:0 -30px;}
.accountHomeGuide a.guideSet i {background-position:0 -60px;}
/* data */
.sectionData {height:920px;position:relative;}
.dataBox {position:relative;border-bottom:1px solid #e4e8ec;}
.dataBox .data {position:relative;}
.dataBox .btc {padding:30px 0 70px;}
.dataBox .ltc {padding:70px 0 30px;}
.dataTbale {width:970px;height:360px;float:right;}
.dataShowGuide {width:200px;float:left;}
.dataShowGuide .dataShowTitle {height:36px;line-height:36px;font-size:30px;}
.dataShowGuide .dataShowTitle i {width:36px;height:36px;display:block;float:left;margin-right:10px;background:url(../images/coinLo.png);}
.dataBox .btc .dataShowTitle {color:#03a8d9;}
.dataBox .ltc .dataShowTitle {color:#91c53d;}
.dataBox .btc .dataShowTitle i {background-position:0 0;}
.dataBox .ltc .dataShowTitle i {background-position:0 -46px;}
.dataShowGuide .dataShowPrice {color:#ed4646;font-size:25px;margin-top:20px;}
.dataShowGuide .dataShowPrice b {font-size:30px;font-weight:normal;margin:0 2px;}
.dataShowGuide .dataShowEnter {width:150px;height:50px;margin-top:20px;}
.dataShowGuide .dataShowEnter a {width:150px;height:50px;line-height:50px;text-align:center;display:block;border-radius:50px;}
.dataBox .btc .dataShowEnter a,.data .btc .dataShowEnter a:hover,.dataBox .ltc .dataShowEnter a,.data .ltc .dataShowEnter a:hover {color:#ffffff;font-size:18px;}
.dataBox .btc .dataShowEnter a {background:#03a8d9;}
.dataBox .btc .dataShowEnter a:hover {background:#039cc9;}
.dataBox .ltc .dataShowEnter a {background:#91c53d;}
.dataBox .ltc .dataShowEnter a:hover {background:#84b337;}
.dataShowNumber {width:170px;margin-top:30px;}
.dataShowNumber li {height:35px;ine-height:35px;font-size:14px;}
.dataShowNumber li span {color:#ed4646;margin-left:10px;}
/* moveHome */
.moveHome {width:880px;height:101px;border:1px solid #e4e8ec;border-radius:20px;overflow:hidden;position:absolute;top:50%;left:50%;margin:-51px 0 0 -440px;z-index:9998;background:#f1f5f8 url(../images/1x1_de.gif) center repeat-x;}
.moveTableHome {margin:0 10px;}
.moveTableHome table {}
.moveTableHome table th,.moveTableHome table td {font-size:14px;height:50px;line-height:50px;}
.moveTableHome table th {font-weight:normal;}
a.moveMore {background:#e4e8ec;float:right;display:inline-block;width:50px;height:50px;border-radius:50px 0 0 50px;text-align:center;margin-right:-10px}
a.moveMore:hover {background:#e4e8ec;color:#ffffff;}
/* sectionInfo */
.sectionInfo {background:#f1f5f8 url(../images/infoHomeBg.png) repeat-y center;}
.infoHomeList {}
.infoHomeList li {width:299px;padding:30px 0;float:left;}
.infoHomeList li dl {margin:0 30px;}
.infoHomeList li dl dt {height:25px;line-height:25px;font-size:25px;text-align:center;margin-bottom:20px;overflow:hidden;}
.infoHomeList li dl dd {height:35px;line-height:35px;overflow:hidden;}
.infoHomeList li .infoHomeMore {text-align:center;margin-top:20px;}
.infoHomeList li .infoHomeMore a {width:120px;height:40px;line-height:40px;background:#e4e8ec;display:block;margin:auto;color:#888888;border-radius:3px;}
.infoHomeList li .infoHomeMore a:hover {background:#d5d9dc;}
/* sectionLink */
.sectionLink {border-top:1px solid #e4e8ec;}
.link {padding-top:20px;}
.link a {margin-left:20px;}
/* advantage */
.advantage {width:1200px;padding:30px 0;}
.advantage li {width:209px;height:105px;padding:0 45px;float:left;overflow:hidden;border-left:1px solid #e4e8ec;}
.advantage li span {height:40px;display:block;background:url(../images/advantage.png) no-repeat;}
.advantage li span.advantageSafe {background-position:0 0;}
.advantage li span.advantageEfficiency {background-position:0 -50px;}
.advantage li span.advantageRate {background-position:0 -100px;}
.advantage li span.advantageMission {background-position:0 -150px;}
.advantage li div {color:#888888;margin-top:20px;}
/* ---- deal ---- */
.entrustShow {height:30px;line-height:30px;border-radius:3px;background:#ed4646;color:#ffffff;padding:0 10px;cursor:pointer;position:absolute;top:23px;right:170px;-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s;transition-duration:0.3s;}
.entrustPressed {height:45px;border-radius:3px 3px 0 0;}
.entrustTable {width:100%;min-width:1200px;border-top:1px solid #e4e8ec;border-bottom:1px solid #e4e8ec;position:absolute;top:100px;background:#ffffff;box-shadow:0 3px 5px #aaaaaa;display:none;*position:absolute;z-index:8888;}
.entrustPageNav {width:100%;height:20px;overflow:hidden;text-align:center;margin:10px;}
.entrustPageNav li {display:inline-block;height:20px;}
.entrustPageNav li a,.entrustPageNav li b {padding:0 10px;height:20px;line-height:20px;display:inline-block;}
.entrustPageNav li a:hover {color:#454545;background:#eeeeee;}
.entrustPageNav li.on a,.entrustPageNav li.on b {color:#ffffff;background:#ed4646;}
.side {width:100px;float:left;}
.main {width:1100px;float:right;overflow:hidden;}
/* nav */
.nav {width:auto;}
.nav dt {height:25px;line-height:25px;font-size:14px;font-weight:bold;}
.nav dd {height:25px;line-height:25px;}
.nav dd a {background:url(../images/1x1_6.gif) no-repeat center left;padding-left:10px;}
.nav dd a:hover {color:#ed4646;}
/* dealDataBox */
.dealDataBox {height:430px;border:1px solid #e4e8ec;border-top:2px solid #ed4646;}
.dealData {width:940px;height:430px;overflow:hidden;float:left;}
.dealDataTable {height:325px;margin:0 15px 15px 15px;}
.dealDataPrice {height:60px;margin:15px;overflow:hidden;}
.dealDataPrice dt {height:36px;float:left;padding:12px 0;}
.dealDataPrice dt .dealDataPriceLo {width:36px;height:36px;line-height:36px;font-size:30px;}
.dealDataPrice dt .dealDataPriceLo i {width:36px;height:36px;display:block;float:left;background:url(../images/coinLo.png);}
.dealDataPrice dt .btc i {background-position:0 0;}
.dealDataPrice dt .ltc i {background-position:0 -46px;}
.dealDataPrice dt .dealDataPriceNumber {height:36px;line-height:36px;font-size:36px;color:#ed4646;display:inline-block;margin-left:20px;}
.dealDataPrice dt .dealDataPriceNumber span {font-size:14px;}
.dealDataPrice dd {width:130px;height:80px;line-height:30px;overflow:hidden;float:left;display:inline;}
.dealDataPrice dd span {font-size:16px;color:#ed4646;display:block;}
.dealBalance {width:200px;height:415px;padding:15px 20px 0;border-left:1px solid #e4e8ec;float:right;overflow:hidden;}
.dealBalanceNumber {width:200px;padding-bottom:20px;}
.dealBalanceNumber dt {font-size:14px;font-weight:bold;}
.dealBalanceNumber dd {padding-right:10px;margin-top:10px;}
.dealBalanceNumber dd.dealBalanceCNY {}
.dealBalanceNumber dd span {color:#ed4646;}
.dealBalanceTotal {height:30px;line-height:30px;padding:0 10px;margin:15px 0;background:#f1f5f8;border-radius:20px;}
.dealBalanceTotal span{font-size:16px;color:#ed4646;}
.dealBalanceGuide {width:200px;border-top:1px solid #e4e8ec;}
.dealBalanceGuide a {width:99px;height:40px;line-height:40px;text-align:center;font-size:16px;display:inline-block;}
.dealBalanceGuide a:hover {font-size:16px;}
.dealBalanceGuide a.guideTopup {color:#91c53d;border-right:1px solid #e4e8ec;}
.dealBalanceGuide a.guideWithdraw {color:#ed4646;}
.dealBalanceGuide a.guideSet {color:#03a8d9;border-right:none;}
.dealBalanceGuide a i {width:20px;height:20px;display:inline-block;background:url(../images/dealBalanceGuide.png);margin:0 5px -4px 0;}
.dealBalanceGuide a.guideTopup i {background-position:0 0;}
.dealBalanceGuide a.guideWithdraw i {background-position:0 -30px;}
.dealBalanceGuide a.guideSet i {background-position:0 -60px;}
/* dealRealTime */
.dealBox {border:1px solid #e4e8ec;}
.dealRealTime {width:310px;float:left;border-right:1px solid #e4e8ec;overflow:hidden;}
.dealRealTimeTableTitle {width:310px;height:40px;line-height:40px;}
.dealRealTimeTableTitle th {height:40px;background:#f1f5f8;text-align:left;padding-left:15px;overflow:hidden;border-bottom:1px solid #e4e8ec;}
.dealRealTimeTableScroll {width:310px;*width:290px;height:286px;overflow-y:scroll;}
.dealRealTimeBtc tael tr td span {color:#03a8d9;}
.dealRealTimeLtc tael tr td span {color:#91c53d;}
.dealRealTimeTable {width:100%;overflow:hidden;}
.dealRealTimeTable td {height:40px;line-height:40px;padding-left:15px;border-bottom:1px solid #e4e8ec;}
/* dealFrom */
.dealFrom {width:287px;float:left;overflow:hidden;}
.dealFromFirst {background:url(../images/1x1_de.gif) repeat-y right;}
.dealFromBuy .dealFromTitle {color:#91c53d;}
.dealFromSell .dealFromTitle {color:#ed4646;}
.dealFromTitle {height:40px;line-height:40px;border-bottom:1px solid #e4e8ec;padding-left:15px;font-size:14px;font-weight:bold;}
.dealFromTable {}
.dealFromTable th {padding-left:15px;font-weight:normal;text-align:left;}
.dealFromTable td {height:27px;padding:3px 0;}
.dealFromTable td .dealFromText {width:160px;height:25px;background:#f5f5f5;border:1px solid #e4e8ec;border-radius:3px;padding:0 5px;}
.dealFromTable td.dealFromButtonTd {width:262px;height:35px;padding:10px 0;}
.dealFromTable td .dealFromButtonBox{width:257px;height:35px;margin:0 15px;background:#ce4b44;border-radius:3px;padding:0;overflow:hidden;}
.dealFromTable td .dealFromButton {width:257px;height:30px;line-height:30px;background:#ed4646;color:#ffffff;border-radius:3px;cursor:pointer;font-size:16px;font-family:"Microsoft Yahei","黑體";}
.dealFromTable td .dealFromButton:hover {height:35px;line-height:35px;}
.dealFromBuy td .dealFromButtonBox {background:#84b337;}
.dealFromBuy td .dealFromButton {background:#91c53d;}
.dealFromSell td .dealFromButtonBox {background:#dd4343;}
.dealFromSell td .dealFromButton {background:#ed4646;}
/* dealRecord */
.dealRecord {border:1px solid #e4e8ec;overflow:hidden;}
.dealRecordTitle {height:40px;line-height:40px;padding-left:15px;background:#f1f5f8;border-bottom:1px solid #e4e8ec;}
.dealRecordTableScroll {*width:1180px;height:300px;overflow-y:scroll;}
/* accountManagement */
.tableManageFrom .Gobuy{width:200px;height:35px;background:#DF8900;border-radius:3px;display:block;overflow:hidden;}
.tableManageFrom .Gobuy a {width:200px;height:30px;line-height:30px;background:#ff9c00;color:#ffffff;border-radius:3px;cursor:pointer;font-size:16px;font-family:"Microsoft Yahei","黑體";display:block;text-align:center;}
.tableManageFrom .Gobuy a:hover {height:35px;line-height:35px;background:#ff9c00;}
.accountManagement {width:1198px;border:1px solid #e4e8ec;background:url(../images/148x1_de.gif) repeat-y;border-radius:3px;overflow:hidden;}
.sideManage {width:148px;float:left;}
.mainManage {width:1050px;float:right;overflow:hidden;}
/* navManage */
.navManage {width:auto;padding:10px 0 20px 0;}
.navManage dt {height:25px;line-height:25px;padding-left:30px;font-size:14px;font-weight:bold;}
.navManage dd {height:25px;line-height:25px;padding-left:30px;}
.navManage dd.on {background:#e4e8ec;}
.navManage dd a {background:url(../images/1x1_6.gif) no-repeat center left;padding-left:10px;}
.navManage dd a:hover {color:#ed4646;}
/* manageBox */
.mainManageBox {width:960px;margin:30px auto;}
.manageBox {}
.manageBoxTitle {border-bottom:2px solid #e4e8ec;padding-bottom:5px;}
.manageBoxTitle span {font-size:14px;font-weight:bold;}
.manageBoxTitle a.goHelp {color:#ed4646;margin-left:30px;display:inline-block;}
.manageBoxTitle a.goHelp i {width:14px;height:14px;float:left;margin:2px 3px 0 0;background:url(../images/icon.png) -30px -120px no-repeat;display:inline-block;}
/* manageTab */
.manageTab {height:40px;padding-bottom:0;}
.manageTab ul {height:39px;line-height:39px;float:left;background:#ffffff;border-right:1px solid #e4e8ec;border-top:1px solid #e4e8ec;}
.manageTab ul li {width:150px;float:left;border-left:1px solid #e4e8ec;text-align:center;font-size:16px;cursor:pointer;}
.manageTab ul li:hover,.manageTab ul li.on {background:#f1f5f8;}
/* userInfo */
.userInfo {}
.userInfo div {height:25px;line-height:25px;color:#888888;}
.userInfo div span {color:#454545;}
.safeLo {height:30px;line-height:30px;padding-left:20px;display:inline-block;}
.safeSucceed {background:url(../images/succeed.png) no-repeat left center;}
.safeNot {background:url(../images/not.png) no-repeat left center;}
/* ---- about ---- */
.aboutNav {background:#f1f5f8;text-align:center;padding:20px 0;}
.aboutNav a {height:30px;line-height:30px;border-radius:3px;overflow:hidden;margin:0 10px;padding:0 10px;display:inline-block;}
.aboutNav a.pressed,.aboutNav a:hover {background:#d5d9dc;color:#454545;}
.abooutDividing {width:100%;min-width:1200px;}
.abooutDividing1 {height:80px;background:url(../images/aboutBg1.gif) no-repeat;background-size:100% 100%;}
.abooutDividing2 {height:80px;background:url(../images/aboutBg2.gif) no-repeat;background-size:100% 100%;}
.abooutDividing3 {height:80px;background:url(../images/aboutBg3.gif) no-repeat;background-size:100% 100%;}
.abooutDividing4 {height:120px;background:url(../images/aboutBg4.gif) no-repeat;background-size:100% 100%;}
.aboutSection1 {background:#f1f5f8;}
.aboutSection2 {background:#e6f6df;}
.aboutSection3 {background:#f8f6df;}
.aboutSection4 {background:#f8e6f5;}
.aboutSection5 {background:#dfeef8;}
.about1,.about2,.about3,.about4,.about5,.aboutPic1,.aboutPic2..aboutPic3,.aboutPic4,..aboutPic5 {display:inline;}
.about1 {width:500px;}
.about2 {width:500px;}
.about3 {width:580px;}
.about4 {width:530px;}
.about5 {width:540px;}
.aboutPic1 {width:478px;height:342px;background:url(../images/about1.png);}
.aboutTitle1 {width:158px;height:40px;background:url(../images/aboutTitle1.png) no-repeat;}
.aboutPic2 {width:473px;height:336px;background:url(../images/about2.png);}
.aboutTitle2 {width:126px;height:40px;background:url(../images/aboutTitle2.png) no-repeat;}
.aboutPic3 {width:457px;height:292px;background:url(../images/about3.png);}
.aboutTitle3 {width:548px;height:40px;background:url(../images/aboutTitle3.png) no-repeat;}
.aboutPic4 {width:475px;height:336px;background:url(../images/about4.png);}
.aboutTitle4 {width:165px;height:40px;background:url(../images/aboutTitle4.png) no-repeat;}
.aboutPic5 {width:466px;height:340px;background:url(../images/about5.png);}
.aboutTitle5 {width:159px;height:40px;background:url(../images/aboutTitle5.png) no-repeat;}
.aboutText {line-height:30px;font-size:16px;font-family:"Microsoft Yahie","黑體";margin-top:20px;padding-left:10px;}
.aboutZzz {margin:50px 0;}
.aboutZzz dt {height:40px;line-height:40px;font-size:40px;font-family:"Microsoft Yahie","黑體";margin-bottom:30px;text-align:center;}
.aboutZzz dd {float:left;}
.footerAbout {background:#333333;color:#ffffff;text-align:center;padding:30px 0;}
/* ---- flow ---- */
.flowBox {background:url(../images/flowBg.png);padding:50px 0;text-align:center;}
.flowBox img {margin:auto;}
.flowIntro {font-size:14px;line-height:25px;}
.helpList {}
.helpList li {margin-bottom:10px;border-bottom:1px dotted #dddddd;padding-bottom:10px;}
.helpList li .helpListTitle {}
.helpList li .helpListTitle a {font-size:16px;font-family:"Microsoft Yahie","黑體";}
.helpList li .helpListText {margin-top:10px;color:#888888;}
/* ---- register ---- */
.registerScreen {width:1198px;border:1px solid #e4e8ec;background:#f1f5f8;border-radius:3px;overflow:hidden;}
.registerBox {width:900px;margin:30px auto;padding:20px 0 20px 100px;}
.registerBox table th {width:70px;}
.registerBox table td img {display:inline-block;margin-left:10px;}
.registerTitle {font-size:20px;font-family:"Microsoft Yahei","黑體";}
.agreement {color:#3e8ead;cursor:pointer;}
.agreement:hover {color:#ce4e4e;}
.agreementBox {padding:10px;border:1px solid #e4e8ec;background:#eeeeee;border-radius:3px;display:none;}
.radioService{padding:6px 0;}
.radioService li {float:left;margin-right:20px;}
/* ---- news ---- */
.newsList {}
.newsList li {height:40px;line-height:40px;border-bottom:1px dotted #e4e8ec;}
.newsList li a,.newsList li a:hover {font-size:14px;}
.newsList li span {float:right;color:#888888;}
.newsArticleTitle {font-size:20px;font-family:"Microsoft Yahei","黑體";}
.newsArticleTime {color:#888888;margin-top:10px;}
.newsArticleContent {font-size:14px;line-height:30px;margin-top:20px;}
/* ---- media ---- */
.mediaList {width:990px;}
.mediaList li {width:300px;height:270px;float:left;margin:30px 30px 0 0;display:inline;overflow:hidden;}
.mediaList li .mediaListPic {width:300px;height:200px;background:#aaaaaa;}
.mediaList li .mediaListTitle {height:30px;line-height:30px;font-size:16px;overflow:hidden;}
.mediaList li .mediaListText {height:40px;font-size:12px;color:#888888;overflow:hidden;}
/* ---- trade ---- */
.tradeTab {width:1198px;height:45px;border:1px solid #e4e8ec;position:relative;background:#f1f5f8;}
.tradeTab ul {height:36px;position:absolute;top:10px;left:20px;}
.tradeTab ul li {height:35px;line-height:30px;padding:0 30px;float:left;cursor:pointer;}
.tradeTab ul li a,.tradeTab ul li a:hover {font-size:16px;font-family:"Microsoft Yahei","黑體";}
.tradeTab ul li.on {line-height:28px;border:1px solid #e4e8ec;border-bottom:none;background:#ffffff;}
.tradePrompt {padding:5px 15px;border:1px solid #e4e8ec;border-top:none;}
.tradeTitle {height:25px;line-height:25px;font-size:20px;padding-left:15px;}
.tradeTitle span {font-size:25px;margin-right:10px;}
.tradeTable {border-top:2px solid #e4e8ec;}
.loUp,.loDown {width:8px;height:11px;display:inline-block;background:url(../images/icon.png);}
.loUp {background-position:-30px 0;}
.loDown {background-position:-30px -20px;}
.tradeTableLT td {text-decoration:line-through;}
.priceUp {background:#d7e3bc;}
.priceDown {background:#f2dcdb;}
/* ---- remind ---- */
.remind {height:30px;}
.remind li {height:30px;float:left;margin-right:20px;display:inline;}
.remind li span {height:30px;line-height:30px;display:inline-block;float:left;margin-right:5px;}
.remind li select.remindOptions {height:30px;line-height:30px;border:1px solid #e4e8ec;padding:2px 0;}
.remind li input.remindText {height:28px;line-height:28px;border:1px solid #e4e8ec;border-radius:3px;text-align:center;}
.remind li input.remindButton {width:100px;height:30px;line-height:30px;color:#ffffff;font-size:14px;background:#ed4646;border-radius:3px;}
.remindSwitch {width:130px;float:right;border-radius:3px;overflow:hidden;}
.remindSwitch a,.remindSwitch span {height:30px;line-height:30px;display:inline-block;text-align:center;}
.remindSwitch span {width:80px;}
.remindSwitch span.open {background:#91c53d;color:#ffffff;}
.remindSwitch span.close {background:#aaaaaa;color:#ffffff;}
.remindSwitch a {width:50px;background:#f1f5f8;}
/* ---- common ---- */
/* suspend */
.suspend {width:40px;height:198px;position:fixed;top:200px;right:0;overflow:hidden;z-index:9999;}
.suspend dl {width:120px;height:198px;border-radius:25px 0 0 25px;padding-left:40px;box-shadow:0 0 5px #e4e8ec;}
.suspend dl dt {width:40px;height:198px;background:url(../images/suspend.png);position:absolute;top:0;left:0;cursor:pointer;}
.suspend dl dd {}
.suspend dl dd.suspendQQ {width:120px;height:85px;background:#ffffff;}
.suspend dl dd.suspendQQ a {width:120px;height:85px;display:block;background:url(../images/suspend.png) -40px 0;overflow:hidden;}
.suspend dl dd.suspendTel {width:120px;height:112px;background:#ffffff;border-top:1px solid #e4e8ec;}
.suspend dl dd.suspendTel a {width:120px;height:112px;display:block;background:url(../images/suspend.png) -40px -86px;overflow:hidden;}
* html .suspend {position:absolute;left:expression(eval(document.documentElement.scrollRight));top:expression(eval(document.documentElement.scrollTop+200))}
/* totalAssets */
.totalAssetsPiece {width:100%;height:60px;}
.totalAssets {width:100%;height:30px;padding:15px 0;background:#333333;position:fixed;bottom:0;left:0;z-index:9998;}
*html .totalAssets{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
.totalAssetsBox {width:1200px;margin:auto;}
.totalAssetsWallet {font-size:14px;float:left;}
.totalAssetsWallet li {height:30px;line-height:30px;float:left;color:#ffffff;margin-right:20px;}
.totalAssetsWallet li span {height:30px;display:inline-block;margin-right:10px;}
.totalAssetsWallet li span.totalAssetsNumber {background:#222222;border-radius:3px;padding:0 20px;}
.totalAssetsWallet li span.totalAssetsNumber span {margin-right:0;}
.totalAssetsSerive {width:148px;height:28px;background:url(../images/service.png) 0 -70px;float:right;margin-top:1px;display:none;}
.totalAssetsSeriveQQ {width:103px;height:28px;float:right;margin:1px 20px 0 0;display:none;}
.totalAssetsSeriveQQ a {width:103px;height:28px;display:inline-block;background:url(../images/service.png) 0 -108px;}
.totalAssetsSeriveQQ a:hover {background:url(../images/service.png) 0 -146px;}
/* tab box */
.box .BoxContent {display:none;}
.box .BoxContent.on {display:block;}
/* result */
.result {padding-left:30px;width:500px;margin:100px auto;}
.succeed {border-left:5px solid #03a8d9;}
.error {border-left:5px solid #ed4646;}
.resultTitle {height:40px;line-height:40px;font-size:40px;font-family:"Microsoft Yahei","黑體";font-weight:normal;}
.succeed .resultTitle {color:#03a8d9;}
.error .resultTitle {color:#ed4646;}
.resultContent {color:#555555;margin-top:20px;line-height:25px;font-size:20px;font-family:"Microsoft Yahei","黑體";margin-right:30px;}
.resultContent a,.resultContent a:hover {font-size:20px;font-family:"Microsoft Yahei","黑體";}
/* reminder */
.reminder {margin-bottom:30px;}
.reminder h3 {font-size:14px;}
.reminder div {font-size:12px;}
/* filtrate */
.filtrate input {height:20px;background:#ed4646;border-radius:3px;color:#ffffff;margin-left:10px;padding:0 5px;cursor:pointer;}
.filtrate input:hover {color:#ffffff;background:#ce4b44;}
/* detailsTable */
.detailsTable {width:80%;height:auto;position:fixed;top:50%;left:50%;display:none;background:#ffffff;border:1px solid #cccccc;box-shadow:0 0 8px #aaaaaa;z-index:9999;}
.detailsTableBox {padding:20px;}
.closeDetailsTable {display:block;width:100%;height:30px;line-height:30px;text-align:center;color:#888888;background:#eeeeee;margin-top:20px;}
.closeDetailsTable:hover {background:#ce4e4e;color:#ffffff;}
/* fromResult */
.fromResult {padding-left:20px;}
.fromResultOk {color:#green;background:url(../images/succeed.png) no-repeat left;}
.fromResultWrong {color:#ce4e4e;background:url(../images/error.png) no-repeat left;}
/* table */
.table {}
.table tr th {font-size:14px;text-align:left;}
.table tr th,.table tr td {height:40px;line-height:40px;padding-left:15px;border-bottom:1px solid #e4e8ec;}
/* tableManage */
.tableManage {border:1px solid #e4e8ec;border-bottom:none;}
.tableManage tr th {height:40px;line-height:40px;font-size:14px;text-align:left;background:#f1f5f8;}
.tableManage tr th,.tableManage tr td {padding-left:15px;border-bottom:1px solid #e4e8ec;}
.tableManage tr td {height:30px;line-height:30px;padding-left:15px;border-bottom:1px solid #e4e8ec;}
/* ManageFrom */
.ManageFrom {margin:auto;background:#f1f5f8;padding:20px 0 20px 100px;}
.ManageFrom table {width:700px;}
.tableManageFrom {width:;}
.tableManageFrom {}
.tableManageFrom td .manageFromWay {height:50px;}
.tableManageFrom th {line-height:30px;color:#666666;font-weight:normal;text-align:right;padding-top:0;}
.tableManageFrom th,.tableManageFrom td {padding:10px 0;}
.tableManageFrom .manageFromWay a {width:150px;height:20px;line-height:20px;padding:15px 0;text-align:center;display:inline-block;background:#f1f5f8;border:2px solid #cccccc;margin-right:30px;}
.tableManageFrom .manageFromWay a span {width:40px;height:20px;display:inline-block;color:#ffffff;margin-left:5px;}
.tableManageFrom .manageFromWay a span.free {background:#aaaaaa;}
.tableManageFrom .manageFromWay a span.pay {background:#ed4646;}
.tableManageFrom .manageFromWay a:hover,.tableManageFrom .manageFromWay a.on {background:#f5f5f5;border:2px solid #ce4e4e;}
.tableManageFrom .manageFromTitle {line-height:30px;}
.tableManageFrom .manageFromReminder {font-size:12px;color:#888888;margin-top:10px;}
.tableManageFrom .manageFromReminderR {font-size:12px;color:#888888;}
.tableManageFrom .manageFromText {height:28px;line-height:28px;border:1px solid #cccccc;background:#ffffff;border-radius:3px;display:inline-block;padding:0 5px;}
.tableManageFrom .manageFromVoice {height:30px;line-height:30px;border-radius:3px;border:1px solid #cccccc;padding:0 10px;display:inline-block;font-size:12px;background:#eeeeee;cursor:pointer;}
.tableManageFrom .manageFromVoice:hover {background:#e4e8ec;}
.tableManageFrom .manageFromButtonBox{width:200px;height:35px;background:#ce4b44;border-radius:3px;display:inline-block;overflow:hidden;}
.tableManageFrom .manageFromButton {width:200px;height:30px;line-height:30px;background:#ed4646;color:#ffffff;border-radius:3px;cursor:pointer;font-size:16px;font-family:"Microsoft Yahei","黑體";}
.tableManageFrom .manageFromButton:hover {height:35px;line-height:35px;}
.tableManageFrom .manageFromButtonBoxBack {width:100px;height:35px;background:#777777;border-radius:3px;display:inline-block;overflow:hidden;}
.tableManageFrom .manageFromButtonBack {width:100px;height:30px;line-height:30px;background:#888888;color:#ffffff;border-radius:3px;cursor:pointer;font-size:16px;font-family:"Microsoft Yahei","黑體";margin-right:10px;}
.tableManageFrom .manageFromButtonBack:hover {height:35px;line-height:35px;}
.tableManageFrom .walletLocation {width:400px;padding:10px 0;text-align:center;background:#eeeeee;border:1px solid #cccccc;border-radius:3px;}
.tableManageFrom .walletLocation:hover {background:#e4e8ec;}
.tableManageFrom .manageFromSelect {width:271px;height:30px;line-height:30px;border:1px solid #cccccc;border-bottom:none;padding-left:10px;background:#f1f5f8;border-radius:3px 3px 0 0;display:block;}
.tableManageFrom .manageFromSelect option {height:25px;line-height:25px;vertical-align:middle;padding:0 10px;}
.topupFlow {margin:20px 0;}
/* bankChoice */
.bankChoice{width:490px;height:45px;border:1px solid #cccccc;padding:10px 0 10px 10px;background:#ffffff;border-radius:3px;position:relative;}
.bankChoice dt.bankChoiceMore {width:30px;height:30px;top:5px;border-radius:0 3px 3px 0;position:absolute;right:-31px;background:#ffffff;border:1px solid #cccccc;border-left:none;}
.bankChoice dt.bankChoiceMore:hover {background:#f5f5f5;}
.bankChoice dt.bankChoiceConfirm {display:none;overflow:hidden;}
.bankChoice dt.bankChoiceConfirm input {width:200px;height:35px;line-height:35px;background:#ce4e4e;border-bottom:5px solid #dddddd;cursor:pointer;color:#ffffff;font-size:16px;font-family:"Microsoft Yahei","黑體";text-align:center;display:block;margin:20px auto 0;}
.bankChoice dt.bankChoiceConfirm input:hover {height:30px;margin-top:25px;border-bottom:none;}
.bankChoice dt span {width:1px;height:1px;display:block;border:5px solid;border-color:#555555 #ffffff #ffffff #ffffff;margin:14px 0 0 10px;}
.bankChoice dt:hover span {border-color:#555555 #f1f5f8 #f1f5f8 #f1f5f8;}
.bankChoice dd {width:145px;float:left;display:inline;margin:5px 0;display:none;margin-left:10px;}
.bankChoice dd input{vertical-align:middle;width:13px;padding:0;margin-right:3px}
.bankChoice dd span{display:inline-block;vertical-align:middle;border:1px solid #cccccc;width:120px;height:35px;cursor:pointer}
/* grumble */
.grumble{position:absolute;background-image:url(../images/bubble-sprite.png);background-repeat:no-repeat;z-index:99999}.grumble-text{position:absolute;text-align:center;z-index:99999;display:table;overflow:hidden;text-transform:uppercase;font-size:14px;line-height:14px}.ie7 .grumble-text,.ie6 .grumble-text{display:block}.grumble-text .outer{display:table-cell;vertical-align:middle;color:white}.ie7 .grumble-text .outer,.ie6 .grumble-text .outer{display:block;width:85%;position:absolute;top:48%;left:0}.ie7 .inner,.ie6 .inner{position:relative;top:-50%}.grumble-text50 .outer{padding:6px}.grumble-text100 .outer{padding:8px}.grumble-text150 .outer{padding:10px}.grumble-text200 .outer{padding:12px}.grumble50{background-position:0 0}.grumble100{background-position:0 -50px}.grumble150{background-position:0 -150px}.grumble200{background-position:0 -300px}.alt-grumble50{background-position:-200px 0}.alt-grumble100{background-position:-200px -50px}.alt-grumble150{background-position:-200px -150px}.alt-grumble200{background-position:-200px -300px}.grumble-button{position:absolute;width:20px;height:12px;-moz-border-radius:3px;border-radius:3px;background:#ff5c00;color:#fff;text-align:center;font-size:.8em;line-height:.9em;-moz-box-shadow:1px 1px 1px #ccc;-webkit-box-shadow:1px 1px 1px #ccc;box-shadow:1px 1px 1px #ccc;cursor:pointer;z-index:99999}
/* login */
.loginFullScreen {width:100%;height:100%;background:url(../images/50Percent_0.png);position:fixed;top:0;z-index:9999;}
* html .loginFullScreen{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.login {width:350px;height:auto;background:#ffffff;border-radius:3px;overflow:hidden;position:absolute;top:50%;left:50%;}
.loginTitle {height:40px;line-height:40px;background:#f1f5f8;}
.loginTitle span {margin:0 20px;}
.loginTitle span.loginTitleText {font-size:16px;font-weight:bold;}
.loginTitle span.loginClose {font-size:20px;float:right;color:#aaaaaa;cursor:pointer;font-family:"宋體"}
.loginTitle span.loginClose:hover {color:#ed4646;}
.loginFrom {width:310px;margin:auto;padding-bottom:15px;}
.loginFrom li {margin-top:15px;}
.loginFrom li .loginFromText {width:288px;height:38px;padding:0 10px;line-height:38px;border:1px solid #e4e8ec;background:#f5f5f5;display:inline-block;}
.loginFrom li .loginFromTextVC {width:158px;height:38px;padding:0 10px;line-height:38px;border:1px solid #e4e8ec;background:#f5f5f5;display:inline-block;}
.loginFrom li .loginFromButtonBox{width:100%;height:40px;background:#ce4b44;border-radius:3px;}
.loginFrom li .loginFromButton {width:100%;height:35px;line-height:35px;background:#ed4646;color:#ffffff;border-radius:3px;cursor:pointer;font-size:16px;font-family:"Microsoft Yahei","黑體";}
.loginFrom li .loginFromButton:hover {height:40px;line-height:40px;}
.loginFrom li img {display:inline-block;margin-left:10px;}
/* popup */
#popup {width:100%;height:100%;background:url(../images/50Percent_0.png);position:fixed;top:0;left:0;z-index:9999;}
* html #popup {position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.popupFrame {width:500px;height:auto;background:url(../images/50Percent_0.png);padding:5px;border-radius:3px;position:absolute;top:50%;left:50%;}
.popupBox {width:500px;height:auto;background:#fefefe;border-radius:3px;overflow:hidden;position:relative;}
.popupContent {margin:50px 0;}
.popupReminder {border-left:5px solid #454545;margin:auto;padding-left:30px;}
.popupReminder h3 {height:30px;line-height:30px;font-size:30px;font-family:"Microsoft Yahei","黑體";color:#333333;font-weight:normal;color:#454545;}
.popupReminder div {font-size:16px;margin-top:20px;font-family:"Microsoft Yahei","黑體";color:#555555;}
.popupReminder div a,.popupReminder div a:hover {font-size:16px;margin-top:20px;font-family:"Microsoft Yahei","黑體";color:#555555;}
.popupError {border-left:5px solid #ed4646;}
.popupError h3 {color:#ed4646;}
.popupSucceed {border-left:5px solid #03a8d9;}
.popupSucceed h3 {color:#03a8d9;}
a.popupClose {width:40px;height:40px;display:block;cursor:pointer;background:url(../images/close.png) 0 0;position:absolute;right:5px;bottom:5px;}
a.popupClose:hover {background:url(../images/close.png) 0 -41px;}
.indicate {width:22px;height:18px;background:url(../images/indicate.gif); display:inline-block;margin-bottom:-3px;}
/* ifltie */
.ifltie {height:30px;line-height:30px;background:#ce4e4e;color:#ffffff;text-align:center;}
.ifltie a {color:#ffd9d9;}
.ifltie a:hover {color:#ffffff;}
/* footer */
#footer {width:100%;border-top:1px solid #e4e8ec;margin-top:20px;}
.footerContainer {width:1200px;margin:auto;padding:30px 0;}
.footerInfo {width:830px;height:100px;position:relative;overflow:hidden;}
.footerInfo .footerInfoAvatar {width:96px;height:96px;border:2px solid #e4e8ec;border-radius:78px;overflow:hidden;background:#f1f5f8;position:absolute;top:0;left:0;}
.footerInfo .footerInfoAvatar a {width:96px;height:96px;display:block;background:url(../images/footerInfoLogo.png) no-repeat center;}
.footerInfo .footerInfoTitle {padding-left:110px;margin-top:20px;height:20px;font-size:16px;padding-bottom:10px;border-bottom:2px solid #e4e8ec;}
.footerInfo .footerInfoText {padding-left:110px;height:auto;margin-top:10px;}
.footerInfo .footerInfoText span {margin-right:30px;}
.footerHelp {width:300px;float:right;text-align:right;margin-top:30px;color:#888888;}
.footerHelp a {color:#888888;}
.footerWarning {text-align:center;color:#888888;text-align:center;padding:15px 0;background:#f1f5f8;}
/* 平板電腦和小屏電腦之間的分辨率 */
@media (max-width: 1200px) {
.totalAssetsBox {width:100%;margin:auto;}
.totalAssetsWallet {margin-left:10px;}
.totalAssetsWallet li.mo2 {display:none;}
.totalAssetsSerive {margin-right:10px;}
}
/* 橫向放置的手機(jī)和豎向放置的平板之間的分辨率 */
@media (max-width: 800px) {
.totalAssetsWallet li.mo1 {display:none;}
}
js代碼：
var popupHtml = "<div id='popup' class='IE6PNG'><div class='popupFrame'><div class='popupBox'><a class='popupClose IE6PNG'></a><div class='popupContent'></div></div></div></div>";
var userAgent = navigator.userAgent.toLowerCase();
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
var is_safari = (userAgent.indexOf('webkit') != -1 || userAgent.indexOf('safari') != -1);
var Common = new Object();
Common.htmlEncode = function(str)
{
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
Common.trim = function(str)
{
return str.replace(/(^\s*)|(\s*$)/g, "");
}
Common.strlen = function(str) {
if (is_moz)
{
Charset = document.characterSet;
}
else
{
Charset = document.charset;
}
if (Charset.toLowerCase() == 'utf-8')
{
return str.replace(/[\u4e00-\u9fa5]/g, "***").length;
}
else
{
return str.replace(/[^\x00-\xff]/g, "**").length;
}
}
Common.init = function() {
$(function() {
$("#getphonecode").on("click", function() {
var url = '/account/getPhocode';
var phone = '';
$.post(url, {mobile: phone}, function(data) {
if (data.result) {
Almessage(data.result, data.message);
//warning(data.message);
getnextCode();
}
}, 'json');
});
$("#mobilecode").on("blur", function() {
var code = $('#mobilecode').val();
if (code.length == 6) {
var url = '/account/checkmobileCode'
$.post(url, {code: code}, function(data) {
$('#codemessage').html(data.result);
}, 'json');
}
});
$('.menu').find('li').removeClass('on');
var navsele = $('#navselect').val();
$('#nav_' + navsele).addClass('on');
//changer
$(".tab ul li:first-child").addClass("on");
$(".box .BoxContent:first-child").addClass("on");
$(".tab ul li").hover(function() {
$(this).addClass("on").siblings().removeClass("on");
var $box = $(this).closest(".tab").siblings(".box").find(".BoxContent");
var index = $(this).index();
$box.eq(index).show().siblings().hide();
});
});
//changer
$(".tab ul li:first-child").addClass("on");
$(".box .BoxContent:first-child").addClass("on");
$(".tab ul li").hover(function() {
$(this).addClass("on").siblings().removeClass("on");
var $box = $(this).closest(".tab").siblings(".box").find(".BoxContent");
var index = $(this).index();
$box.eq(index).show().siblings().hide();
});
$(".suspend").mouseover(function() {
$(this).stop();
$(this).animate({width: 160}, 400);
})
$(".suspend").mouseout(function() {
$(this).stop();
$(this).animate({width: 40}, 400);
})
//headerAccount
$(".headerAccount").mouseenter(function() {
$(this).find(".headerAccountGuide").show();
});
$(".headerAccount").mouseleave(function() {
$(this).find(".headerAccountGuide").hide();
});
topbar("#topbar");
$(window).resize(function() {
topbar("#topbar");
});
//bankChoice
$(".bankChoice dd:lt(3)").show();
$(".bankChoice .bankChoiceMore").click(function() {
$(".bankChoice").css("height", "auto");
$(".bankChoice dd").show();
});
var chosebank = $("#chosebank").attr("value");
$("#" + chosebank).siblings("span").css("border", "1px solid #e15b54");
$("#" + chosebank).attr("checked", true).parent("dd").prependTo(".bankChoice");
;
$(".bankChoice dd input[type=radio]").click(function() {
$(this).parent("dd").prependTo(".bankChoice");
$("#chosebank").val($(this).attr('id'));
var span = $(this).siblings("span");
span.css("border", "1px solid #e15b54").parent("dd").siblings("dd").find("span").css("border", "1px solid #cccccc")
$(".bankChoice").css("height", "45px");
$(".bankChoice dd:gt(2)").hide();
});
//centered
function centered(option) {
var loginWidth = $(option).width();
var loginHeight = $(option).height();
var marginTop = loginHeight / 2;
var marginLeft = loginWidth / 2;
$(option).css({"margin-top": -marginTop + "px", "margin-left": -marginLeft + "px"});
}
//login
centered(".login");
$(window).resize(function() {
centered(".login");
});
//register agreement
$(".agreement").click(function() {
$(this).siblings(".agreementBox").toggle(300);
});
//details
centered(".detailsTable");
$(window).resize(function() {
centered(".detailsTable");
});
$(".details").click(function() {
$(".detailsTable").show(200);
});
$(".closeDetailsTable").click(function() {
$(".detailsTable").hide(200);
});
}
//Slider
$(function() {
var SliderPhoto = $(".Slider .SliderBox ul li").height();
var len = $(".Slider .SliderBox ul li").length;
var index = 0;
var picTimer;
$(".SliderFocus span").mouseenter(function() {
index = $(".SliderFocus span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$(".Slider .prev").click(function() {
index -= 1;
if (index == -1) {
index = len - 1;
}
showPics(index);
});
$(".Slider .next").click(function() {
index += 1;
if (index == len) {
index = 0;
}
showPics(index);
});
$(".Slider .SliderBox ul").css("height", SliderPhoto * (len));
$(".Slider").hover(function() {
clearInterval(picTimer);
}, function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if (index == len) {
index = 0;
}
}, 2800);
}).trigger("mouseleave");
function showPics(index) {
var nowTop = -index * SliderPhoto;
$(".Slider .SliderBox ul").stop(true, false).animate({"top": nowTop}, 500);
$(".SliderFocus span").stop(true, false).removeClass("on").eq(index).stop(true, false).addClass("on");
}
});
// suspension
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0,
"box-shadow": "0 0 8px #aaaaaa"
});
} else {
element.css({
top: scrolls
});
}
;
} else {
element.css({
position: pos,
top: top,
"box-shadow": "none"
});
}
;
});
};
return $(this).each(function() {
position($(this));
});
};
function suspension(suspension) {
var screenWidth = $(window).width();
if (screenWidth > 1200) {
$(suspension).smartFloat();
} else {
$(suspension).removeAttr("style");
$(window).scroll(function() {
$(suspension).removeAttr("style");
});
}
}
suspension("#suspension");
$(window).resize(function() {
suspension("#suspension");
});
//topbar
function topbar(topbar) {
var T = 100,
t = 0,
navVar = false;
$(window).scroll(function() {
var t = $(window).scrollTop();
var screenWidth = $(window).width();
if (screenWidth > 1200) {
if (t < T) {
T = t + 1;
if (t < 2) {
$(topbar).removeAttr("style");
navVar = true;
return;
}
if (navVar)
return;
else {
$(topbar).css({
position: "fixed",
top: 0,
"box-shadow": "0 0 8px #aaaaaa"
});
navVar = true;
}
} else {
T = t;
if (!navVar)
return;
else {
$(topbar).removeAttr("style");
navVar = false;
}
}
} else {
$(topbar).removeAttr("style");
}
});
}
function Almessage(type, message, url) {
$("body").append(popupHtml).show();
//$(".vessel").append(popupHtml).show();
popupContent = $(".popupContent");
var classname = type == 1 || type == 6 ? 'popupSucceed' : 'popupError';
var etitle = type == 1 ? '操作成功' : '操作有誤';
etitle = type == 3 ? '訂單詳情' : etitle;
etitle = type == 6 ? '充值訂單生成成功' : etitle;
var ohtml = '';
if (type == 4) {
ohtml = "<br /><a href=" + url + " class='MarkedB'>點(diǎn)擊進(jìn)入>></a>"
}
if (type == 6) {
ohtml = ""
}
var html = "<div class='popupReminder " + classname + "'><h3>" + etitle + "</h3><div>" + message + ohtml + "</div></div>";
popupContent.html(html);
centered(".popupFrame");
$(window).resize(function() {
centered(".popupFrame");
});
$(".popupClose").click(function() {
$("#popup").remove().hide();
});
}
function redirect(url)
{
if (url.lastIndexOf('/.') > 0)
{
url = url.replace(/\/(\.[a-zA-Z]+)([0-9]+)$/g, "/$2$1");
}
else if (url.match(/\/([a-z]+).html([0-9]+)$/)) {
url = url.replace(/\/([a-z]+).html([0-9]+)$/, "/$1-$2.html");
}
else if (url.match(/-.html([0-9]+)$/)) {
url = url.replace(/-.html([0-9]+)$/, "-$1.html");
}
if (url.indexOf('://') == -1 && url.substr(0, 1) != '/' && url.substr(0, 1) != '?')
url = $('base').attr('href') + url;
location.href = url;
}
function RegTest(reg, value) {
return reg.test(value);
}
//壞數(shù)字
function badFloat(num, size) {
if (isNaN(num))
return true;
num += '';
if (-1 == num.indexOf('.'))
return false;
var f_arr = num.split('.');
if (f_arr[1].length > size) {
return true;
}
return false;
}
// JavaScript Document
//格式化小數(shù)
//@f float 傳入小數(shù): 123; 1.1234; 1.000001;
//@size int 保留位數(shù)
//@add bool 進(jìn)位: 0舍 1進(jìn)
function formatfloat(f, size, add) {
f = parseFloat(f);
var conf = ['100000', '0.00001'];
switch (size) {
case 2:
conf = ['100', '0.01'];
break;
case 3:
conf = ['1000', '0.001'];
break;
case 5:
conf = ['100000', '0.00001'];
break;
default:
conf = ['100000', '0.00001'];
break;
}
var ff = Math.floor(f * parseFloat(conf[0])) / parseFloat(conf[0]);
if (add && f > ff)
ff += conf[1];
return ff;
}
function vNum(o, len) {
if (badFloat(o.value, len))
o.value = formatfloat(o.value, len, 0);
}
function clearNoNum(obj) {
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"數(shù)字"和"."以外的字符
obj.value = obj.value.replace(/^\./g, ""); //驗(yàn)證第一個(gè)字符是數(shù)字而不是.
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一個(gè). 清除多余的.
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
}
function getnextCode()
{
secs = 30; // Number of secs to delay -CHINA-studio
wait = secs * 1000;
$('#getphonecode').attr('disabled', true);
for (i = 1; i <= (wait / 1000); i++) {
window.setTimeout("doUpdate(" + i + ")", i * 1000);
}
window.setTimeout("Timer()", wait);
}
function doUpdate(num) {
if (num == (wait / 1000)) {
$('#getphonecode').val("獲取語音驗(yàn)證碼");
} else {
wut = (wait / 1000) - num;
$('#getphonecode').val("等待(" + wut + ")");
}
}
function Timer() {
$('#getphonecode').attr('disabled', false);
}
//centered
function centered(option) {
var loginWidth = $(option).width();
var loginHeight = $(option).height();
var marginTop = loginHeight / 2;
var marginLeft = loginWidth / 2;
$(option).css({"margin-top": -marginTop + "px", "margin-left": -marginLeft + "px"});
}
轉(zhuǎn)載于:https://www.cnblogs.com/tuhailin/p/5629920.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
- 上一篇： C#制作简易屏保
- 下一篇： [Openwrt 项目开发笔记]：USB