"https:" == document.location.protocol
window.navigator
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
$.ajax({
type: "get",
url: ZQDL.util.path.console + "/api-appstore/carts/countcarts",
headers: {
'Access-Control-Allow-Origin': '*',
Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp",
"X-Requested-With": "XMLHttpRequest"
},
dataType: "jsonp",
success: function(result) {
var num = 0;
if (result.status == 999) {
var toLocation = result.location.split("?")[0];
var requestArr = geturlRequest(result.location);
if (requestArr.service) {
var service = decodeURIComponent(requestArr.service);
service += ('&backurl=' + encodeURIComponent(window.location.href));
requestArr.service = encodeURIComponent(service)
}
var j = 0;
for (var i in requestArr) {
toLocation += j == 0 ? "?": "&";
toLocation += i + "=" + requestArr[i];
j++
}
window.location.href = toLocation
} else if (result.status == 101) {
num = result.data.num
} else if (result.status == 501) {
var localCart = ZQDL.cookie.get("localCart") || "[]";
if (localCart && localCart != "null") {
localCart = JSON.parse(localCart);
num = localCart.length
}
}
$('.cartNum').html(num)
}
});
$(".job-add .zhankai a").bind("click",
function() {
var c = $(this).attr("class");
if (c == "close") {
$(".job-add").css("height", "auto");
$(this).addClass("open").removeClass("close").html("收起")
}
if (c == "open") {
$(".job-add").css("height", "32px");
$(this).addClass("close").removeClass("open").html("展开")
}
});
$(".branch-info a.close").bind("click",
function() {
$(".branch-info").hide()
});
$(".branch-map a").bind("click",
function() {
$(".branch-info").show()
});
$('.onlineserver ul li').on('mouseover',
function() {
$(this).stop().animate({
'width': 194
},
300).addClass('on').siblings('').removeClass('on')
});
$('.onlineserver ul li').on('mouseout',
function() {
$(this).stop().animate({
'width': 51
},
300).removeClass('on')
});
$('.hy_belong').find('li').click(function(ev) {
var val = $(this).text();
$(this).parent().siblings('input').val(val);
$(this).parent().hide();
ev.stopPropagation();
});
var winW = $(window).width(),
winH = $(window).height(),
_l = (winW - 700) / 2,
_t = (winH - 510) / 2;
$('.a_new_window').on('click',
function() {
var obj = $(this);
window.open(obj.attr('href'), "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top= " + _t + ", left= " + _l + ", width=700, height=405");
return false
});
$('.a_baidu_window').on('click',
function() {
var obj = $(this);
window.open(obj.attr('href'), "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top= " + _t + ", left= " + _l + ", width=700, height=510");
return false
});
function() {
var nav_item_left = $(this).position().left;
var nav_item_width = $(this).width();
item_line.stop(true, false).animate({
"left": nav_item_left,
"width": nav_item_width
}, 300, 'swing')
}看看这个特效 导航栏的: http://www.300.cn/special/marketingWebsite.html
<div id="header" class="top">
<div class="center clear">
<div class="left logo">
<a href="/special/marketingWebsite.html">
<img src="http://s.300.cn/v2.0/home/images/z-logo.png" alt="中企动力">
</a>
</div>
<div class="top-nav clear">
<div class="nav-item">
<a class="nav-a" href="/special/marketingWebsite.html">
首页
</a>
</div>
<div class="nav-item">
<a class="nav-a" href="./product.html">
建站类型
</a>
<ul>
<li>
<a href="/special/website.html">
全网门户网站
</a>
</li>
<li>
<a href="/special/mobile.html">
移动门户网站
</a>
</li>
<li>
<a href="/special/zshops.html">
商城门户网站
</a>
</li>
</ul>
</div>
<div class="nav-item">
<a class="nav-a" href="./solution.html">
行业解决方案
</a>
<ul>
<li>
<a href="/special/zshops.html">
企业电商解决方案
</a>
</li>
<li>
<a href="/special/industry.html">
工业品内贸解决方案
</a>
</li>
<li>
<a href="/special/decoration.html">
装修企业解决方案
</a>
</li>
<li>
<a href="/special/eco.html">
生态农业门户解决方案
</a>
</li>
</ul>
</div>
<div class="nav-item">
<a class="nav-a" href="/special/case2.html">
案例赏析
</a>
</div>
<div class="nav-item">
<a class="nav-a" href="/special/business.html">
服务标准
</a>
</div>
<div class="nav-item">
<a class="nav-a" href="/special/force.html">
全国网点
</a>
</div>
<div class="nav-item">
<a class="nav-a" href="/special/honor.html">
了解中企
</a>
</div>
<div class="item-line" style="left: 0px; width: 0px;"></div>
</div>
<div class="right">
<p><span>400-660-5555</span></p>
</div>
<div class="right">
<div class="contact-qq">
<a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzgwMDE0NDcwMF80NjQ2ODlfODAwMTQ0NzAwXzJf" target="_blank"><img src="http://s.300.cn/v2.0/home/images/special/qq.png" alt="img"><span>QQ咨询</span></a>
</div>
</div>
</div>
</div>
header.css
@charset "utf-8";
#header{
height: 54px;
background: #182836;
width: 100%;
position: fixed;
top: 0;
z-index: 99;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.logo {
float: left;
margin: 12px 0;
}
.top-nav{
float: left;
margin: 0 0 0 30px;
position: relative;
}
.nav-item{
float: left;
position: relative;
}
.nav-a{
font-size: 14px;
color: #fff;
line-height: 54px;
height: 54px;
display: block;
text-align: center;
padding: 0 20px;
cursor: pointer;
}
.nav-item ul{
position: absolute;
z-index: 11;
width: 130%;
left: 50%;
margin-left: -65%;
background: #00294B;
padding: 16px 0;
visibility: hidden;
opacity: 0;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.nav-item:hover ul{
opacity: 1;
visibility: visible;
}
.nav-item ul li a{
font-size: 14px;
display: block;
text-align: center;
line-height: 36px;
width: 100%;
color: #bce4ff;
}
.nav-item ul li a:hover{
color: #3db1ea;
}
.item-line{
width: 0;
height: 3px;
position: absolute;
left: 0;
bottom: 0;
background: #3DB1EA;
}
#header .right{
float: right;
}
#header .right p{
font-size: 14px;
color: #3db1ea;
margin: 0;
line-height: 54px;
height: 54px;
}
#header .right p span{
font-size: 26px;
font-weight: bold;
}
#header.opacity{
background: rgba(24, 40, 54, 0.7);
}
#header.opacity:hover{
background: rgba(24, 40, 54, 1);
}
.contact-qq {
height: 54px;
line-height: 54px;
margin-right: 40px;
}
.contact-qq a {
display: block;
}
.contact-qq img {
margin-right: 5px;
display: inline-block;
vertical-align: middle;
}
.contact-qq span {
color: #fff;
display: inline-block;
vertical-align: middle;
}
js文件:
function() {
item_line.stop(true, true).animate({
"width": "0"
}, 300, 'swing')
}
function() {
var nav_item_left = $(this).position().left;
var nav_item_width = $(this).width();
item_line.stop(true, false).animate({
"left": nav_item_left,
"width": nav_item_width
}, 300, 'swing')
}