有关HTML中的翻转条应用技能共享

今日学习培训牛腩新闻公布系统软件的情况下牛腩老师讲到了翻转条的1些专业知识,提到的很少,只涉及到到了翻转条的1一部分专业知识,假如想深层次科学研究的话这些是不足的,还要自身去收集1些有关的专业知识
我说1个状况大伙儿1定普遍 ,便是在网页页面中删掉1些物品的情况下翻转条常常还在删掉物品以前的部位,而并不是十分不人的本性化的跑到那1页的顶部,那末这是如何完成的呢?实际上方法很简易,只必须在.aspx的源代码中的顶端一部分再加 MaintainScrollPositionOnPostback ="true"便可。见下图:
 
以上这个状况便是在学习培训牛腩新闻公布系统软件的情况下遇到的,下面就给大伙儿来共享1些别的有关html翻转条的应用技能
(1)掩藏翻转条
<bodystyle="overflow-x:hidden;overflow-y:hidden">
(2)怎样在模块格或涂层中出現翻转条
<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>
(3)javascript更改架构中翻转条的款式,例如更改色调、改成平面实际效果等
<STYLE>
BODY {SCROLLBAR-FACE-COLOR: #ffcc99;
SCROLLBAR-HIGHLIGHT-COLOR: #ff0000;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR⑶DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ff0000;
SCROLLBAR-TRACK-COLOR: #dee0ed;
SCROLLBAR-DARKSHADOW-COLOR: #ffff00;}
</STYLE>
表明:
scrollbar⑶dlight-color:color;设定或查找翻转条亮边框色调;
scrollbar-highlight-color:color;设定或查找翻转条三d页面的亮边色调;
scrollbar-face-color:color;设定或查找翻转条三d表层的色调;
scrollbar-arrow-color:color;设定或查找翻转条方位箭头的色调;当翻转条出現但不能用时,此特性无效;
scrollbar-shadow-color:color;设定或查找翻转条三d页面的暗边色调;
scrollbar-darkshadow-color:color;设定或查找翻转条暗边框色调;
scrollbar-base-color:color;设定或查找翻转条标准色调。其它页面色调将据此全自动调剂。
scrollbar-track-color:color;设定或查找翻转条的拖拽地区色调
备注:
color为你要设定的色调编码,能够是16进制的,例如#FF0000,能够是以RGB表明的,例如rgb(255,0,255);设定翻转条款式的情况下无须要把全部的特性都用上才会起效。
(4)javascript中的网页页面元素精准定位
clientX、clientY是电脑鼠标当今相对网页页面的部位,当电脑鼠标坐落于网页页面左上角时clientX=0, clientY=0;
offsetX、offsetY是电脑鼠标当今相对网页页面中的某1地区的部位,当电脑鼠标坐落于网页页面中这1地区的左上角时offsetX=0, offsetY=0;
screenX、screenY是电脑鼠标相对客户全部显示屏的部位;
x、y是电脑鼠标当今相对当今访问器的部位
scrollLeft:设定或获得坐落于目标左侧界和对话框中现阶段可见內容的最左端之间的间距(由于有翻转条的造成,因此现阶段网页页面可见內容是不确定的)。
scrollTop:设定或获得坐落于目标最顶端和对话框中可见內容的最顶端之间的间距。
left:目标相对网页页面的X座标。
top:目标相对网页页面的Y座标
(5)屏蔽挑选,右键等
<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
下面的这个小事例是 完成翻转条依据窗体的尺寸全自动设定

拷贝编码
编码以下:

<SPAN style="FONT-SIZE: 18px"><html>
<head>
<style type="text/css">
&nbsp; .TopDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:130px;
&nbsp;&nbsp;&nbsp;&nbsp; top:10px;
&nbsp;&nbsp;&nbsp;&nbsp; width:105;
&nbsp;&nbsp;&nbsp;&nbsp; height:30;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:red
&nbsp; }
&nbsp; .LeftDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:10px;
&nbsp;&nbsp;&nbsp;&nbsp; top:40px;
&nbsp;&nbsp;&nbsp;&nbsp; width:120;
&nbsp;&nbsp;&nbsp;&nbsp; height:60;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:yellow
&nbsp; }
&nbsp; .MainDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:130px;
&nbsp;&nbsp;&nbsp;&nbsp; top:40px;
&nbsp;&nbsp;&nbsp;&nbsp; width:120;;
&nbsp;&nbsp;&nbsp;&nbsp; height:80;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:auto;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:blue
&nbsp; }
</style>
<script type="text/javascript" language="javascript">
function setStyle()
{
//145的来历LeftDiv的left+width+15(15是翻转条的宽度)
document.getElementById("a").style.width=document.body.clientWidth - 145;
//130的来历LeftDiv的left+width
document.getElementById("c").style.width=document.body.clientWidth - 130;
//55的来历TopDIV的top+height+15(15是翻转条的宽度)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//40的来历TopDIV的top+height
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</script>
&nbsp;
</head>
<body onresize="setStyle();" onLoad="setStyle();">
&nbsp;
<div id='a' class="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
&nbsp;
<div id='b' class="LeftDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
&nbsp;class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>
</SPAN>

翻转条的应用是很普遍的,它的有关专业知识也是非常的多,期待自身能在持续的学习培训中,持续的总结,使自身的学习培训工作能力和学习培训高效率能有1定的提升.