功能一:右方sidebar控制整个页面的切换
功能二:右方sidearea包含2个hover图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd"> <html xmlns="www.w3.org/1999/xhtml" > <head> <title>hey</title> <style> .dc{ position:absolute; width:100%; height:800px; } #div_content{ position:relative; width:100%; height:800px; background:gray; float:right; overflow:hidden; } .inner{ margin-left:auto; margin-right:auto; } #sidebar{ position:fixed; z-index:999; width:21px; height:149px; top: 40%; right: 131px; } img{ border:0px; } .link-list{ list-style:none; width:21px; height:126px; position:absolute; top:6px; left:3px; margin:0px; padding:0px; } .anchor:active a { opacity: 0.3; } .link-list li a{ text-decoration: none; display: inline-block; color: #0069ca; width: 12px; height: 12px; cursor: pointer; overflow: hidden; background: #e1f3ef; border-radius: 5px; margin-top: 4px; } .sidearea{ right: 100px; bottom:90px; } .fix{ position:fixed; z-index:999; } ul{ list-style:none; margin:0; padding:0; } .sidearea li{ margin:10px; } a{ text-decoration:none; } .sidearea .e_li_1 a{ display:block; width:56px; height:56px; background:url(2d_default.png); } .sidearea .e_li_2 a{ display:block; width:56px; height:56px; background:url(weibo_default.png); } .sidearea .e_li_1 a:hover{ background:url(2d_hover_small.png); } .sidearea .e_li_2 a:hover{ background:url(weibo_hover.png); } </style> <script> </script> </head> <body> <div id="div_left"> <div id="sidebar"> <img src="sidebar.png" alt> <ul class="link-list" id="menu" > <li class="anchor" > <a id="con1"></a> </li> <li class="anchor"> <a id="con2"></a> </li> <li class="anchor" > <a id="con3"></a> </li> <li class="anchor" > <a id="con4"></a> </li> <li class="anchor" > <a id="con5"></a> </li> <li class="anchor" > <a id="con6"></a> </li> <li class="anchor" > <a id="con7"></a> </li> </ul> </div> </div> <div class="sidearea fix" id="sidearea"> <ul> <li class="e_li_1"> <a href="javascript:void(0);"> </a> </li> <li class="e_li_2"> <a href="http://weibo.com/qunarxiaoyuan" target="_blank"> </a> </li> <li class="e_2d_show " style="display: none;"> </li> </ul> </div> <div id="div_content"> <div id="divc1" class="dc" style="background-color:#45b19a" >111111111111111111111111111111</div> <div id="divc2" class="dc" style="background-color:#ff777a">2222222222222222222222222222</div> <div id="divc3" class="dc" style="background-color:#80ab51">333333333333333333333333</div> <div id="divc4" class="dc" style="background-color:#a285c5">4444444444444444444444444</div> <div id="divc5" class="dc" style="background-color:#fbb168">555555555555555555555555</div> <div id="divc6" class="dc" style="background-color:#456084">666666666666666666666666</div> <div id="divc7" class="dc" style="background-color:#B2BBEC">77777777777777777777</div> </div> <script> try{ var step = 15; var speed = 1; var th= 800; function changePageLeft(){ var dc = document.getElementById("div_content"); var dcc = dc.childNodes; var target = event.target; var tg =parseInt(event.target.id.slice(-1)); //alert(tg); //获得当前显示内容divnow,和即将显示内容divnext var divnow = null; var divnext = null; var j = 0; for(var i=0;i<dcc.length;i++){ // alert(dcc[i]); if(dcc[i].nodeType == 1){ j++; // alert(j + ""+ tg); if(j==tg) divnext = dcc[i]; if(dcc[i].style.top == "0px") divnow = dcc[i]; } } // alert(divnext.id); // alert(divnow.id); if(divnow != divnext){ move(divnow,divnext); } } function changeTop(divNow,divNext,hundle){ //var top = document.defaultView.getComputedStyle(div,null)["top"]; 无设置的函数 var topNow = divNow.style.top;//返回空字符串 不是null var topNow2 = parseInt(topNow.slice(0,-2)); var topNext = divNext.style.top; var topNext2 = parseInt(topNext.slice(0,-2)); //alert(top2); // var heightp = parseInt(document.defaultView.getComputedStyle(div,null)["height"].slice(0,-2)); // alert(heightp); topNow2 -= step; topNext2 -= step; divNow.style.top = topNow2 + "px"; divNext.style.top = topNext2 + "px"; //alert(top2); //移出界面时停止 if(Math.abs(topNow2) > th){ clearInterval(hundle); //当前页面 divNow.style.top = th + "px"; //Next页面 divNext.style.top = "0px"; } } //持续改变top function move(divNow,divNext){ var mup = setInterval(function () {changeTop(divNow,divNext,mup);},speed); } function changeHoverImage(){ var targetid = event.target.id; var target = document.getElementById(targeid); if(event.type == "mouseover") target.style.src = "2d_hover_small.png"; if(event.type == "mouseout") target.style.src = "2d_default.png"; } //1111111111111111111111111 //菜单栏事件 var dr = document.getElementById("div_left"); dr.addEventListener("click",changePageLeft); //var sidearea = document.getElementById("sidearea"); // sidearea.addEventListener("mouseover",changeHoverImage); //所有内容隐藏 var dc = document.getElementById("div_content"); // alert("tp" + dc.nodeType); var dcc = dc.childNodes; // alert(dcc.length); var j=0; for(var i=0;i<dcc.length;i++){ //alert("key " + dcc[i].nodeType +" " + dcc[i].nodeName); //显示第一个 if(dcc[i].nodeType == 1){ j++; dcc[i].style.top ="0px"; //alert(dcc[i].id); if(j!= 1){ dcc[i].style.top = th + "px"; } } } } catch(e){ alert(e.name + e.message); } </script> </body> </html>
模拟去某网的招聘页面
原创
©著作权归作者所有:来自51CTO博客作者bysowhat的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:CSS-Position
下一篇:后台建站基础
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【面试招聘】去不了大厂实习,小厂实习去吗?
各位读者们,我是千与千寻,大家好,最近马上就要秋招正式批了,祝大家都能找到满意的offer!习我结合...
人工智能 java 编程语言 面试 机器学习 -
python 爬去拉钩测试招聘信息
代码如下: 结果图:
html chrome safari Python