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';
   .........完整代码请登录后点击上方下载按钮下载查看