https://www.mathsisfun.com/numbers/number-line-zoom.html
zoomable number line එක
zoomable number line එක
HTML:
<div class="js" style="position:relative; width:600px; min-height:150px; border: none; border-radius: 20px; background-color: #def; margin:auto; display:block;"><div id="txts" style="position: absolute; width:600px; height:150px; left: 0; top:0; border: none; user-select: none;"></div><canvas id="canvasId" style="position: absolute; width:600px; height:150px; left: 0; top:0; border: none;" width="1200" height="300"></canvas><div style="position: absolute; right:9px; top: 2px;"><button id="zoom" class="btn" style="" onclick="toggleZoomIn()">Zoom In</button><button id="reset" class="btn" style="" onclick="reset()">Reset</button><input id="options" class="btn" type="image" style="vertical-align: top;" src="/images/style/gear.svg" onclick="optPop()" alt="Options"></div><div id="keycount" style="font: bold 12px Arial; color: black; position:absolute; right:7px; bottom:3px;">keys: 0</div><div style="font: 10px Arial; color: #6600cc; position:absolute; left:7px; bottom:3px;">© 2021 MathsIsFun.com v0.793</div><div id="optpop" style="position:absolute; left:-500px; top:140px; width:320px; padding: 5px; border-radius: 9px; font:14px Arial; background-color: #bcd; box-shadow: 10px 10px 5px 0px rgba(40,40,40,0.75); transition: all linear 0.3s; opacity:0; text-align: center; "><button id="numsBtn" onclick="numsToggle()" style="z-index:2;" class="btn hi">Numbers</button><button id="ticksBtn" onclick="ticksToggle()" style="z-index:2;" class="btn hi">Ticks</button><button id="fracsBtn" onclick="fracsToggle()" style="z-index:2;" class="btn lo">Fractions</button><div style="float:right; margin: 0 0 5px 10px; font:16px Arial;"><button onclick="optYes()" style="z-index:2; font: 22px Arial;" class="btn">✔</button></div></div></div>
JavaScript:
let w, h, g, el, ratio, my = {};
function numberzoomMain(mode) {
let version = '0.793';
this.mode = typeof mode !== 'undefined' ? mode : 'int';
w = 600;
h = 150;
my.opts = {
numsQ: true,
ticksQ: true,
fracsQ: false,
fracType: ''
}
let s = "";
my.imgHome = (document.domain == 'localhost') ? '/mathsisfun/images/style/' : '/images/style/'
s += '<div class="js" style="position:relative; width:' + w + 'px; min-height:' + h + 'px; border: none; border-radius: 20px; background-color: #def; margin:auto; display:block;">';
s += '<div id="txts" style="position: absolute; width:' + w + 'px; height:' + h + 'px; left: 0; top:0; border: none; user-select: none;"></div>';
s += '<canvas id="canvasId" style="position: absolute; width:' + w + 'px; height:' + h + 'px; left: 0; top:0; border: none;"></canvas>';
s += '<div style="position: absolute; right:9px; top: 2px;">';
s += '<button id="zoom" class="btn" style="" onclick="toggleZoomIn()" >Zoom In</button>';
s += '<button id="reset" class="btn" style="" onclick="reset()" >Reset</button>';
s += '<input id="options" class="btn" type="image" style="vertical-align: top;" src="' + my.imgHome + 'gear.svg" onclick="optPop()" alt="Options" >';
s += '</div>';
s += '<div id="keycount" style="font: bold 12px Arial; color: black; position:absolute; right:7px; bottom:3px;"></div>';
s += '<div style="font: 10px Arial; color: #6600cc; position:absolute; left:7px; bottom:3px;">© 2021 MathsIsFun.com v' + version + '</div>';
s += optPopHTML();
s += '</div>';
document.write(s);
el = document.getElementById('canvasId');
ratio = 2;
el.width = w * ratio;
el.height = h * ratio;
el.style.width = w + "px";
el.style.height = h + "px";
g = el.getContext("2d");
g.setTransform(ratio, 0, 0, ratio, 0, 0);
this.zoomInQ = true;
my.marksQ = false
my.marks = [];
my.t0 = 0;
my.lt = 40;
my.wd = 520;
my.currX = w / 2;
my.mouseDownQ = false;
my.shiftQ = false;
window.addEventListener("keydown", onKey, false);
window.addEventListener("keyup", function(ev) {
my.shiftQ = ev.shiftKey;
}, false);
el.addEventListener("mousemove", function(ev) {
let bRect = el.getBoundingClientRect();
my.currX = (ev.clientX - bRect.left) * (el.width / ratio / bRect.width);
ev.preventDefault()
}, false);
el.addEventListener("mousedown", function(ev) {
my.mouseDownQ = true;
my.shiftQ = ev.shiftKey;
}, false);
el.addEventListener("mouseup", function(ev) {
my.mouseDownQ = false;
}, false);
el.addEventListener("touchmove", function(ev) {
let touch = ev.targetTouches[0];
let bRect = el.getBoundingClientRect();
my.currX = (touch.clientX - bRect.left) * (el.width / ratio / bRect.width);
ev.preventDefault()
}, false);
el.addEventListener("touchstart", function(ev) {
my.mouseDownQ = true;
my.shiftQ = ev.shiftKey;
}, false);
el.addEventListener("touchend", function(ev) {
my.mouseDownQ = false;
}, false);
el.addEventListener("mousewheel", onMouseWheel, false);
my.coords = new CoordsFull(my.wd, 200, '-1', '-10,', '11', '10', true);
tickSparseness = 0.04;
currFrame = 0;
maxFrames = 10000;
my.zoomCount = 0;
my.moveCount = 0;
keyCount = 0;
redraw();
animate();
}
function reset() {
my.coords = new CoordsFull(my.wd, 200, '-1', '-10,', '11', '10', true);
keyCount = 0;
my.marks = [];
redraw();
}
Last edited:
