作为程序员一定要保持良好的睡眠,才能好编程

说一说js常见的用法及特效有哪些?

发布时间:2017-12-29



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