话不多说直接上代码
css代码:
<style>
.main-wrapper {
position: fixed;
top: 100px;
left: 355px;
right: 10px;
z-index: 1;
bottom: 0;
overflow: auto;
-webkit-transition: left 0.28s;
transition: left 0.28s;
}
.ruler {
position: fixed; /*位置 固定的*/
background-color: #303030; /*背景颜色*/
background-image: linear-gradient(90deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(180deg, #303030 50%, transparent 50%), linear-gradient(90deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(180deg, #303030 70%, transparent 70%), linear-gradient(90deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
background-size: 50px 30px; /*指定背景图像大小*/
background-repeat: repeat-x; /*背景图像的重复方式*/
min-height: 30px;
z-index: 1;
}
.ruler.v {
position: absolute;
left: 0;
top: 30px;
transform-origin: 0 0;
height: 30px;
width: 1050px;
background-position: 0 100%;
transform: rotate(-90deg) translateX(-100%);
border-bottom: 1px solid #696969;
}
.ruler.h {
position: absolute;
height: 30px;
width: 100%;
border-left: 30px solid #535353;
border-bottom: 1px solid #696969;
background-position: 0 100%;
}
.scale {
list-style-type: none;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
overflow: hidden;
white-space: nowrap;
color: #b1b4b4;
font-size: 0;
text-shadow: 0px 1px 1px #000;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.scale li {
display: inline-block;
width: 50px;
text-align: right;
padding-right: 2px;
font-size: 11px;
}
.ruler.h input[type="range"]::-webkit-slider-thumb {
transform: translateY(30px);
}
.ruler.h input[type="range"]::-moz-range-thumb {
transform: translateY(30px);
}
.ruler.h .line .tempLine {
display: none;
position: absolute;
top: 30px;
left: 50px;
width: 1px;
height: 3000px;
background: #f00;
}
.ruler.h .line .dragLine {
cursor: e-resize;
}
.ruler.h .line li {
position: absolute;
top: 30px;
left: 10px;
width: 1px;
height: 3000px;
background: #1ee5f7;
}
.ruler.v .scale li {
text-align: left;
}
.ruler.v .line {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
height: 30px;
width: 100%;
}
.ruler.v .line .tempLine {
display: none;
position: absolute;
top: 30px;
left: 50px;
width: 1px;
height: 3000px;
background: #f00;
}
.ruler.v .line .dragLine {
cursor: s-resize;
}
.ruler.v .line li {
position: absolute;
top: 30px;
left: 10px;
width: 1px;
height: 3000px;
background: #1ee5f7;
}
</style>
HTML代码:
<div>
<!-- class="ruler" -->
<div>
<div class="ruler h">
<ul class="scale">
<li>0</li>
<li>50</li>
<li>100</li>
<li>150</li>
<li>200</li>
<li>250</li>
<li>300</li>
<li>350</li>
<li>400</li>
<li>450</li>
<li>500</li>
<li>550</li>
<li>600</li>
<li>650</li>
<li>700</li>
<li>750</li>
</ul>
<!-- <ul class="line">
<li class="tempLine"></li>
</ul> -->
</div>
<div class="ruler v">
<ul class="scale">
<li>950</li>
<li>900</li>
<li>850</li>
<li>800</li>
<li>750</li>
<li>700</li>
<li>650</li>
<li>600</li>
<li>550</li>
<li>500</li>
<li>450</li>
<li>400</li>
<li>350</li>
<li>300</li>
<li>250</li>
<li>200</li>
<li>150</li>
<li>100</li>
<li>50</li>
<li>0</li>
</ul>
<!-- <ul class="line">
<li class="tempLine"></li>
</ul> -->
</div>
</div>
<div style="border: 1px solid red;width: 1900px;height: 1500px;"></div>
</div>
以上功能还需要调一下。但我没调出来,欢迎大家讨论已经为我解答疑惑。谢谢!