"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') }