在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例JavaScript基础 → jQuery在线尺子

jQuery在线尺子

JavaScript基础

下载此实例
  • 开发语言:js
  • 实例大小:0.22M
  • 下载次数:4
  • 浏览次数:153
  • 发布时间:2020-10-01
  • 实例类别:JavaScript基础
  • 发 布 人:haha007
  • 文件格式:.zip
  • 所需积分:2
 相关标签: jQuery 教学 JQ 日历

实例介绍

【实例简介】基于jquery的在线尺子, 仿PhotoShop界面屏幕标尺插件

【实例截图】

【核心代码】

(function ($) {
    $.widget("ef.ruler", {
        options: {
            unit: 'px',
            tickMajor: 100,
            tickMinor: 20,
            tickMicro: 10,
            showLabel: true,
arrowStyle: 'line'
        },

        _$el: null,
        _$container: null,
        _$corner: null,
        _$topRuler: null,
        _$leftRuler: null,
        _$topArrow: null,
        _$leftArrow: null,
        _$stage: null,

        _scrollTop: 0,
        _scrollLeft: 0,

        _scrollBarWidth: 0,
        _unitDiv: 1,

        _lastTopRulerPos: 0,
        _lastLeftRulerPos: 0,

        /**
         * px - pixel
         * mm - millimeter
         * cm - centimeter
         * in - inch
         */
        _units: ['px', 'mm', 'cm', 'in'],

        _create: function () {

            var self = this;

            /* Options */
            this.options.unit = this._constrainUnit(this.options.unit);
            this.options.tickMajor = this._constrainTick(this.options.tickMajor);
            this.options.tickMinor = this._constrainTick(this.options.tickMinor);
            this.options.tickMicro = this._constrainTick(this.options.tickMicro);

            /* Calculate scrollbar width */
            this._scrollBarWidth = this._calcScrollBarWidth();

            /* Create container */
            var $container = $(document.createElement('div')).addClass('ef-ruler');

            /* corner */
            var $corner = $(document.createElement('div')).addClass('corner');
            $corner.appendTo($container);

            /* Top ruler */
            var $topRuler = $(document.createElement('div')).addClass('ruler').addClass('top');
            $topRuler.appendTo($container);

var toparrowClass, leftarrowClass
switch (this.options.arrowStyle) {
case 'arrow':
toparrowClass = 'top-arrow';
leftarrowClass = 'left-arrow';
break;
case 'line':
toparrowClass = 'top-line';
leftarrowClass = 'left-line';
break;
case 'none':
toparrowClass = 'top-none';
leftarrowClass = 'left-none';
break;
}

            var $topArrow = $(document.createElement('div')).addClass(toparrowClass);
            $topArrow.appendTo($topRuler);

            /* Left ruler */
            var $leftRuler = $(document.createElement('div')).addClass('ruler').addClass('left');
            $leftRuler.appendTo($container);

            var $leftArrow = $(document.createElement('div')).addClass(leftarrowClass);
            $leftArrow.appendTo($leftRuler);

            /* stage */
            var $stage = $(document.createElement('div')).addClass('stage');
            $stage.appendTo($container);
            $stage.append(this.element.contents());


            $container.appendTo(this.element);

            this._$container = $container;
            this._$corner = $corner;
            this._$topRuler = $topRuler;
            this._$leftRuler = $leftRuler;
            this._$topArrow = $topArrow;
            this._$leftArrow = $leftArrow;
            this._$stage = $stage;

            this.refresh();

            /* events */
            $container.scroll(function () {
                self._scrollTop = $container.scrollTop();
                self._scrollLeft = $container.scrollLeft();

                self._fixRulerPosition();
            });
            this.element.mousemove(function (event) {
                self._fixArrowsPosition(event.clientX, event.clientY);
            });
            $(window).resize(function () {
                self._fixRulerSize();
                self._updateRulerTicks();
            });
        },

        _destroy: function () {
            /* Unbind */
            this._$container.unbind('scroll');
            this.element.unbind('mousemove');
            $(window).unbind('resize');

            /* Restore element contents */
            this.element.prepend(this._$stage.contents());

            /* Remove created elements */
            this._$container.remove();
        },

        _setOption: function (key, value) {
            switch (key) {
                case 'unit':
                    value = this._constrainUnit(value);
                    break;
                case 'tickMajor':
                case 'tickMinor':
                case 'tickMicro':
                    value = this._constrainTick(value);
                    break;
            }

            this._super(key, value);
        },

        _setOptions: function (options) {
            this._super(options);

            this.refresh();
        },

        _constrainUnit: function (unit) {
            if (typeof unit === 'string') {
                unit = unit.toLowerCase();
                this._units.every(function (sUnit) {
                    if (unit === sUnit)
                        return false;

                    return true;
                });
            } else {
                unit = 'px'
            }

            return unit;
        },

        _constrainTick: function (tick) {
            if (isNaN(tick) || tick < 0)
                return 0;

            return tick;
        },

        _calcScrollBarWidth: function () {
            var $tmpEl = $(document.createElement('div')).css({
                position: 'absolute',
                top: '-999px',
                left: '-999px',
                width: '100px',
                height: '100px',
                overflow: 'hidden'
            });

            this.element.append($tmpEl);

            var w1 = $tmpEl[0].offsetWidth;
            $tmpEl.css('overflow', 'scroll');
            var w2 = $tmpEl[0].offsetWidth;

            if (w1 == w2) w2 = $tmpEl[0].clientWidth;

            $tmpEl.remove();

            return (w1 - w2);
        },

        _calcPixelsPerMM: function () {
            var $tmpEl = $(document.createElement('div')).css({
                position: 'absolute',
                top: '-999px',
                left: '-999px',
                width: '1mm',
                height: '1mm'
            });

            this.element.append($tmpEl);

            var px = $tmpEl.width();

            $tmpEl.remove();

            return px;
        },

        _fixRulerPosition: function () {
            this._$corner.css({
                top: this._scrollTop,
                left: this._scrollLeft
            });

            /* Fix rulers position */
            this._$topRuler.css('top', this._scrollTop);
            this._$leftRuler.css('left', this._scrollLeft);
        },

        _fixRulerSize: function () {
            var wContainer = this._$container.width(),
                hContainer = this._$container.height(),
                wStage = this._$stage.width(),
                hStage = this._$stage.height();

            /* Fix rulers size */
            this._$topRuler.width(
                (wContainer < wStage) ?
                    wStage :
                    wContainer - this._$corner.width() - this._scrollBarWidth);
            this._$leftRuler.height((hContainer < hStage) ? hStage : hContainer - this._scrollBarWidth);

            this._updateRulerTicks();
        },

        _updateRulerTicks: function (reset) {
            if (reset === true) {
                this._$topRuler.find('.tick').remove();
                this._$leftRuler.find('.tick').remove();

                this._lastTopRulerPos = this._lastLeftRulerPos = 0;
            }

            var $tick = null;
            var unitPos;

            /* Top ruler */
            unitPos = this._lastTopRulerPos * this._unitDiv;
            var topRulerWidth = this._$topRuler.width() 100;
            while (this._lastTopRulerPos < topRulerWidth) {
                if (this.options.tickMajor > 0 && (unitPos % this.options.tickMajor) === 0) {
                    $tick = $(document.createElement('div'))
                        .addClass('tick').addClass('major')
                        .css('left', this._lastTopRulerPos 'px');

                    if (this.options.showLabel === true)
                        $tick.text(unitPos);

                    $tick.appendTo(this._$topRuler);
                } else if (this.options.tickMinor > 0 && (unitPos % this.options.tickMinor) === 0) {
                    $tick = $(document.createElement('div'))
                        .addClass('tick').addClass('minor')
                        .css('left', this._lastTopRulerPos 'px');

                    $tick.appendTo(this._$topRuler);
                } else if (this.options.tickMicro > 0 && (unitPos % this.options.tickMicro) === 0) {
                    $tick = $(document.createElement('div'))
                        .addClass('tick').addClass('micro')
                        .css('left', this._lastTopRulerPos 'px');

                    $tick.appendTo(this._$topRuler);
                }

                this._lastTopRulerPos = this._unitDiv;
                unitPos ;
            }

            /* Left ruler */
            unitPos = this._lastLeftRulerPos * this._unitDiv;
            var leftRulerHeight = this._$leftRuler.height() 100;
            while (this._lastLeftRulerPos < leftRulerHeight) {
                if (this.options.tickMajor > 0 && (unitPos % this.options.tickMajor) === 0) {
                    $tick = $(document.createElement('div'))
                        .addClass('tick').addClass('major')
                        .css('top', this._lastLeftRulerPos 'px');

                    if (this.options.showLabel === true)
                        $tick.append('<span>' unitPos '</span>')

                    $tick.appendTo(this._$leftRuler);
                } else if (this.options.tickMinor > 0 && (unitPos % this.options.tickMinor) === 0) {
                    $tick = $(document.createElement('div'))
                        .addClass('tick').addClass('minor')
                        .css('top', this._lastLeftRulerPos 'px');

                    $tick.appendTo(this._$leftRuler);
                } else if (this.options.tickMicro > 0 && (unitPos % this.options.tickMicro) === 0) {
                    $tick = $(document.createElement('div'))
                        .addClass('tick').addClass('micro')
                        .css('top', this._lastLeftRulerPos 'px');

                    $tick.appendTo(this._$leftRuler);
                }

                this._lastLeftRulerPos = this._unitDiv;
                unitPos ;
            }
        },

        _fixArrowsPosition: function (mouseX, mouseY) {
            var arrowX = mouseX - this.element.offset().left - this._$corner.width() - Math.round(this._$topArrow.outerWidth() / 2) parseInt($('.ef-ruler').parents().eq(1).css('padding-left'),10);
            var arrowY = mouseY - this.element.offset().top - this._$corner.height() - Math.round(this._$leftArrow.outerHeight() / 2) parseInt($('.ef-ruler').parents().eq(1).css('padding-top'),10);

            this._$topArrow.css('left', arrowX this._scrollLeft);
            this._$leftArrow.css('top', arrowY this._scrollTop);
        },

        refresh: function () {
            switch (this.options.unit) {
                case 'px':
                    this._unitDiv = 1;
                    break;
                case 'mm':
                    this._unitDiv = this._calcPixelsPerMM();
                    break;
                case 'cm':
                    this._unitDiv = this._calcPixelsPerMM() * 10;
                    break;
                case 'in':
                    this._unitDiv = this._calcPixelsPerMM() * 25.4;
                    break;
            }

            this._fixRulerPosition();
            this._fixRulerSize();
            this._fixArrowsPosition(0, 0);
            this._updateRulerTicks(true);
        }
    });
})(jQuery);

标签: jQuery 教学 JQ 日历

实例下载地址

jQuery在线尺子

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警