以下是 三图并列jquery焦点图代码轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为三图并列jquery焦点图代码" />
<title>三图并列jquery焦点图代码</title>
<link href="css/zsucai.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<div class="wrapper top-main clearfix">
<div class="main tab mt15">
<!--切换图片-->
<div class="slide">
<ul id="bigSlideUl" class="slide-ul clearfix">
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" src="images/1369383598982.jpg" alt="可爱的手机壁纸下载" />
<span class="pic-txt">可爱的手机壁纸下载(11张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" src="images/1353485118249.jpg" alt="清纯非主流美女高清壁纸" />
<span class="pic-txt">清纯非主流美女高清壁(10张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" src="images/1355218285736.jpg" alt="精选唯美风景手机壁纸" />
<span class="pic-txt">精选唯美风景手机壁纸(5张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1355742153253.jpg" alt="最新热门美女写真高清壁纸" />
<span class="pic-txt">最新热门美女写真高清(7张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1355468691609.jpg" alt="最新海贼王可爱动漫iPhone壁纸" />
<span class="pic-txt">最新海贼王可爱动漫i(8张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1354614801743.jpg" alt="卡通Q版手机壁纸" />
<span class="pic-txt">卡通Q版手机壁纸(8张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1372402137127.jpg" alt="经典动漫海贼王手机壁纸" />
<span class="pic-txt">经典动漫海贼王手机壁(10张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1370761386641.jpg" alt="文艺范高清卡通壁纸" />
<span class="pic-txt">文艺范高清卡通壁纸(11张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1372038703930.jpg" alt="小时代电影精美壁纸" />
<span class="pic-txt">小时代电影精美壁纸(15张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/137170892289.jpg" alt="可爱杨幂高清手机壁纸" />
<span class="pic-txt">可爱杨幂高清手机壁纸(13张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/13691345082.jpg" alt="可爱Q版海贼王one piece主题iPhone手机壁纸" />
<span class="pic-txt">可爱Q版海贼王one pi(10张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1368518565890.jpg" alt="安卓手机高清壁纸推荐" />
<span class="pic-txt">安卓手机高清壁纸推荐(11张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1368179008600.jpg" alt="潮人必备酷炫的美景壁纸" />
<span class="pic-txt">潮人必备酷炫的美景壁(15张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/136817468750.jpg" alt="高清美女安卓手机壁纸" />
<span class="pic-txt">高清美女安卓手机壁纸(11张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1367837316329.jpg" alt="非主流黑色背景文字手机壁纸" />
<span class="pic-txt">非主流黑色背景文字手(12张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1367138383721.jpg" alt="阳光下的美女手机壁纸图集" />
<span class="pic-txt">阳光下的美女手机壁纸(15张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1367062477163.jpg" alt="湖人高清手机壁纸下载" />
<span class="pic-txt">湖人高清手机壁纸下载(10张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1366770146652.jpg" alt="温馨笑容的美女手机壁纸" />
<span class="pic-txt">温馨笑容的美女手机壁(17张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1366622282843.jpg" alt="送给女孩的26个字母壁纸" />
<span class="pic-txt">送给女孩的26个字母壁(26张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1366375916978.png" alt="修丢丢十二星座卡通手机壁纸" />
<span class="pic-txt">修丢丢十二星座卡通手(12张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1364438734241.png" alt="三星Galaxy S4超漂亮全高清官方手机壁纸" />
<span class="pic-txt">三星Galaxy S4超漂亮(10张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1364279216643.jpg" alt="Showgirl人气萌主周嘉琪iphone壁纸" />
<span class="pic-txt">Showgirl人气萌主周嘉(10张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1363943359756.jpg" alt="唯美的氛围手机壁纸" />
<span class="pic-txt">唯美的氛围手机壁纸(11张)</span> </a></li>
<li>
<a target="_blank" class="picimglink" href="#">
<img width="230" height="350" srch="images/1363867851540.jpg" alt="阳光下的美景手机壁纸下载" />
<span class="pic-txt">程序员设计师联盟淘宝店搜集整理</span> </a></li>
</ul>
</div>
<!--slide 切换按钮-->
<ul id="smallSlideUl" class="info-btn clearfix">
<li class="info-cur" id="mypic0" sid="0"><span>1</span></li>
<li id="mypic1" sid="1"><span>2</span></li>
<li id="mypic2" sid="2"><span>3</span></li>
<li id="mypic3" sid="3"><span>4</span></li>
<li id="mypic4" sid="4"><span>5</span></li>
<li id="mypic5" sid="5"><span>6</span></li>
<li id="mypic6" sid="6"><span>7</span></li>
<li id="mypic7" sid="7"><span>8</span></li>
</ul>
<em class="tab-shadow"></em></div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/zsucai.js"></script>
</body>
</html>
JS代码(zsucai.js):
/* ������������ز� www.zsucai.com */
$(".picimglink").css("text-decoration","none");
$(".picimglink").bind({
mouseenter:function(){
$(this).children("span").animate({
bottom:"0px"}
,500)}
,mouseleave:function(){
$(this).children("span").clearQueue().animate({
bottom:"-30px"}
,500)}
}
);
var biZhiDelayLoadImg = $("#bigSlideUl img");
var biZhiDelayLoadImgLength = biZhiDelayLoadImg.length;
for (var i = 3;
i < biZhiDelayLoadImgLength;
i++){
var curDelayImg = biZhiDelayLoadImg.eq(i);
if (curDelayImg.attr("srch")){
curDelayImg.attr("src",curDelayImg.attr("srch"));
curDelayImg.removeAttr("srch")}
}
var _focus_num = $("#smallSlideUl > li").length;
var _focus_direction = true;
var _focus_pos = 0;
var _focus_max_length = _focus_num * 720;
var _focus_li_length = 720;
var _focus_dsq = null;
var _focus_lock = true;
function autoExecAnimate(){
$("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
var moveLen = _focus_pos * _focus_li_length;
$("#bigSlideUl").animate({
left:"-" + moveLen + "px"}
,600);
if (_focus_pos == (_focus_num - 1)){
_focus_direction = false}
if (_focus_pos == 0){
_focus_direction = true}
if (_focus_direction){
_focus_pos++}
else{
_focus_pos--}
}
_focus_dsq = setInterval("autoExecAnimate()",6000);
$("#smallSlideUl > li").hover(function(){
_focus_pos = parseInt($(this).attr("sid"));
if (_focus_lock){
clearInterval(_focus_dsq);
_focus_lock = false}
$("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
var moveLen = _focus_pos * _focus_li_length;
$("#bigSlideUl").stop(true,true).animate({
left:"-" + moveLen + "px"}
,600)}
,function(){
if (_focus_lock == false){
_focus_dsq = setInterval("autoExecAnimate()",6000);
_focus_lock = true}
}
);
$("#bigSlideUl").hover(function(){
if (_focus_lock){
clearInterval(_focus_dsq);
_focus_lock = false}
}
,function(){
if (_focus_lock == false){
_focus_dsq = setInterval("autoExecAnimate()",6000);
_focus_lock = true}
}
);
$(".pic-list2 li").hover(function(){
$(this).addClass("hover").siblings().removeClass("hover")}
,function(){
$(this).removeClass("hover")}
);
/* ������������ز��� www.zsucai.com */
CSS代码(zsucai.css):
/* ������������ز� www.zsucai.com */
@charset "gb2312";body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
body,input{font:12px/1.5 Arial;color:#333;}
select,input,button{vertical-align:middle;font-size:100%;}
ul,ol{list-style:none;}
fieldset,img{border:0;}
em{font-style:normal;}
.clear{clear:both;}
.clearfix:after{content:".";display:block;visibility:hidden;clear:both;height:0;font-size:0;}
.clearfix{*zoom:1;}
body{background:url(http://icon.zol-img.com.cn/sj/images/bodyback.jpg) repeat;}
.wrapper,.header,.navbox{width:980px;margin:0 auto;}
.side{float:right;width:235px;}
.main{float:left;width:730px;}
.main h1{font-family:"Microsoft Yahei",arial,"Simsun";font-size:22px;padding-top:10px;}
.mt{margin-top:10px;}
.mt15{margin-top:15px;}
a{color:#333;text-decoration:none;}
a:hover,.download .friend a:hover{color:#c00;text-decoration:underline;}
.border{border:1px solid #e0e0e0;}
.quick-more .m b,.navbox,.nav li,.info .current,.mod-header,.new-list li,.filter-item .resolution,.filter-item .re-filter,.n1,.n2,.sort li i,.location .collect,.photo-set-prev span,.photo-set-next span,.photo-list-box .arrow,.photo-set-scrlnext .forbida,.photo-set-scrlprev .forbida,.photo-set-scrlnext a,.photo-set-scrlprev .forbid,.photo-set-scrlnext .forbid,.photo-opt a,.not-foundbox span,.page .prev,.page .next,.page em,.pic-news .play-back,.pic-news .join,.popup .shut-btn{background-image:url(http://icon.zol-img.com.cn/sj/images/sjbz_bg.png);background-repeat:no-repeat;}
.photo-prev .arrow-ico,.photo-next .arrow-ico{background-image:url(http://icon.zol-img.com.cn/sj/images/sjbz_arrow.png);background-repeat:no-repeat;}
.more{float:right;font-size:12px;font-weight:400;}
.ad_div{font:0/0 arial;}
.ad_div div{margin-top:10px;}
.site-nav{border-bottom:1px solid #e4e4e4;background:#f5f5f5;height:27px;}
.site-nav-inner{width:980px;margin:0 auto;padding-top:2px;height:24px;line-height:24px;}
.site-nav-inner a{color:#666;text-decoration:none;}
.site-nav-inner a:hover{color:#c00;}
.quick-menu{float:left;color:#ccc;}
.quick-menu a{margin:0 6px;}
.quick-menu .home{margin:0 6px 0 0;}
.quick-more{float:left;position:relative;z-index:50;zoom:1;}
.quick-more .m{float:left;position:relative;z-index:1;padding:1px 20px 1px 8px;padding:2px 20px 0 8px\9;height:22px;line-height:22px;color:#666;cursor:default;}
.quick-more-hover .m{margin-bottom:-2px;padding:0 19px 2px 7px;padding:1px 19px 1px 7px\9;border:1px solid #ccc;border-bottom:0 none;background:#fff;}
.quick-more-hover .quick-more-list{display:block;}
.quick-more .m b{position:absolute;right:8px;top:10px;width:7px;height:4px;font:0/0 arial;background-position:-98px -192px;}
.quick-more-hover .m b{right:7px;top:9px;background-position:-98px -184px;}
.quick-more-list{display:none;position:absolute;left:0;top:24px;width:158px;border:1px solid #ccc;background:#fff;}
.quick-more-list dl{padding:4px 0 6px 10px;}
.quick-more-list .hover{background:#f5f5f5;}
.quick-more-list dt{height:24px;line-height:24px;overflow:hidden;color:#666;font-weight:bold;}
.quick-more-list dd{overflow:hidden;zoom:1;line-height:20px;}
.quick-more-list dd a{float:left;margin-right:12px;white-space:nowrap;}
.quick-more-list .line{padding-top:0;}
.quick-more-list .line dt{padding-top:4px;margin-right:10px;border-top:1px solid #ccc;}
.quick-more-list p{margin:0 10px;height:32px;line-height:32px;border-top:1px solid #ccc;font-weight:bold;}
.login-info{float:right;}
.login-info span{margin:0 0 0 10px;color:#ccc;}
.login-info span a{margin:0;}
.login-info a{margin-left:10px;}
.login-info .logout{margin:0 0 0 12px;color:#666;font-family:"\u5b8b\u4f53";}
.header{padding:20px 0;}
.header .share{float:right;padding:3px 0 0 0;}
.logo{float:left;}
.logo img{vertical-align:middle;}
.oldpage-link{float:right;height:32px;font-weight:700;line-height:32px;}
.navbox{overflow:hidden;height:42px;line-height:42px;background-position:0 -36px;background-repeat:repeat-x;-webkit-border-radius:3px;border-radius:3px;}
.nav{float:left;}
.nav li{float:left;height:42px;line-height:42px;font-size:16px;font-family:\5FAE\8F6F\96C5\9ED1;background-position:-128px -264px;}
.nav li a{display:block;color:#fff;padding:0 13px 0 17px;outline:none;text-decoration:none;}
.nav li.cur{position:relative;z-index:5px;margin:0 -2px 0 0;}
.nav li.first{padding:0;background:none;}
.nav li.cur h1,.nav li.cur span{font-size:16px;font-weight:400;color:#fff;padding:0 15px 0 17px;background:#292d33;*z oom:1;}
.nav li.cur span{display:block;}
.nav li.first h1,.nav li.first span{-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;}
.nav li a:hover{color:#fff;text-decoration:underline;}
.nav-link{float:right;padding:0 5px 0 0;font-size:12px;font-family:arial;}
.nav-link a{margin:0 5px;font-family:arial;color:#fff;text-decoration:none;}
.nav-link span{font-weight:700;color:#acb7bf;}
.nav-link a:hover{color:#fff;text-decoration:underline;}
.tab{position:relative;width:710px;margin-bottom:-2px;padding:9px 9px 3px;border-top:1px solid #e9e9e9;border-left:1px solid #d9d9d9;border-right:1px solid #d8d9d9;border-bottom:0 none;background:#fff;}
.tab ul img{vertical-align:middle;}
.slide{width:710px;height:350px;overflow:hidden;position:relative;}
.slide-ul{position:relative;width:8640px;margin:0 0 0 -5px;}
.slide-ul li{display:inline;float:left;width:230px;height:350px;padding:0 5px;overflow:hidden;}
.slide-ul a{display:block;width:230px;height:350px;overflow:hidden;color:#fff;}
.slide-ul a:hover .pic-txt{color:#fff;}
.slide-ul .pic-txt{display:block;bottom:-30px;position:relative;width:220px;height:30px;margin:-30px 0 0;padding:0 5px;font:14px/30px Microsoft YaHei;text-align:center;z-index:1;background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000);cursor:pointer;}
:root .slide-ul .pic-txt{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorstr=#00000000,endColorstr=#00000000);}
.info-btn{width:225px;height:22px;overflow:hidden;margin:0 auto;padding:11px 0;zoom:1;}
.info-btn li{float:left;padding:0 3px;}
.info-btn li span{display:block;width:22px;height:22px;background:url(http://icon.zol-img.com.cn/sj/images/sjbz_infor-btn.png) 0 -27px no-repeat;text-indent:-9999em;overflow:hidden;cursor:pointer;}
.info-btn .info-cur span,.info-btn .info-hover span{background-position:0 0;}
.tab-shadow{display:block;position:absolute;left:-1px;top:403px;width:730px;height:3px;background:url(http://icon.zol-img.com.cn/sj/images/sjbz_shadowbg.jpg) no-repeat;}
.model{border:1px solid #e0e0e0;}
.mod-header{height:34px;padding:0 12px;border-bottom:1px solid #e0e0e0;line-height:34px;font-size:14px;font-weight:700;background-position:0 0;background-repeat:repeat-x;}
.mod-header h2{float:left;font-size:14px;}
.mod-header h3{float:left;font-size:14px;}
.bz-reco{padding:0 12px;background:#fff;zoom:1;}
.pic-list{padding:0 0 12px 112px;border-bottom:1px dotted #e0e0e0;line-height:20px;word-break:break-all;}
.pic-list h3{height:40px;margin:0 0 16px;overflow:hidden;font-size:12px;font-weight:400;}
.pic-list span{color:#999;}
.pic-list .pic{float:left;width:100px;height:75px;padding:1px;margin:0 0 0 -112px;border:1px solid #e0e0e0;}
.pic-list .pic:hover,.down-img a:hover img{border-color:#f60;}
.pic img{vertical-align:middle;}
.new-list{padding:5px 0 4px;}
.new-list li{height:26px;padding:0 0 0 10px;line-height:26px;overflow:hidden;background-position:-127px -615px;vertical-align:middle;}
.new-list li a{color:#333;}
.new-list li a:hover{color:#c00;text-decoration:underline;}
.new-list li span{color:#999;}
.new-list .cur{height:124px;}
.new-list .cur .down-img{clear:both;zoom:1;display:block;overflow:hidden;margin:0 0 3px;}
.choosebox{width:704px;padding:7px 12px;border:1px solid #e0e0e0;background:#fff;}
.filter-item{zoom:1;padding:9px 0 9px 103px;border-top:1px dotted #e0e0e0;line-height:24px;}
.first{border-top:0 none;}
.filter-item dt{float:left;width:65px;margin-left:-103px;_display:inline;text-align:left;color:#666;}
.filter-item dd{background:#fff;}
.filter-item .all{position:relative;float:left;display:inline;height:20px;line-height:20px;padding:0 5px;margin:2px 4px 2px -39px;}
.filter-item a{position:relative;float:left;height:20px;line-height:20px;padding:0 5px;margin:2px 2px 2px 0;white-space:nowrap;_display:inline;}
.color-item a{padding:0 5px 0 23px;}
.filter-item .sel,.filter-item .sel:hover,.filter-item a:hover{background-color:#f60;color:#fff;text-decoration:none;}
.filter-item a:hover{background-color:#f90;}
.filter-item .sel:hover{color:#fff;text-decoration:none;}
.filter-item .resolution{float:right;padding:0 0 0 22px;background-position:-114px -207px;_white-space:normal;_word-break:break-all;}
.filter-item .resolution em{font-weight:700;color:#f60;}
.filter-item .re-filter{float:right;padding:0 0 0 20px;background-position:-115px -237px;}
.filter-item .re-filter:hover{color:#c00;background-color:#fff;}
.action-area{float:right;width:102px;}
.filter-item a i{position:absolute;left:4px;top:3px;width:12px;height:12px;_overflow:hidden;border:1px solid #cb1c1c;background:#de2020;}
.filter-item .orange i{border-color:#e96300;background:#fe6c00;}
.filter-item .yellow i{border-color:#e9b000;background:#febf00;}
.filter-item .green i{border-color:#539b23;background:#59a725;}
.filter-item .purple i{border-color:#7a27b7;background:#892bcf;}
.filter-item .pink i{border-color:#c63fab;background:#d744ba;}
.filter-item .cyan i{border-color:#07a6b7;background:#06b7c8;}
.filter-item .blue i{border-color:#005ceb;background:#0065fe;}
.filter-item .brown i{border-color:#6b3012;background:#733413;}
.filter-item .white i{border-color:#c0babc;background:#fff;}
.filter-item .black i{border-color:#000;background:#000;}
.hot-tags a:hover,.list_news a:hover{color:#c00;}
.hot-tags{padding:6px 10px;overflow:hidden;background:#fff;line-height:26px;}
.tags-spec{height:188px;line-height:24px;}
.hot-tags a{margin-right:10px;white-space:normal;word-break:break-all;}
.hot-tags .f14{font-size:14px;}
.hot-tags .style1{color:#65850F;}
.hot-tags .style2{color:#f60;}
.hot-tags .style3{color:#666;}
.hot-tags .style4{color:#298DA9;}
.hot-tags .style5{color:#ED0000;}
.hot-tags .style6{color:#e818bf;}
.pic-list2{margin:0 0 0 -20px;}
.pic-list2 li{position:relative;float:left;width:208px;height:351px;margin:10px 0 -9px 20px;padding:11px 11px 9px;line-height:24px;text-align:center;_display:inline;}
.pic-list2 .shadow{position:absolute;z-index:-1;left:0;top:0;width:230px;height:371px;background:url(http://icon.zol-img.com.cn/sj/images/sjbz_bj-371.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://icon.zol-img.com.cn/sj/images/sjbz_bj-371.png",sizingMethod="crop");}
.pic-list2 .hover .shadow{background:url(http://icon.zol-img.com.cn/sj/images/sjbz_bjhover-371.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://icon.zol-img.com.cn/sj/images/sjbz_bjhover-371.png",sizingMethod="crop");}
.pic-list2 .pic{position:relative;display:block;width:208px;height:351px;overflow:hidden;color:#999;outline:0 none;}
.pic-list2 .pic span{display:block;height:24px;padding:7px 0 8px;overflow:hidden;cursor:pointer;}
.pic-list2 .pic em{color:#333;}
.pic-list2 .pic:hover{color:#999;text-decoration:none;zoom:1;}
.pic-list2 .pic:hover em{color:#c00;text-decoration:underline;}
.pic-list2 ins{display:block;position:absolute;right:11px;top:302px;_top:303px;height:21px;line-height:21px;text-decoration:none;padding:0 5px;color:#fff;background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000);}
:root .pic-list2 ins{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#00000000,endColorstr=#00000000);}
.pic-list2 .photo-list-padding{padding:11px 11px 19px;}
.pic-list3 li,.pic-list3 .pic{height:247px;}
.pic-list3 .shadow{height:267px;background:url(http://icon.zol-img.com.cn/sj/images/sjbz_bj-267.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://icon.zol-img.com.cn/sj/images/sjbz_bj-267.png",sizingMethod="crop");}
.pic-list3 .hover .shadow{background:url(http://icon.zol-img.com.cn/sj/images/sjbz_bjhover-267.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://icon.zol-img.com.cn/sj/images/sjbz_bjhover-267.png",sizingMethod="crop");}
.pic-list3 ins{top:198px;_top:199px;}
.pic-list4 li,.pic-list4 .pic{height:209px;}
.pic-list4 .shadow{height:229px;background:url(http://icon.zol-img.com.cn/sj/images/sjbz_bj-229.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://icon.zol-img.com.cn/sj/images/sjbz_bj-229.png",sizingMethod="crop");}
.pic-list4 .hover .shadow{background:url(http://icon.zol-img.com.cn/sj/images/sjbz_bjhover-229.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://icon.zol-img.com.cn/sj/images/sjbz_bjhover-229.png",sizingMethod="crop");}
.pic-list4 ins{top:160px;_top:161px;}
.rank-list{padding:6px 12px;background:#fff;word-break:break-all;}
.rank-list li{position:relative;height:26px;padding:0 0 0 23px;zoom:1;line-height:26px;overflow:hidden;vertical-align:middle;}
.rank-list a,.rank-list .n1,.rank-list .n2,.rank-list .down-num{vertical-align:baseline;}
.n1,.n2{position:absolute;width:16px;height:16px;line-height:16px;color:#fff;text-align:center;overflow:hidden;left:0;top:6px;font-size:10px;-webkit-text-size-adjust:none;}
.n1{background-position:-51px -313px;}
.n2{background-position:-51px -329px;}
.rank-list li .title{display:block;*margin-top:1px;height:26px;line-height:26px;overflow:hidden;}
.rank-list li .down-num{float:right;margin:0 0 0 6px;color:#999;font-size:12px;}
.rank-list .cur{height:125px;}
.rank-list .cur .down-img{clear:both;zoom:1;display:block;overflow:hidden;margin:1px 0 3px;}
.down-img img{padding:1px;display:block;border:1px solid #ccc;}
.rank-list .seriescur{height:110px;}
.notice{height:34px;line-height:34px;background:#fff;color:#666;text-indent:12px;}
.notice em{font-weight:700;color:#333;}
.download{width:978px;border:1px solid #E1E1E1;margin:15px auto 0;}
.download .mod-header a{font-weight:700;}
.download .friend{width:958px;padding:10px 8px 14px 12px;background:#fff;line-height:26px;color:#ccc;}
.download .friend a{margin:0 12px 0 0;color:#666;}
.location{padding:10px 0 0;color:#666;}
.location .collect{float:right;width:85px;height:23px;background-position:0 -184px;}
.location a{height:23px;line-height:23px;}
.location em{font-family:simsun;}
.sort{float:right;width:280px;margin:-1px -12px -1px 0;height:36px;font-size:12px;line-height:36px;_display:inline;_width:288px;}
.sort span{font-weight:400;color:#999;}
.sort ul{float:right;margin:0 0 0 4px;}
.sort li{float:left;width:71px;border-left:1px solid #e0e0e0;font-weight:400;color:#333;text-align:center;cursor:pointer;}
.sort li i{display:none;position:absolute;left:31px;top:33px;width:9px;height:6px;background-position:-120px -191px;}
.sort .hover{font-weight:700;}
.sort li a{color:#333;text-decoration:none;display:block;}
.sort .cur{position:relative;height:33px;line-height:33px;margin:0 -1px 0 0;border-top:2px solid #666;border-right:1px solid #e0e0e0;background-color:#fff;font-weight:700;cursor:auto;}
.sort .cur i{display:block;}
.not-foundbox{height:80px;padding:40px 0 0 225px;border:1px solid #e0e0e0;border-top:0 none;background:#fff;}
.not-foundbox span{display:block;width:240px;height:41px;line-height:41px;padding:0 0 0 53px;color:#666;font-size:14px;background-position:-88px -522px;}
.pagecon{height:30px;line-height:30px;padding:10px 0 5px 0;}
.pagecon .tip{font-size:14px;font-family:simsun;}
.page{float:right;}
.page a,.page span{display:inline-block;height:27px;line-height:27px;padding:0 10px;border:1px solid #ccc;background:#fff;text-align:center;font-size:16px;margin-left:3px;vertical-align:middle;}
.page .prev{padding:0 8px 0 19px;background-position:0 -568px;font-size:14px;}
.page .next{padding:0 19px 0 8px;background-position:-14px -568px;font-size:14px;}
.page span{background-color:#444;border:1px solid #444;color:#fff;font-weight:bold;}
.page em{display:inline-block;width:16px;height:29px;background-position:-84px -565px;margin:0 4px 0 10px;vertical-align:middle;}
.location-nav{border-bottom:1px solid #e4e4e4;background:#f5f5f5;height:27px;}
.location-nav .location{padding:0;line-height:27px;color:#666;}
.photo-tit{padding:10px 0;}
.photo-tit h1{float:left;font:bold 16px/30px Microsoft YaHei;}
.photo-opt{float:right;position:relative;z-index:1;color:#999;line-height:30px;}
.photo-opt a{display:inline-block;height:30px;line-height:30px;margin:0 10px;padding:0 0 0 27px;font-size:14px;color:#666;}
.photo-opt a:hover{color:#c00;text-decoration:none;}
.photo-opt .favorite{background-position:-109px -328px;}
.photo-opt .favorite:hover{background-position:-109px -356px;}
.photo-opt .nolike{background-position:-109px -385px;}
.photo-opt .nolike:hover{background-position:-109px -415px;}
.photo-opt .down-btn{width:90px;padding:0 3px 0 0;*padding:0;background-position:0 -209px;text-indent:-9999em;}
.photo-opt .down-btn:hover{background-position:0 -241px;}
.photo-opt .tip{font-size:12px;font-family:simsun;}
.photobox{position:relative;width:978px;height:550px;margin-bottom:-3px;padding:0 0 3px;border-top:1px solid #e9e9e9;border-left:1px solid #d9d9d9;border-right:1px solid #d8d9d9;border-bottom:0 none;}
.photo-side{float:right;width:168px;height:530px;padding:20px 20px 0;background:url(http://icon.zol-img.com.cn/sj/images/sjbz_photo-side-bg.jpg) 0 0 no-repeat #f5f5f5;}
.photo-side .code-img{display:block;border:1px solid #e4e4e4;}
.photo-side .code-img-infor{padding:10px 0 0;color:#333;}
.photo-side .code-img-infor a{color:#f60;}
.photo-side h3{padding:5px 0;font-size:14px;line-height:30px;color:#666;}
.photo-side p{color:#999;line-height:22px;}
.photo,.photo-2{float:left;position:relative;width:750px;height:530px;padding:10px;background:#fff;zoom:1;overflow:hidden;}
.photo img,.photo-2 img{vertical-align:top;}
.photo-2{width:730px;height:510px;padding:20px;}
.photo-2 img{display:block;margin:0 auto;}
.photobox .tab-shadow{width:980px;top:550px;background:url(http://icon.zol-img.com.cn/sj/images/shadowbg-big.jpg) no-repeat;}
.photo-prev,.photo-next{position:absolute;top:0;width:50%;height:100%;cursor:pointer;}
.photo-prev{left:0;}
.photo-next{right:0;}
.photo-prev a,.photo-next a{position:absolute;top:238px;width:75px;height:75px;cursor:pointer;overflow:hidden;display:block;}
.photo-prev a{left:30px;}
.photo-next a{right:30px;}
.photo-prev .arrow-bg,.photo-next .arrow-bg{position:absolute;left:0;top:0;width:75px;height:75px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.photo-prev .arrow-ico,.photo-next .arrow-ico{position:absolute;left:0;top:0;width:75px;height:75px;}
.photo-prev .arrow-ico{background-position:0 0;}
.photo-next .arrow-ico{background-position:-160px 0;}
.photo-prev a:hover .arrow-ico{background-position:-80px 0;}
.photo-next a:hover .arrow-ico{background-position:-240px 0;}
.pic-bg{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=0);opacity:0;width:100%;height:100%;}
.wallpaper-down dt,.wallpaper-down dd{float:left;}
.wallpaper-down dt{width:88px;background:#f5f5f5;line-height:34px;border-right:1px solid #e0e0e0;font-size:14px;font-weight:700;text-align:center;}
.wallpaper-down dd{position:relative;zoom:1;width:889px;background:#fff;}
.wallpaper-down dd a{position:relative;float:left;width:78px;height:34px;line-height:34px;border-right:1px solid #e0e0e0;text-align:center;background:#fff;}
.wallpaper-down dd a:hover,.wallpaper-down dd .current{z-index:10;width:78px;height:34px;line-height:34px;padding:1px 0 1px 1px;margin:-1px 0 -1px -1px;border-right:1px solid #f60;color:#fff;font-weight:700;background:#f60;text-decoration:none;}
.wallpaper-down dd .laiyuan{float:right;width:178px;font-size:14px;font-weight:700;border:0 none;}
.wallpaper-down dd .laiyuan:hover{width:178px;margin:0;padding:0;height:34px;line-height:34px;background:#fff;border:0 none;color:#333;text-decoration:none;}
.wallpaper-down dd .laiyuan span{color:#f60;text-decoration:none;}
.wallpaper-down dd .laiyuan:hover span{color:#f60;text-decoration:underline;}
.wallpaper-tag dt,.wallpaper-tag dd{float:left;height:34px;}
.wallpaper-tag dt{width:88px;background:#f5f5f5;font-size:14px;font-weight:700;line-height:34px;text-align:center;}
.wallpaper-tag dd{width:875px;padding:0 10px 0 4px;border-left:1px solid #e0e0e0;background:#fff;}
.wallpaper-tag .tag-link{float:left;line-height:34px;}
.wallpaper-tag .share{float:right;padding:4px 0 0;}
.wallpaper-tag .tag-link a{margin:0 6px;}
.photo-set{position:relative;width:638px;border:1px #e0e0e0 solid;padding:15px 170px 5px;background:#fff;zoom:1;}
.photo-set-prev,.photo-set-next{position:absolute;top:15px;width:130px;text-align:center;}
.photo-set-prev{left:20px;}
.photo-set-next{right:20px;}
.photo-set-prev span,.photo-set-next span{display:block;width:120px;height:90px;padding:3px 7px 7px 3px;background-position:0 -81px;}
.photo-set-prev span a,.photo-set-next span a{display:block;width:120px;height:90px;line-height:88px;*font-size:78px;_font-size:79px;*font-family:Arial;overflow:hidden;}
.photo-set-prev img,.photo-set-next img{vertical-align:middle;}
.photo-set-prev .txt,.photo-set-next .txt{display:block;width:130px;height:30px;line-height:30px;}
.photo-set-prev:hover,.photo-set-next:hover{color:#f90;}
.photo-set-scrlprev,.photo-set-scrlnext{position:absolute;top:7px;*top:4px;display:block;width:19px;height:96px;}
.photo-set-scrlprev{left:0;}
.photo-set-scrlnext{right:0;}
.photo-set-scrlprev a,.photo-set-scrlnext a{display:block;width:19px;height:96px;cursor:pointer;}
.photo-set-scrlprev .forbida{background-position:0 -424px;}
.photo-set-scrlnext .forbida{background-position:-21px -424px;}
.photo-set-scrlprev .forbid{background-position:-42px -424px;cursor:default;}
.photo-set-scrlnext .forbid{background-position:-63px -424px;cursor:default;}
.photo-set-list{width:100%;min-height:1px;}
.photo-list-inner{position:relative;width:584px;padding:0 27px;zoom:1;}
.photo-list-box{position:relative;width:564px;height:128px;margin:-7px 10px 0;padding:7px 0 0;overflow:hidden;zoom:1;}
.photo-list-box ul{position:relative;left:0;margin:0 0 0 -10px;}
.photo-list-box li{position:relative;float:left;width:120px;margin:0 10px;background:#fff;display:inline;padding:2px;border:1px #e0e0e0 solid;}
.photo-list-box li.lihover{border-color:#f60;background:#f60;}
.photo-list-box li a{display:block;width:120px;height:90px;text-align:center;line-height:88px;*font-size:78px;_font-size:79px;*font-family:Arial;overflow:hidden;}
.photo-list-box li i{position:absolute;right:43px;top:103px;color:#666;padding:0 8px;height:20px;line-height:20px;font-style:normal;}
.photo-list-box li i em{font-size:14px;font-weight:700;}
.photo-list-box li img{margin:0;vertical-align:middle;}
.photo-list-box .arrow{display:none;position:absolute;z-index:3;left:57px;top:-8px;width:14px;height:7px;background-position:-26px -371px;}
.photo-list-box .cur{border-color:#f60;background:#f60;}
.photo-list-box .cur a{border-color:#f60;background:#fff;cursor:default;}
.photo-list-box .cur .arrow{display:block;}
.photo-list-box a:hover{text-decoration:none;}
.popup{position:absolute;left:50%;top:205px;width:468px;margin:0 0 0 -234px;padding:30px 0 10px 50px;background:#141414;border:1px #292929 solid;}
.popup .shut-btn{position:absolute;right:19px;top:9px;width:15px;height:15px;background-position:0 -273px;cursor:pointer;}
.pic-news,.pic-news h5,.pic-news p{overflow:hidden;zoom:1;}
.pic-news{margin:0 0 15px;}
.pic-news .pic{float:left;border:1px #333 solid;width:102px;margin:0 15px 0 0;_margin-right:12px;}
.pic-news .pic a{display:block;width:100px;height:75px;border:1px #000 solid;overflow:hidden;line-height:71px;line-height:73px\9;*font-size:66px;_font-size:67px;*font-family:Arial;color:#fff;text-align:center;}
@-moz-document url-prefix(){.pic-news .pic a{line-height:73px;}
}
:root .pic-news .pic a{line-height:73px\0;}
.pic-news .pic img{vertical-align:middle;}
.pic-news h5{font-weight:normal;font-size:14px;line-height:24px;}
.pic-news h5 a{color:#bfbfbf;}
.pic-news h5 a:hover{color:#f90;}
.pic-news p{margin:10px 0 0;line-height:30px;color:#666;}
.pic-news p a{display:inline-block;*display:inline;zoom:1;height:25px;line-height:25px;border:1px #333 solid;border-radius:2px;-webkit-border-radius:2px;-moz-border-raidus:2px;padding:0 8px;margin:0 14px;color:#999;}
.pic-news p a:hover{color:#f90;}
.pic-news .play-back{margin-left:0;background-position:-111px -450px;padding-left:25px;}
.pic-news .join{background-position:-114px -474px;padding-left:22px;}
.pic-news .joined{background-position:-119px -571px;}
.pic-news .join-each{background-position:-119px -591px;}
.pic-news .joined:hover,.pic-news .join-each:hover{cursor:text;text-decoration:none;color:#999;}
.popup .pic-list{margin:0 0 20px;padding:0;border:0 none;line-height:18px;}
.popup .pic-list h6{font-size:14px;color:#999;}
.popup .pic-list h6 span{color:#f90;}
.popup .pic-list ul{overflow:hidden;zoom:1;}
.popup .pic-list li{float:left;width:122px;height:92px;border:1px #333 solid;margin:7px 23px 0 0;}
.popup .pic-list li a{position:relative;display:block;width:120px;height:90px;border:1px #000 solid;overflow:hidden;line-height:88px;*font-size:78px;_font-size:79px;*font-family:Arial;color:#fff;text-align:center;}
.popup .pic-list img{vertical-align:middle;}
.popup .pic-list .opt{position:absolute;left:0;bottom:0;width:120px;height:24px;line-height:24px;overflow:hidden;background:#000;filter:alpha(opacity=45);opacity:.45;}
.popup .pic-list .txt{position:absolute;font-size:12px;left:0;bottom:0;width:120px;height:24px;line-height:24px;overflow:hidden;color:#fff;text-align:center;}
.popup .pic-list a:hover,.popup .pic-list a:hover .txt{color:#f90;text-decoration:none;}
.page b{display:inline-block;font-family:tahoma;font-weight:normal;height:29px;margin:0 3px;text-align:center;vertical-align:middle;width:16px;}
.taga a:hover{color:#333;text-decoration:none;}
.marbot{margin-bottom:5px;}
.showtitle h1{display:inline;font-size:12px;font-weight:normal;}
.martop{margin-top:5px;}
.footNew{font-size:0;margin-top:15px;}
.filter-item .set-btn,.tip-layer .hd,.tip-layer .close{background:url(http://icon.zol-img.com.cn/sj/images/sjbz_tip-bg.png) no-repeat;}
.filter-item .set-btn{float:right;width:88px;height:26px;padding:0;margin:0;line-height:26px;text-align:center;color:#fff;background-position:0 -36px;}
.filter-item .set-btn:hover{background-color:inherit;color:#fff;text-decoration:none;}
.layer-box{display:none;padding:5px;background:rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#32000000,endColorstr=#32000000);z-index:51;}
:root .layer-box{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorstr=#00000000,endColorstr=#00000000);}
.tip-layer{width:698px;border:1px solid #e0e0e0;background-color:#fff;}
.tip-layer .hd{position:relative;height:34px;line-height:34px;border-bottom:1px solid #e0e0e0;background-repeat:repeat-x;}
.tip-layer .hd h3{padding:0 0 0 8px;font-size:14px;line-height:34px;}
.tip-layer .close{position:absolute;top:10px;right:10px;width:15px;height:15px;display:block;cursor:pointer;background-position:-73px -76px;margin:0;}
.tip-content .tip-left{float:left;width:152px;height:345px;padding:11px 0 0 10px;overflow-x:hidden;overflow-y:auto;}
.tip-content .tip-right{float:right;width:508px;height:345px;padding:11px 14px 0;overflow-x:hidden;overflow-y:auto;}
.tip-content .title{height:20px;line-height:20px;color:#999;}
.tip-content .brand-list{padding:10px 0 0;}
.tip-content .brand-list li{float:left;width:65px;height:20px;padding:2px 0;line-height:20px;overflow:hidden;}
.brand-list li a{display:inline-block;padding:0 5px;color:#333;}
.brand-list li a:hover{color:#fff;background-color:#f90;text-decoration:none;}
.brand-list .current a{background-color:#f60;color:#fff;}
.brand-list .current a:hover{background-color:#f60;color:#fff;text-decoration:none;}
.tip-content .phone-model-list{padding:0 0 10px;}
.tip-content .phone-model-list li{word-break:break-all;float:left;width:98px;height:20px;padding:2px 0;line-height:20px;}
.phone-model-list li{overflow:hidden;}
.phone-model-list li a{display:inline-block;padding:0 5px;color:#333;}
.phone-model-list li a:hover{color:#fff;background-color:#f90;text-decoration:none;}
.tip-content .phone-model-header{height:30px;line-height:30px;padding:6px 0 0;border-top:1px dotted #e0e0e0;font-size:12px;color:#999;font-weight:400;}
.tip-content .phone-model-header em{font-family:arial;font-size:18px;margin:0 5px;}
.layerbox-overlay{background:#000;filter:alpha(opacity=30);opacity:.3;-moz-opacity:.3;width:100%;height:100%;position:fixed;top:0;left:0;display:none;z-index:50;_position:absolute;_height:expression(documentElement.offsetHeight+"px");_top:expression(documentElement.scrollTop+"px");}
.code-box{width:159px;height:159px;border:1px solid #E4E4E4;overflow:hidden;vertical-align:middle;text-align:center;background-color:#fff;}
.code-box span{display:table-cell;width:159px;height:159px;vertical-align:middle;text-align:center;*display:block;*font-size:138px;*font-family:Airal;}
.photo-side .code-box .code-img{border:0 none;vertical-align:middle;}
.ts_fy{background:url("http://icon.zol-img.com.cn/article/2011/tcbg.gif") repeat scroll 0 -26px transparent;color:#666;height:34px;left:-90px;line-height:30px;position:absolute;text-align:center;top:-35px;width:250px;}
.close{background:url("http://icon.zol-img.com.cn/article/2011/libg.gif") no-repeat scroll -1px -909px transparent;cursor:pointer;display:inline;float:right;height:7px;margin:6px 5px 0 0;width:8px;}
em{font-style:normal;}
.photo-opt .mobile-360link{padding:0;margin-right:14px;*margin-right:11px;margin-left:0;}
.photo-opt .mobile-360link img{height:30px;margin-top:-2px;*margin-top:0;vertical-align:middle;}
.survey-radio,.survey-radio i,.survey-close,.survey-submit,.survey-tip,#backTop i,#callSurvey i{background:url(http://icon.zol-img.com.cn/sj/images/sjbz_survey.png) no-repeat;}
.survey-box{opacity:.3;opacity:1 \0/;width:318px;height:0;position:fixed;_position:absolute;right:0;bottom:-244px;overflow:hidden;border:1px solid #e6e6e6;background-color:#fff;box-shadow:-2px -2px 15px #ccc;-webkit-box-shadow:-2px -2px 15px #ccc;-moz-box-shadow:-2px -2px 15px #ccc;font-family:arial,'\5b8b\4f53';font-size:12px;z-index:2000;}
.survey-ie{visibility:hidden;height:205px;right:0;bottom:0;}
.survey-show-w3c{height:205px;opacity:1;right:0;bottom:0;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;}
.survey-hide-w3c{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;}
.survey-header{width:318px;height:32px;border-bottom:1px solid #f0f0f0;line-height:32px;color:#333;}
.survey-title{float:left;font:bold 12px/32px '\5b8b\4f53';text-indent:15px;}
.survey-title em{color:#F60;}
.survey-close{float:right;height:32px;width:32px;background-position:0 -53px;outline:0 none;}
.survey-close:hover{background-position:-25px -53px;}
.survey-main{padding:10px 15px 15px;width:290px;}
.survey-radio{float:left;position:relative;zoom:1;width:50px;padding-left:50px;height:25px;line-height:25px;background-position:-87px -56px;cursor:pointer;}
.survey-radio-good-sel,.survey-radio-bad-sel{background-position:-87px -81px;}
.survey-radio i{position:absolute;left:23px;top:4px;width:21px;height:18px;}
.survey-radio-good i{background-position:0 -115px;}
.survey-radio-good-sel i{background-position:0 -89px;}
.survey-radio-bad i{background-position:-26px -115px;}
.survey-radio-bad-sel i{background-position:-26px -89px;}
.survey-text{clear:both;width:283px;height:74px;border:1px solid #d8d7d7;margin:12px 0 0;padding:2px 0 2px 5px;resize:none;_display:inline;font-size:12px;overflow-y:auto;line-height:18px;vertical-align:top;}
.survey-text.default{color:#999;}
.survey-count{margin-top:10px;float:left;height:24px;line-height:24px;color:#999;}
.survey-count-cur{color:#666;}
.survey-count-over{color:#f60;}
.survey-submit{float:right;border:0 none;width:49px;height:24px;margin-top:10px;text-indent:-999em;overflow:hidden;background-position:-51px -28px;cursor:pointer;}
.survey-submit:hover{background-position:0 -28px;}
.survey-submit-disabled,.survey-submit-disabled:hover{cursor:default;background-position:0 -145px;}
.survey-mask{background:#eee;width:100%;height:100%;_height:205px;position:absolute;left:0;top:0;z-index:10;opacity:.5;filter:alpha(opacity=50);display:none;}
.survey-tip{position:absolute;left:50%;top:50%;display:none;margin:-20px 0 0 -100px;padding:9px;width:185px;height:20px;line-height:20px;border:1px solid #ffc34c;background-color:#fffad6;z-index:11;text-indent:20px;opacity:.7;filter:alpha(opacity=70);}
.survey-tip.warning{background-position:-50px -143px;}
.survey-tip.success{background-color:#d8f1ff;background-position:-75px -106px;border-color:#6abeea;}
#pubFeedBack{position:fixed;_position:absolute;right:15px;bottom:15px;width:54px;font-size:12px;}
#backTop,#callSurvey{display:block;width:52px;padding:1px;height:56px;line-height:22px;text-align:center;color:#fff;text-decoration:none;}
#backTop{display:none;background:#999;}
#backTop:hover{background:#ccc;zoom:1;text-decoration:none;color:#fff;}
#backTop i{display:block;width:25px;height:13px;margin:14px auto 8px;background-position:-63px 0;}
#callSurvey{margin-top:1px;background:#3687d9;}
#callSurvey:hover{background:#66a4e3;zoom:1;text-decoration:none;color:#fff;}
#callSurvey i{display:block;width:26px;height:25px;margin:9px auto 0;background-position:0 0;}
#callSurvey:hover i{background-position:-30px 0;}
/* ������������ز� www.zsucai.com */