[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 });
以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; });