Phiên bản đầy đủ: jsB@nk » Con trỏ » Cột biểu đồ
URL: https://www.javascriptbank.com/bar-graph-index.html
Hiệu ứng tạo một biểu đồ có bốn cột thay đổi được, biểu đồ này dùng để chỉ vị trí của con trỏ chuột trên trang web.
Phiên bản đầy đủ: jsB@nk » Con trỏ » Cột biểu đồ
URL: https://www.javascriptbank.com/bar-graph-index.html
<style type="text/css">.hBarC { /* horizontal bar container */ position:absolute; overflow:hidden; border:1px solid #333; background:#ccc;}.hBar { /* horizontal bar */ position:absolute; overflow:hidden; margin:0; padding:0; background:#900;}.vBarC { /* vertical bar container */ position:absolute; overflow:hidden; margin:0; padding:0; border:1px solid #333; background:#ccc;}.vBar { /* vertical bar */ position:absolute; overflow:hidden; margin:0; padding:0; background:#009;}.marker { position:relative; visibility:hidden;}#content1 { position:absolute; overflow:hidden; margin:0; padding:8px; color:#369; background:#fff;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script src="x_core.js"></script><script src="x_event.js"></script><script src="x_bar.js"></script><script type="text/javascript">//// Applicationvar bars = new Array();window.onload = function(){ if (xNN4 || xIE4 || !document.createElement) return; bars[0] = new xBar('ltr', 'hBarC', 'hBar'); bars[1] = new xBar('ttb', 'vBarC', 'vBar'); bars[2] = new xBar('rtl', 'hBarC', 'hBar'); bars[3] = new xBar('btt', 'vBarC', 'vBar'); winOnResize(); // initial setup xAddEventListener(document, 'mousemove', docOnMouseMove, false); xAddEventListener(window, 'resize', winOnResize, false);}function docOnMouseMove(evt){ var e = new xEvent(evt); bars[0].update(e.pageX); bars[1].update(e.pageY); bars[2].update(e.pageX); bars[3].update(e.pageY);}function winOnResize(){ var l = 200, s = 20; var cw = xClientWidth(); var ch = xClientHeight(); var x = cw - l - s - 20; var y = xPageY('m1'); bars[0].paint(x, y, l, s); bars[1].paint(x+l, y, s, l); bars[2].paint(x+s, y+l, l, s); bars[3].paint(x, y+s, s, l); bars[0].reset(xClientWidth(), 0); bars[1].reset(xClientHeight(), 0); bars[2].reset(xClientWidth(), 0); bars[3].reset(xClientHeight(), 0); xResizeTo('content1', l-s, l-s); xMoveTo('content1', x+s, y+s);/* debug var ele = xGetElementById('content1'); var s = 'content1:\n' + xWidth(ele) + ', ' + xHeight(ele) + '\n' + ele.offsetWidth + ', ' + ele.offsetHeight; ele = xGetElementById(bars[0].con); s += '\n\nbars[0]:\n' + xWidth(ele) + ', ' + xHeight(ele) + '\n' + ele.offsetWidth + ', ' + ele.offsetHeight; alert(s);*/}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="hBarC" style="width: 198px; height: 18px; left: 769px; top: 38px;" title="614"><div class="hBar" style="width: 200px; height: 20px; top: 0px; left: -78px;" title="614"></div></div><div class="vBarC" style="width: 18px; height: 198px; left: 969px; top: 38px;" title="232"><div class="vBar" style="width: 20px; height: 200px; left: 0px; top: -119px;" title="232"></div></div><div class="hBarC" style="width: 198px; height: 18px; left: 789px; top: 238px;" title="614"><div class="hBar" style="width: 200px; height: 20px; top: 0px; left: 78px;" title="614"></div></div><div class="vBarC" style="width: 18px; height: 198px; left: 769px; top: 58px;" title="232"><div class="vBar" style="width: 20px; height: 200px; left: 0px; top: 117px;" title="232"></div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/mouse/Bar_Graph/x_bar.jshttp://javascriptbank.com/javascript/mouse/Bar_Graph/x_core.jshttp://javascriptbank.com/javascript/mouse/Bar_Graph/x_event.js