jquery图片测量标尺特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片测量标尺特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片测量标尺</title>
<link rel="stylesheet" href="css/ruler.css" type="text/css" />
<style type="text/css">
.demo_box{width:800px; height:972px; line-height:1.5; margin:0 auto; color:#333; font-size:84%;}
.demo_img{float:left;}
.demo_area{width:350px; float:right;}
.demo_area code{font-weight:700; font-family:arial;}
</style>
</head>

<body>
<div class="demo_box">
	<img width="445" height="972" class="demo_img" src="images/536.jpg" />
    <div class="demo_area">
    	<ul>
        	<li>显示/隐藏标尺快捷键：<code>R</code></li>
            <li>显示/隐藏参考线快捷键：<code>;</code></li>
            <li>新建参考线快捷键：<code>\</code></li>
            <li>隐藏标尺参考线快捷键：<code>Esc</code></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.PageRuler.1.1.js"></script>
</body>
</html>

JS代码(jquery.PageRuler.1.1.js):

/** by 张鑫旭 http://www.zhangxinxu.com/* 网页制作辅助开发工具，网页标尺以及网页参考线* 2010-08-04 v1.1 添加参考线拖移到标尺处“删除”的功能*/
(function($){
	$.pageRuler = function(params){
	params = params ||{
}
;
	var flag = $("#zxxScaleBox").size() === 0 ? true:false;
	if(flag){
	$('<div class="zxxScaleBox" id="zxxScaleBox" onselectstart="return false;
	"><div id="zxxScaleRulerH" class="zxxScaleRuler_h"></div><div id="zxxScaleRulerV" class="zxxScaleRuler_v"></div><div id="zxxRefDotH" class="zxxRefDot_h"></div><div id="zxxRefDotV" class="zxxRefDot_v"></div><div class="zxxRefCrtBg" id="zxxRefCrtBg" style="display:none;
	"><div class="zxxRefCrtTit"><a href="javascript:void(0);
	" id="zxxRefCrtClose" class="zxxRefCrtClose"></a></div><div class="zxxRefCrtX"><div class="zxxRefCrtLeft"><div class="zxxRefCrtDir"><input type="radio" id="zxxCrtV" class="zxxRefCrtRadio" name="zxxRefCrt" checked="checked" /><label for="zxxCrtV">垂直</label></div><div class="zxxRefCrtDir"><input type="radio" id="zxxCrtH" class="zxxRefCrtRadio" name="zxxRefCrt" /><label for="zxxCrtH">水平</label></div> <div class="zxxRefCrtPlace">位置：<input id="zxxRefCrtInput" class="zxxRefCrtInput" type="text" />px</div></div><div class="zxxRefCrtRight"><button type="button" id="zxxRefCrtSure" class="zxxRefCrtBtn">确定</button><button type="button" id="zxxRefCrtCancel" class="zxxRefCrtBtn">取消</button></div></div></div></div>').appendTo($("body"));
}
else{
	$("#zxxScaleBox").show();
}
//整个标尺盒子对象，垂直标尺与水平标尺对象，虚线对象，弹出框对象，单选对象，文本对象，按钮对象var x= $("#zxxScaleBox"),rh = $("#zxxScaleRulerH"),rv = $("#zxxScaleRulerV"),doth = $("#zxxRefDotH"),dotv = $("#zxxRefDotV"),bg = $("#zxxRefCrtBg"),clo = $("#zxxRefCrtClose"),rdov = $("#zxxCrtV"),rdoh = $("#zxxCrtH"),ipt = $("#zxxRefCrtInput"),sur = $("#zxxRefCrtSure"),cancel = $("#zxxRefCrtCancel"),dragFlag = false,oDrag = null;
	//浏览器宽高var w,h,bgw = bg.width(),bgh = bg.height();
	var f ={
	box:function(){
	w = $(window).width(),h = $(window).height();
	//整个box的宽高x.height(h).width(w);
	//弹出层的定位bg.css({
	left:(w - bgw) / 2,top:(h - bgh) / 2}
);
}
,ui:function(){
	rh.html("");
	rv.html("");
	//创建标尺数值for(var i=0;
	i<w;
	i+=1){
	if(i % 50 === 0){
	$('<span class="n">'+i+'</span>').css("left",i+2).appendTo(rh);
}
}
//垂直标尺数值for(var i=0;
	i<h;
	i+=1){
	if(i % 50 === 0){
	$('<span class="n">'+i+'</span>').css("top",i+2).appendTo(rv);
}
}
}
,ie6:function(){
	if(!window.XMLHttpRequest){
	$(window).scroll(function(){
	var t = $(document).scrollTop();
	x.css("top",t);
}
);
	if(flag){
	$(window).trigger("scroll");
}
}
}
,newv:function(t){
	//创建新的垂直参考线，有效宽度3像素var id = "zxxRefLineV"+($(".zxxRefLine_v").size()+1);
	$('<div class="zxxRefLine_v"></div>').appendTo(x).attr({
	"id":id,"title":t}
);
	return $("#"+id);
}
,newh:function(t){
	//创建新的垂直参考线，有效宽度3像素var id = "zxxRefLineH"+($(".zxxRefLine_h").size()+1);
	$('<div class="zxxRefLine_h"></div>').appendTo(x).attr({
	"id":id,"title":t}
);
	return $("#"+id);
}
,dashv:function(){
	$(document).bind("mousemove",function(e){
	//alert(dragFlag);
	if(dragFlag){
	//alert(e.screenX);
	//如果可以拖拽//垂直虚线的左坐标dotv.css("left",e.pageX);
}
}
);
}
,dashh:function(){
	$(document).bind("mousemove",function(e){
	if(dragFlag){
	//如果可以拖拽//垂直虚线的左坐标doth.css("top",e.pageY-$(window).scrollTop());
}
}
);
}
,//弹出框相关方法sure:function(){
	//点击确定按钮var dirv = rdov.attr("checked")? true:false;
	var v = parseInt(ipt.val(),10);
	if(v){
	var pos = v.toString()+"px";
	if(dirv){
	f.newv(pos).css("left",v-1);
}
else{
	f.newh(pos).css("top",v-1);
}
$(".zxxRefLine_v").show();
	$(".zxxRefLine_h").show();
	f.cacl();
}
else{
	alert("请输入合适的数值。");
}
}
,cacl:function(){
	ipt.val("");
	bg.hide();
	return false;
}
,//批量参考线创建crtv:function(arr){
	if($.isArray(arr)){
	$.each(arr,function(i,n){
	var posv =parseInt(n,10);
	if(posv > 0 && posv < w){
	nposv = posv.toString() + "px";
	f.newv(nposv).css("left",posv-1);
}
}
);
}
}
,crth:function(arr){
	if($.isArray(arr)){
	$.each(arr,function(i,n){
	var posh =parseInt(n,10);
	if(posh > 0 && posh < h){
	nposh = posh.toString() + "px";
	f.newh(nposh).css("top",posh-1);
}
}
);
}
}
,//获取批量参考线参数crtdata:function(){
	if(params.v){
	f.crtv(params.v);
}
if(params.h){
	f.crth(params.h);
}
}
,//初始化执行init:function(){
	f.box();
	f.ui();
	f.ie6();
	f.crtdata();
}
}
;
	f.init();
	/*浏览器拉伸时，标尺自适应*/
$(window).resize(function(){
	f.box();
	f.ui();
}
);
	//参考线的水平拖移$(".zxxRefLine_v").live("mousedown",function(){
	oDrag = $(this);
	dragFlag = true;
	f.dashv();
}
);
	//参考线的垂直拖移$(".zxxRefLine_h").live("mousedown",function(){
	oDrag = $(this);
	dragFlag = true;
	f.dashh();
}
);
	$(document).mouseup(function(e){
	$(this).unbind("mousemove");
	dragFlag = false;
	if(oDrag){
	if(oDrag.hasClass("zxxRefLine_v")){
	var v_l = e.pageX;
	if(v_l < rv.width()){
	v_l = -600;
}
oDrag.css("left",v_l-1).attr("title",v_l+"px");
}
else{
	var v_t = e.pageY-$(window).scrollTop();
	if(v_t < rh.height()){
	v_t = 600;
}
oDrag.css("top",v_t-1).attr("title",v_t+"px");
}
}
oDrag = null;
	dotv.css("left",-10);
	doth.css("top",-10);
}
).keyup(function(e){
	if(e.keyCode === k["slash"]){
	bg.show();
	ipt.focus();
}
}
);
	//拖动标尺创建新的参考线rv.bind("mousedown",function(){
	oDrag = f.newv();
	dragFlag = true;
	f.dashv();
}
);
	rh.bind("mousedown",function(){
	oDrag = f.newh();
	dragFlag = true;
	f.dashh();
}
);
	//弹出框一些方法事件的绑定clo.bind("click",f.cacl);
	cancel.bind("click",f.cacl);
	sur.bind("click",f.sure);
	ipt.bind("keyup",function(e){
	if(e.keyCode === k["enter"]){
	f.sure();
}
}
);
}
;
	//快捷键参数var k ={
	"enter":13,//回车"r":82,//字母R"slash":220,//斜线keyCode"semi":59,//分号，火狐"semi2":186,//分号"esc":27}
;
	//侦听键盘事件$(document).keyup(function(e){
	if(e.keyCode === k["r"]){
	$.pageRulerToggle();
}
if(e.keyCode === k["semi"] || e.keyCode === k["semi2"]){
	$.lineToggle();
}
if(e.keyCode === k["esc"]){
	$.pageRulerHide();
}
}
);
	$.lineToggle = function(){
	$(".zxxRefLine_v").toggle();
	$(".zxxRefLine_h").toggle();
}
;
	$.pageRulerHide = function(){
	$("#zxxScaleBox").hide();
}
;
	$.pageRulerToggle = function(params){
	if($("#zxxScaleBox").size() && $("#zxxScaleBox").css("display") === "block"){
	$("#zxxScaleRulerH").toggle();
	$("#zxxScaleRulerV").toggle();
}
else{
	$.pageRuler(params);
}
}
;
}
)(jQuery);

CSS代码(ruler.css):

@charset "utf-8";/* zxxScaleBox */
.zxxScaleBox{position:fixed;left:0;top:0;_position:absolute;z-index:999;overflow:hidden;}
.zxxScaleRuler_h,.zxxScaleRuler_v,.zxxRefLine_v,.zxxRefLine_h,.zxxRefDot_h,.zxxRefDot_v{position:absolute;left:0;top:0;overflow:hidden;z-index:999;}
.zxxScaleRuler_h{width:100%;height:18px;background:url(ruler_h.png) repeat-x;}
.zxxScaleRuler_v{width:18px;height:100%;background:url(ruler_v.png) repeat-y;}
.zxxScaleRuler_v .n,.zxxScaleRuler_h .n{position:absolute;font:10px/1 Arial,sans-serif;color:#333;cursor:default;}
.zxxScaleRuler_v .n{width:8px;left:3px;word-wrap:break-word;}
.zxxScaleRuler_h .n{top:1px;}
.zxxRefLine_v,.zxxRefLine_h,.zxxRefDot_h,.zxxRefDot_v{z-index:998;}
.zxxRefLine_h{width:100%;height:1px;background:#4affff;cursor:url(cur_move_h.cur),move;}
.zxxRefLine_v{width:3px;height:100%;_height:9999px;background:url(line_v.gif) repeat-y center top;cursor:url(cur_move_v.cur),move;}
.zxxRefDot_h{width:100%;height:3px;background:url(line_dot.png) repeat-x left 1px;cursor:url(cur_move_h.cur),move;top:-10px;}
.zxxRefDot_v{width:3px;height:100%;_height:9999px;background:url(line_dot.png) repeat-y 1px top;cursor:url(cur_move_v.cur),move;left:-10px;}
.zxxRefCrtBg{width:228px;height:146px;background:url(line_create_bg.png) no-repeat;position:absolute;z-index:1000;}
.zxxRefCrtTit{height:30px;}
.zxxRefCrtClose{width:21px;height:21px;margin:5px 5px 0 0;background:url(line_close.png) no-repeat;float:right;}
.zxxRefCrtClose:hover{background-position:0 -21px;}
.zxxRefCrtX{padding:18px 15px 0 20px;font-size:12px;overflow:hidden;_zoom:1;}
.zxxRefCrtLeft{width:100px;padding-top:10px;float:left;}
.zxxRefCrtRight{float:right;}
.zxxRefCrtDir{height:18px;font-family:simsun;overflow:hidden;}
.zxxRefCrtRadio{vertical-align:-2px;}
.zxxRefCrtPlace{padding-top:16px;font-family:arial;}
.zxxRefCrtInput{width:32px;height:14px;margin-right:4px;font-size:12px;padding:1px;vertical-align:middle;}
.zxxRefCrtBtn{display:block;width:80px;height:20px;margin-bottom:8px;font-size:12px;}

附件:下载该文件资源,减少时间成本(增值服务)