|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
<html><head><title>层转动条DIY-Poweredbyyexj00</title><style><!--*{font-size:12px}--></style><scriptlanguage="Javascript"><!--function$(obj){returndocument.all[obj];}functionsetbarHeight(){$("scroll_bar").style.height=($("scroll_content").clientHeight)/($("scroll_content").scrollHeight)*($("scroll_area").offsetHeight)+"px";if($("scroll_bar").offsetHeight>=$("scroll_area").offsetHeight){$("scroll_bar").style.display=none;}}//--></script><scriptlanguage="Javascript"><!--vardrag=false;//是不是同意拖动varmx,my;varscrollbar_L;varscrollbar_T;varscrollbar_W;varscrollbar_H;varscrollarea_T,scrollarea_H;varstartT,startY;functiongetInfor(){mx=event.clientX+document.documentElement.scrollLeft;my=event.clientY+document.documentElement.scrollTop;scrollbar_L=document.documentElement.clientLeft+$("outerDiv").style.pixelLeft+$("scroll_area").offsetLeft+$("scroll_bar").offsetLeft;scrollbar_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop+$("scroll_bar").offsetTop;scrollbar_W=$("scroll_bar").offsetWidth;scrollbar_H=$("scroll_bar").offsetHeight;scrollarea_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop;scrollarea_H=$("scroll_area").offsetHeight;}functiondragit(){getInfor();if(event.srcElement.id=="scroll_bar"){drag=true;$("scroll_bar").style.background="#cccccc";startT=$("scroll_bar").style.pixelTop;startY=event.clientY;document.onmousemove=move;}}functionmove(){if(drag==true){$("scroll_bar").style.pixelTop=startT+event.clientY-startY;$("scroll_content").scrollTop=$("scroll_bar").style.pixelTop/$("scroll_area").offsetHeight*$("scroll_content").scrollHeight;if($("scroll_bar").style.pixelTop<=0){$("scroll_bar").style.pixelTop=0}if($("scroll_bar").style.pixelTop>=(scrollarea_H-scrollbar_H)){$("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H;}returnfalse;}}document.onmousedown=dragit;document.onmouseup=newFunction("drag=false;$(scroll_bar).style.background=#efefef");//--></script></head><body><divid="outerDiv"style="position:absolute;left:100px;top:50px;width:130px;height:130px"><divid="scroll_content"style="position:absolute;padding:2px;left:2px;top:5px;width:100px;height:100px;border:1pxsolid#cccccc;overflow:hidden"><!--这是层的内容区--><scriptlanguage="Javascript"><!--varstr="这个是用层做的转动条!";str=str.split("");for(i=0;i<str.length;i++){document.write(str[i]+"<br/>");}//--></script><!--层的内容区停止--></div><divid="up_btt"style="position:absolute;left:104px;top:5px;width:8px;height:16px;background:#efefef;font-size:0px;border:1pxoutset#cccccc"></div><divid="scroll_area"style="position:absolute;left:104px;top:22px;width:8px;height:66px;font-size:0px;background:#efefef"><divid="scroll_bar"style="position:absolute;left:0px;top:0px;width:8px;background:#efefef;font-size:0px;border:1pxoutset#cccccc"></div></div><divid="down_btt"style="position:absolute;left:104px;top:89px;width:8px;height:16px;background:#efefef;font-size:0px;border:1pxoutset#cccccc"></div></div></body></html>
提醒：您能够先修正部分代码再运转，复制代码和保留代码功效在Firefox下有效。
结构清晰，容易被搜索引擎搜索到，天生优化了seo |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:16:00
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜