[09/07木,15]

download.jsp中锚点定位:

导航代码:

 1 <div class="subnav">  
 2   <div class="container">
 3     <div class="down product_nav">
 4       <ul class="product_list center-block" id="productUl">
 5         <li class="this click"><a idparam="#linux" href="wel/about?name=download#iphoneWarp2" class="l_logo" onclick="urchinTracker('/product/nav/linux/');"><span>Android</span></a></li>
 6         <li class="adjustWidth"></li>
 7         <li class="click"><a idparam="#android" href="wel/about?name=download#iphoneWarp1" class="a_logo" onclick="urchinTracker('/product/nav/android/');"><span>iPhone</span></a></li>
 8         <li class="adjustWidth"></li>
 9         <li class="click"><a idparam="#win" href="wel/about?name=download#iphoneWarp3" class="w_logo" onclick="urchinTracker('/product/nav/win/');"><span>PC客户端</span></a></li>
10         <!-- <li><a idparam="#ios" href="javascript:;" class="i_logo" onclick="urchinTracker('/product/nav/ios/');"><span>用户协议</span></a></li> -->
11         <li class="cb"></li><div class="clear"></div>
12       </ul>
13       <div class="cb"></div>
14     </div><!-- /product_nav  --> 
15   </div><!-- container -->
16 </div><!-- /subnav -->

下面div

 1 <div class="group">
 2   <table width="1111" border="0" cellspacing="0" cellpadding="0">
 3     <tr>
 4       <td width="50%" height="570">
 5         <a class="dwnAnchor"></a>
 6         <div class="android">
 7           <h3>99云Android版</h3>        
 8           <h5>随时随地,办公更轻松</h5>
 9           <p>版本:V6.5.2.1120</p>
10           <p>更新:2015-04-10</p>
11           <p>大小:5.33MB</p>
12           <p>系统:Android2.3及以上版本</p>
13           <a class="btn btn-primary btn-lg" href="phone/Android?appname=99iwork" target="_blank">立即下载</a>
14           <span>扫描二维码</span> 
15         </div>
16       </td>
17       <td width="50%" align="center"><img src="resources/images/juan/download/dlandroid.jpg" /></td>
18     </tr>
19   </table>
20   <div class="underline"></div>
21   <table width="1111" border="0" cellspacing="0" cellpadding="0">
22     <tr>
23       <td width="50%" height="570"><img src="resources/images/juan/download/dliPhone.jpg" /></td>
24       <td width="50%">
25         <a class="dwnAnchor"></a>
26         <div class="iphone">
27           <h3>99云iPhone版</h3> 
28           <h5>工作更简单,更有效</h5>
29           <p>版本:V4.2.2</p>
30           <p>更新:2015-04-08</p>
31           <p>大小:25.9MB</p>
32           <p>系统:iOS 5.0以上版本</p>
33           <a class="btn btn-primary btn-lg" href="wel/about?name=install" target="_blank">立即下载</a>
34           <span>扫描二维码</span>
35         </div>    
36       </td>
37     </tr>
38   </table>
39   <div class="underline"></div>
40   <table width="1111" border="0" cellspacing="0" cellpadding="0">
41     <tr>
42       <td width="50%" height="570">
43         <a class="dwnAnchor"></a>
44         <h3>99云PC客户端</h3>        
45         <h5>全新界面风格,完美用户体验</h5>
46         <p>版本:V6.5.2.1120</p>
47         <p>更新:2015-04-10</p>
48         <p>大小:15.8MB</p>
49         <p>系统:XP/Vista/Win7/Win8</p>
50         <!-- <a class="btn btn-primary btn-lg" href="down/WFSetup.zip" target="_blank">立即下载</a> -->
51         <a class="btn btn-primary btn-lg" style="color:#333;background-color:#c7cacf;border-color:#c7cacf;cursor:default;border-radius:0px;font-family:Microsoft YaHei" href="javascript:;">敬请期待</a>
52       </td>
53       <td width="50%" align="center"><img src="resources/images/juan/download/dlPC.jpg" /></td>
54     </tr>
55   </table>   
56     <div class="underline winH"></div>
57 </div><!-- /group -->

js代码:

 1 $(function(){
 2   /*
 3   目的:没点击#productUl的li,使之对应的table的锚点<a class="dwnAnchor"></a>位置距顶部一定的位置
 4   因此,需要知道:#productUl的li、锚点和偏移的位置这三个对象
 5   */
 6   //定义这三个对象
 7   var indexLis ,subs,pianyi=70;
 8   //将需要点击的对象给到indexLis数组中
 9   indexLis = $('#productUl li.click');
10   //将table给到subs数组中
11   subs = $('.group table');
12   //给indexLis添加单击函数
13   indexLis.click(function(){
14     //获取indexLis的第i位置索引
15     var i = indexLis.index(this);
16     //获取subs第i位置距顶部的位置赋值给变量y
17     var y = subs.eq(i).offset().top;
18     //window.scroll(x,y) 跳转到页面的指定坐标点,目标点是以像素为单位从页面左上角为标记点的距离,水平和垂直滚动条滚动到相应x,y点
19     window.scroll(0,y-pianyi);
20   });
21 });

跨页面锚点定位:

例如:在head部分的导航里(导航是固定的,一次需要偏移),某一个a标签是定位到首页某个位置,如果在其他页面点击需要定位到首页的位置

导航部分html代码:

1   <ul id="nav">
2     <li><a href="wel/come" class="ahover">首页</a></li> 
3     <li><a href="wel/about?name=feature">功能</a></li>
4     <li class ="nav-anli"><a href="#anli">案例</a></li>
5     <li><a href="wel/about?name=download">下载</a></li>
6   </ul>
7   <!-- a锚点在网页某个位置 -->
8   <a id="anlimao"></a>

js代码:

 1 $(function(){
 2   $('.nav-anli').click(function(){
 3     var tm = $("#anlimao");
 4     //非主页 tm 找不到,
 5     if(tm.length){
 6       /*
 7         window.location.hash读取#值
 8         location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。
 9       */
10       var initHash = window.location.hash,pianYi=70;
11       if(initHash!=''){
12         //计算 anli dom 高度
13         var topY = $("#anlimao").offset().top;
14         window.scroll(0,topY-pianYi);
15       }
16     }
17   });
18 });

window.location 对象所包含的属性

以URL: http://b.a.com:88/index.php?name=kang&when=2011#first  为例

属性 描述 值 
hash 从井号 (#) 开始的 URL(锚),返回"#"之后的内容  "#first"
host 主机名和当前 URL 的端口号。等于hostname + port  "b.a.com:88"
hostname 当前 URL 的主机名,服务器的名字  "b.a.com"
href 当前页面完整的 URL  "http://www.a.com:88/index.php?name=kang&when=2011#first"
pathname 当前 URL 的路径部分,URL中主机名后的部分  "/index.php"
port 当前 URL 的端口号  "88"
protocol 当前 URL 的协议  "http:"
search 从问号 (?) 开始的 URL(查询部分)。"?"后的部分,又称为查询字符串  "?name=kang&when=2011"

 

 

 

 

 

 

 

 

window.location和document.location互相等价的,可以交换使用。

location的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载。

注意

URL:http://b.a.com:88/index.php?name=kang&how=#when=2011#first

search: "?name=kang&how=" 第一个"?"之后
hash: "#when=2011#first" 第一个"#"之后的内容

 

 

方法

location.assign( url )
location.assign('http://www.baidu.com'); 等同于 window.location = 'http://www.baidu.com' 这种方式会讲新地址放到浏览器历史栈中,意味着转到新页面后“后退按钮”仍可以回到该页面。

location.replace( url )
与assign方法一样,但会从浏览器历史栈中删除本页面,也就是说跳转到新页面后“后退按钮”不能回到该页面。目前IE、Chrome只是简单的跳转,只有Firefox会删除本页面的历史记录。

location.reload( force )
重新载入当前页面。force为true时从服务器端重载;false则从浏览器缓存中重载,默认值false。

导航加高亮背景

给每个点击的导航的li加亮,实际上是给每个当前的li加背景图片为高亮(每个背景图片不同) ,其他的回到非高亮的

html代码:

 1 <div class="subnav">
 2   <ul id="feature">
 3     <li><a href="wel/about?name=feature#hdfx" class="feature-index hdfx active bold"><span>互动分享</span></a></li>
 4     <li><a href="wel/about?name=feature#rwgl" class="feature-index rwgl"><span>任务管理</span></a></li>
 5     <li><a href="wel/about?name=feature#xmgl" class="feature-index xmgl"><span>项目管理</span></a></li>
 6     <li><a href="wel/about?name=feature#wdgl" class="feature-index wdgl"><span>文档管理</span></a></li>
 7     <li><a href="wel/about?name=feature#ydwq" class="feature-index ydwq"><span>移动外勤</span></a></li>
 8     <li><a href="wel/about?name=feature#ydsp" class="feature-index ydsp"><span>移动审批</span></a></li>
 9     <li><a href="wel/about?name=feature#qywx" class="feature-index qywx"><span>企业微信</span></a></li>
10     <li><a href="wel/about?name=feature#cwyj" class="feature-index cwyj"><span>财务预警</span></a></li> <div class="clear"></div>
11   </ul> 
12 </div><!-- /subnav -->

css代码:

 1 .subnav ul li a.hdfx{background:url("../../images/juan/feature/icon/hdfxh.png") no-repeat center center;}
 2 .subnav ul li a.rwgl{background:url("../../images/juan/feature/icon/rwglh.png") no-repeat center center;}
 3 .subnav ul li a.xmgl{background:url("../../images/juan/feature/icon/xmglh.png") no-repeat center center;}
 4 .subnav ul li a.wdgl{background:url("../../images/juan/feature/icon/wdglh.png") no-repeat center center;}
 5 .subnav ul li a.ydwq{background:url("../../images/juan/feature/icon/ydwqh.png") no-repeat center center;}
 6 .subnav ul li a.ydsp{background:url("../../images/juan/feature/icon/ydsph.png") no-repeat center center;}
 7 .subnav ul li a.qywx{background:url("../../images/juan/feature/icon/qywxh.png") no-repeat center center;}
 8 .subnav ul li a.cwyj{background:url("../../images/juan/feature/icon/cwyjh.png") no-repeat center center;}
 9 
10 .subnav ul li a.hdfx.active{background:url("../../images/juan/feature/icon/hdfx.png") no-repeat center center;}
11 .subnav ul li a.rwgl.active{background:url("../../images/juan/feature/icon/rwgl.png") no-repeat center center;}
12 .subnav ul li a.xmgl.active{background:url("../../images/juan/feature/icon/xmgl.png") no-repeat center center;}
13 .subnav ul li a.wdgl.active{background:url("../../images/juan/feature/icon/wdgl.png") no-repeat center center;}
14 .subnav ul li a.ydwq.active{background:url("../../images/juan/feature/icon/ydwq.png") no-repeat center center;}
15 .subnav ul li a.ydsp.active{background:url("../../images/juan/feature/icon/ydsp.png") no-repeat center center;}
16 .subnav ul li a.qywx.active{background:url("../../images/juan/feature/icon/qywx.png") no-repeat center center;}
17 .subnav ul li a.cwyj.active{background:url("../../images/juan/feature/icon/cwyj.png") no-repeat center center;}

js代码:

1 $("#feature li").click(function(){
2   $(this).find('a').addClass("active");
3   $(this).siblings().find('a').removeClass("active");
4 });

 [10/07金,15]

网站导航,点击哪个就在哪个加样式即使刷新页面和在同一页面,例如下例的首页和案例,

html代码:

1 <ul id="nav" class="list-inline">
2   <li><a href="wel/come">首页</a></li> 
3   <li><a href="wel/about?name=feature">功能</a></li>
4   <li class ="nav-anli"><a href="#anli">案例</a></li>
5   <li><a href="wel/about?name=download">下载</a></li>
6 </ul>

css代码:

.header .mid ul li .ahover{
    color:#2d63b0;
    border-bottom:3px solid #00479d;
    text-decoration:none;
    font-family:Microsoft YaHei,Helvetica,Arial,sans-serif;
}

使得点击每一个li,加的.ahover样式。即使页面刷新或在同一页面也保持不变,因此需要在没给页面都也上响应的js代码

首页的js代码:

因为首页和案例在同一个页面,因此需要url判断一下,区分首页和案例

1 var oLi = $(".list-inline").children("li");
2 if(location.hash=="#anli"){
3   $(oLi[2]).children().addClass("ahover");
4   $(oLi[2]).children().attr("style","color:#2d63b0");        
5 }else{
6   $(oLi[0]).children().addClass("ahover");
7   $(oLi[0]).children().attr("style","color:#2d63b0");    
8 }

说明:这里用了location.hash这个来判断是点击的首页还是案例页面

功能页面js代码:

1 var oLi = $(".list-inline").children("li");
2 $(oLi[1]).children().addClass("ahover");
3 $(oLi[1]).children().attr("style","color:#2d63b0");

下载页面js代码:

1 var oLi = $(".list-inline").children("li");
2 $(oLi[3]).children().addClass("ahover");
3 $(oLi[3]).children().attr("style","color:#2d63b0");

 [21/07火,15]

垂直居中

html:

<div class="main">
  <div class="vtlctBase w1k center">
    <div class="vtlctSub">
      <div class="cont w1k">垂直居中</div><!--/cont-->
    </div><!--/vtlctSub-->            
  </div><!--/vtlctBase-->
</div><!--/main-->

css:

.vtlctBase{display:table;height:100%; }
.vtlctBase .vtlctSub{vertical-align:middle; display:table-cell;}
.w1k{width:960px;-border:1px solid #f60;}
.center{margin:0 auto}
.main{height:505px}
.main .cont .sideLft{width:615px}
.main .cont .sideRgt{width:345px}

[09/08火,15]

不定高的情况下,垂直居中,例如:分别向左右浮动的div,左边的高变化,右边的高也随之变化,要求实现右边里的div垂直居中

思路1:通过js/jQuery动态获取左边的高度变化,再将左边的高度值赋给右边,最后将这个高度值写入右边的div中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
  <meta name="author" content="yahari@126.com" />
  <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="res/before/js/index.js"></script>
  <title>Document</title>
  <style>
.div{width:500px;height:100%;-border:1px solid #f60;}
.div1{width:200px;-height:500px;-border:1px solid #f60;}
.div2{width:200px;height:100%;-border:1px solid #f60;}
.vtlctBase {display: table;height: 100%;}
.vtlctBase .vtlctSub {vertical-align: middle;display: table-cell;}
.lft{float:left}
.rgt{float:right}
.clear{clear:both}
.f{background:blue}
.g{background:pink}
.a{height:50px;}
</style>
</head>
<body>
<div class="div vtlctBase f60">
  <div class="div1 lft f">
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
  </div>
  <div class="div2 rgt g vtlctBase">
    <div class="vtlctSub">222</div>
    <div class="clear"></div>
  </div>
</div>
  <script>
    var div1= $(".div1").height(); 
    var div2= $(".div2").height(); 
    div2 = div1;
    //console.log(div2);
    var div3 = div2 + "px";
    $(".div2").css('height',div3);
  </script>
</body>
</html>

 思路2:通过在本级div设置:display:inline-block;position: absolute;属性。(如果没有效果可以在其父级div设置:position:relative),避开使用float无法实现div垂直居中问题

[13/08木,15]

 jQuery使用click实现显示/隐藏。思路:判断默认样式

 

function cplb(){
  $("#cplb").click(function(){
    if($(this).attr('class')=='active'){
      $(this).removeClass("active");
      //$("#cont").css('display','block');
      //$("#cont").show();
    $("#cont").fadeIn(500);
    }else{
      $(this).addClass("active");
      //$("#cont").css('display','none');
      //$("#cont").hide();
     $("#cont").fadeOut(500);
    }
  });
}      

 [24/08月,15]

jQuery遍历li元素,并为其添加事件(例如,click事件);

html代码:

<div class="sort_title">产品分类</div>
<div class="prodCont">
   <ul id="cpfl">
    <li><a href="javascipt:;">连衣裙</a></li>
    <li>
      <a href="javascipt:;">牛仔裤</a>
      <div class="Det">
        <ul>
          <li><a href="javascipt:;">牛仔短裤</a></li>
          <li><a href="javascipt:;">牛仔裙</a></li>
          <li><a href="javascipt:;">背带裤</a></li>
          <li><a href="javascipt:;">背带裙</a></li>
          <li><a href="javascipt:;">牛仔长裤</a></li>
          <li><a href="javascipt:;">跨裤 哈伦裤</a></li>
          <li><a href="javascipt:;">九分裤 八分裤</a></li>                    
          <li><a href="javascipt:;">牛仔衣|外套</a></li>
        </ul>
      </div><!-- /Det -->
    </li>
    <li>
      <a href="javascipt:;">T恤</a>
      <div class="Det" style="display:none">
        <ul>
          <li><a href="javascipt:;">牛仔短裤</a></li>
          <li><a href="javascipt:;">牛仔裙</a></li>
          <li><a href="javascipt:;">背带裤</a></li>
          <li><a href="javascipt:;">背带裙</a></li>
          <li><a href="javascipt:;">牛仔长裤</a></li>
          <li><a href="javascipt:;">跨裤 哈伦裤</a></li>
          <li><a href="javascipt:;">九分裤 八分裤</a></li>                    
          <li><a href="javascipt:;">牛仔衣|外套</a></li>
        </ul>
      </div><!-- /Det -->

    </li>
    <li><a href="javascipt:;">雪纺衫</a></li>
    <li><a href="javascipt:;">短裤</a></li>
    <li><a href="javascipt:;">大码T恤专区</a></li>
    <li><a href="javascipt:;">短外套</a></li>
  </ul>         
</div><!-- /prodCont -->

css:

.sort_title {
  height: 30px;
  width: 208px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  padding-top: 5px;
  padding-left: 10px;
  border: 1px solid #ececec;
  background: #fbfbfb;
}
.prodCont li{
    min-height: 29px;
  width: 208px;
  background: url(../../before/images/yhr-cxda/prodDetAdd.png) no-repeat 15px 10px;
  border-top: 1px solid #dcdcdc;
    line-height:29px;
    text-indent:35px;
    
    
}
.prodCont li a{color:#0066cc;font-size:14px}
.prodCont .Det {display:none;}
.prodCont .Det li{
    background: url(../../before/images/yhr-cxda/prodDetLine.png) no-repeat 2px 15px;
    border:none;
    width: 150px;
    margin-left:20px;
    border-left: 1px dotted #898989;
    text-indent:15px;
    
}
.prodCont .Det li a{display:block;height: 29px;line-height:29px;-border-left:1px dotted #898989;}

js:

$("#cpfl>li").click(function(){
  var $sub = $(this).find(".Det");
  if($sub.css("display")=="none"){
    $sub.show()
  }else{
    $sub.hide();
  }
  $sub = null;
});

 

posted on 2015-07-09 12:01  yahari  阅读(246)  评论(0编辑  收藏  举报