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; 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">‹‹</div>' + '<div class="ruler_btn_right">››</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'; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0