js实现的一个带有刻度的尺子效果代码-html代码-BFW代码库

js实现的一个带有刻度的尺子效果代码

代码语言：html

所属分类：其他

代码描述：js实现的一个带有刻度的尺子效果代码，可以测量尺寸

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>尺子</title>

</head>
<body style="height:2000px" ryt12494="1">
<script>
    (function() {
    if (document.getElementById('ruler'))
        return;
    var css = ''
      , imgUrl = '//repo.bfw.wiki/bfwrepo/images/';
    css += '#ruler *{box-sizing:content-box;}';
    css += '#ruler{position: absolute;z-index:99999;top: 200px;left:200px;width: 698px;height: 100px;overflow: hidden;border: 1px solid #000;background:#FFFFD7 url(' + imgUrl + 'ruler.gif) repeat-x -1px 0;font:12px/160% Arial,Simsun;color: #000;-moz-user-select:none;-webkit-user-select:none;user-select:none;}';
    css += '.ruler_mark{position: absolute;top: 0;left: 0;width: 100%;height: 20px;cursor:text;}';
    css += '.ruler_mark_b{top: auto;bottom: 0;}';
    css += '.ruler_mark div{position: absolute;top: 0;left: 0;width: 0;height: 30px;background-color:#FFFF28;overflow: hidden;opacity:0.6;filter:alpha(opacity=60);}';
    css += '.ruler_mark_b div{top: auto;bottom: 0;}';
    css += '.ruler_num{position: absolute;top: 15px;left: 0;}';
    css += '.ruler_num_b{top: auto;bottom: 35px;}';
    css += '.ruler_num div{position: absolute;margin-left: -22px;width: 40px;text-align: center;line-height: 20px;}';
    css += '.ruler_text_wrap{position: absolute;width: 100%;line-height: 100px;text-align: center; font-size:14px;font-weight: bold;}';
    css += '.ruler_text_d{margin-left: 20px;}';
    css += '.ruler_btn_left{position: absolute;top: 30px;left: 0;width: 15px;height: 40px;line-height: 40px;cursor: w-resize;font-size: 16px;text-align: right;}';
    css += '.ruler_btn_right{position: absolute;top: 30px;right: 0;width: 15px;height: 40px;line-height: 40px;cursor: w-resize;font-size: 16px;}';
    css += '.ruler_drag{position: absolute;top: 20px;left: 0;width: 100%;height: 60px;cursor:pointer;cursor:-webkit-grab;cursor:-moz-grab;cursor:pointer \9;}';
    css += '.ruler_drag_move{cursor:-webkit-grabbing; cursor: -moz-grabbing;}';
    css += '#ruler_blank{ position:absolute; z-index:99999; top:0; left:0; display:none; width:100%; height:100%; background-color:#FFF;opacity:0;filter:alpha(opacity=0);}';
    css += '.ruler_option{ position:absolute; top:44px; left:30px;}';
    css += '.ruler_option a{ float:left; display:block; width:12px; height:12px; margin-right:5px; border:1px solid #FFFFD7; background:url(' + imgUrl + 'ruler.gif) no-repeat;}';
    css += '.ruler_option a:hover{ border:1px solid #E0E0E0; border-right-color:#666; border-bottom-color:#666; cursor:default;}';
    css += '.ruler_option a.ruler_rectangle{ background-position:0 -100px;}';
    css += '.ruler_option a.ruler_line{ background-position:-12px -100px;}';
    css += '.ruler_option a.ruler_minimize{ background-position:-24px -100px;}';
    css += '.ruler_option a.ruler_close{ background-position:-36px -100px;}';
    css += '.ruler_new_rectangle{ position:absolute; z-index:99999; left:0; top:0;.........完整代码请登录后点击上方下载按钮下载查看