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

代码语言：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; width:0; height:0;background:rgba(255,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FF0000,endColorstr=#99FF0000);text-align:right;}';
    css += '.ruler_new_rectangle .ruler_new_text{ position:absolute; bottom:15px; right:15px; background-color:#F4EA1E; padding:3px 5px;color: #000;}';
    css += ':root .ruler_new_rectangle .ruler_new_rectangle{filter:none}';
    css += '.ruler_new_line{ position:absolute;}';
    css += '.ruler_new_line div{position: absolute;width: 1px;height: 1px;overflow: hidden;background-color: #F00;}';
    css += '.ruler_new_line .ruler_new_text{ position:absolute; top: 50%;left: 50%;width: 100px;height: 20px;margin: -10px 0 0 -50px;background-color: transparent;text-align: center;font-weight: bold;color: #000;}';
    css += '#ruler_mini{ position:fixed; z-index:99999; left:0; bottom:0; display:none; width:50px; height:15px; margin:5px; overflow:hidden; border:1px solid #000; background:url(' + imgUrl + 'ruler.gif) no-repeat 0 -85px; cursor:pointer;}';
    css += '* html{background-image:url(about:blank);}';
    css += '* html #ruler_mini{ position:absolute;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0));}';
    var oStyle = document.createElement('style');
    oStyle.type = 'text/css';
    oStyle.innerHTML = css;
    document.getElementsByTagName('head')[0].appendChild(oStyle);
    var oRuler = document.createElement('div')
      , oRulerText = '<div class="ruler_text_wrap">W=<span class="ruler_text_w">0</span>px<span class="ruler_text_d"></span></div>' + '<div class="ruler_num"></div>' + '<div class="ruler_num ruler_num_b"></div>' + '<div class="ruler_mark"><div></div></div>' + '<div class="ruler_mark ruler_mark_b"><div></div></div>' + '<div class="ruler_drag"></div>' + '<div class="ruler_option"><a href="javascript:void(0);" title="矩形区域" class="ruler_rectangle"></a><a href="javascript:void(0);" title="点对点距离" class="ruler_line"></a><a href="javascript:void(0);" title="最小化" class="ruler_minimize"></a><a href="javascript:void(0);" title="关闭" class="ruler_close"></a></div>' + '<div class="ruler_btn_left">&lsaquo;&lsaquo;</div>' + '<div class="ruler_btn_right">&rsaquo;&rsaquo;</div>';
    oRuler.setAttribute('id', 'ruler');
    oRuler.innerHTML = oRulerText;
    document.body.appendChild(oRuler);
    oRuler.style.top = document.body.scrollTop + window.screen.availHeight / 2 - 100 + 'px';
    oRuler.style.left = document.body.scrollLeft + window.screen.availWidth / 2 - Math.round(parseInt(getStyle(oRuler, 'width'))) / 2 + 'px';
    var aMark = getClass(oRuler, 'ruler_mark')
      , aMarkNum = getClass(oRuler, 'ruler_num')
      , oDrag = getClass(oRuler, 'ruler_drag')[0]
      , oTextW = getClass(oRuler, 'ruler_text_w')[0]
      , oTextD = getClass(oRuler, 'ruler_text_d')[0]
      , oBtnLeft = getClass(oRuler, 'ruler_btn_left')[0]
      , oBtnRight = getClass(oRuler, 'ruler_btn_right')[0]
      , oOption = getClass(oRuler, 'ruler_option')[0]
      , oRectangle = getClass(oOption, 'ruler_rectangle')[0]
      , oline = getClass(oOption, 'ruler_line')[0]
      , oMinimize = getClass(oOption, 'ruler_minimize')[0]
      , oClose = getClass(oOption, 'ruler_close')[0]
      , rulerWidth = parseInt(getStyle(oRuler, 'width'));
    oTextW.innerHTML = rulerWidth + 2;
    oTextW.onselectstart = selectFalse;
    for (var i = 0; i < aMarkNum.length; i++) {
        aMarkNum[i].onselectstart = selectFalse;
    }
    oBtnLeft.onselectstart = selectFalse;
    oBtnRight.onselectstart = selectFalse;
    function selectFalse() {
        return false;
    }
    function initMarkNum(rulerWidth) {
        var count = 0
          , str = '';
        for (var i = 0; i < rulerWidth / 50; i++) {
            count += 50;
            str += '<div style="left:' + count + 'px;">' + count + '</div>';
        }
        for (var i = 0; i < aMarkNum.length; i++) {
            aMarkNum[i].innerHTML = str;
        }
    }
    initMarkNum(rulerWidth);
    for (var i = 0; i < aMark.length; i++) {
        aMark[i].onmousedown = function(e) {
            var event = e || window.event
              , startX = event.clientX
              , oRulerLeft = oRuler.offsetLeft
              , oNewDiv = document.createElement('div');
            for (var i = 0; i < aMark.length; i++) {
                aMark[i].innerHTML = '';
            }
            oTextD.innerHTML = '';
            this.appendChild(oNewDiv);
            if (this.setCapture) {
                this.onmousemove = mouseMove;
                this.onmouseup = mouseUp;
                this.setCapture();
            } else {
                document.onmousemove = mouseMove;
                document.onmouseup = mouseUp;
            }
            function mouseMove(e) {
                var event = e || window.event
                  , endX = event.clientX
                  , width = endX - startX;
                if (endX > startX) {
                    oNewDiv.style.left = startX - oRulerLeft + 'px';
                    var oRulerRight = oRulerLeft + parseInt(getStyle(oRuler, 'width')) + 1;
                    width = endX > oRulerRight ? oRulerRight - startX : width;
                    oNewDiv.style.width = width + 'px';
                    oTextD.innerHTML = 'D=' + width + 'px';
                } else {
                    if (endX < oRulerLeft - 1) {
                        width = oRulerLeft - startX - 1;
                        oNewDiv.style.left = -1 + 'px';
                    } else {
                        oNewDiv.style.left = endX - oRulerLeft + 'px';
                    }
                    .........完整代码请登录后点击上方下载按钮下载查看