腾讯的 JET框架怎么样？
适合用来做前台页面还是后台的管理页面？使用过的来说点吧！
[解决办法]
已经更名为 JX，看那特效，主要是服务于前端的
项目主页: http://alloyteam.github.com/JX/
例子：
- HTML code
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /><title>Jx About</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; width: 100%; height: 100%; } body { background: -webkit-gradient(linear, 0 0, 0 900, from(#025695), to(#ADD1E3)) repeat scroll 0 0 transparent; background: -moz-linear-gradient(center top, #025695, #ADD1E3) repeat scroll 0 0 transparent; background: -o-linear-gradient(top, #025695, #ADD1E3); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#025695',endColorStr='#ADD1E3',gradientType='0'); width: 100%; height: 100%; color: #fff; margin: 0; padding: 0; } .full { width: 100%; height: 100%; } #frm { position: absolute; width: 100%; height: 100%; left: 5%; top: 60px; font-size: 2em; font-weight: bold; font-family: verdana, arial; overflow: hidden; padding: 0.5em; } #frm span { position: relative; text-align: center; z-index: 1; } #mtxform { position: relative; z-index: 10; } .hidden { visibility: hidden; } h1 { font-size: 2.5em; font-weight: bold; font-family: verdana, arial; color: #fff; border-bottom: 1px solid #eee; width: 90%; line-height: 1.8; margin: 0 auto; }</style> <script type="text/javascript"> var mtx = function () { /* ==== private variables & methods ==== */ var stop = false; var frm, lineDelay, charDelay; var colorText, colorMatch, colorGhost, elapsedTime; var lineIndex = 0; var lineChar = []; var animStack = []; var colorStack = []; /* ==== rgb color ==== */ function colorRGB (c) { return 'rgb(' +Math.round(Math.min(255, Math.max(0, c[0])))+',' +Math.round(Math.min(255, Math.max(0, c[1])))+',' +Math.round(Math.min(255, Math.max(0, c[2])))+')'; } /* ==== Easing functions ==== */ function Ease () {} Ease.prototype = { ease : function () { this.m += this.s; this.x0 += (this.d * this.m * .0025); if (this.m == 20) this.s = -1; return this.x0; }, init : function (x0, x1) { this.m = 0; this.s = 1; this.d = x1 - x0; this.x0 = x0; } } /* ==== Load Lines ==== */ function loadLines () { // read text from HTML form text = document.forms.mtxform.text.value.split("\n"); // loop through all lines for (var j = 0; j < text.length; j++) { var t = text[j]; if (t) { var n = t.length; lineChar[j] = []; // first pass: create characters capture RELATIVE offset coordinates for (var i = 0; i < n; i++) lineChar[j][i] = new Character(t.charAt(i), j); // second pass: convert to absolute position for (var i = 0, o; o = lineChar[j][i]; i++) { if (o.c == "|") { // remove spaces lineChar[j].splice(i, 1); frm.removeChild(o.o); i--; } else { // convert to absolute position and render o.o.style.position = "absolute"; o.o.style.color = colorRGB(colorText); o.moveHTML(); // push first line in animation stack if (j == 0) pushAnim (o, charDelay * i); } } } } } /* ==== Character Constructor ==== */ function Character (c, line) { if (c == " ") c = "|"; this.c = c; // create HTML element and append the the container this.o = document.createElement("span"); this.o.innerHTML = c; this.o.style.zIndex = 2; frm.appendChild(this.o); // capture relative offset positions ! this.x0 = this.o.offsetLeft; this.y0 = -this.o.offsetHeight * 1.5; this.x1 = this.x0; this.x2 = this.x0; this.y1 = (line + 1) * this.o.offsetHeight; this.y2 = frm.offsetHeight; this.mx = new Ease(); this.my = new Ease(); this.c0 = [colorText[0], colorText[1], colorText[2]]; } /* ==== Character functions ==== */ Character.prototype = { // ---- character animation ---- anim : function (i) { // temporization if (this.delay > 0) { if (elapsedTime) this.delay -= new Date().getTime() - elapsedTime; } else { // moving this.x0 = this.mx.ease(); this.y0 = this.my.ease(); this.moveHTML(); if (!this.my.m && !this.mx.m) { // remove from stack animStack.splice(i, 1); // remove dead characters if (this.off) frm.removeChild(this.o); } } }, // ----- color fading ------ color : function (i) { this.c0[0] += this.cr[0]; this.c0[1] += this.cr[1]; this.c0[2] += this.cr[2]; this.ci++; this.o.style.color = colorRGB(this.c0); if (this.ci >= this.cs) colorStack.splice(i, 1); }, // ----- HTML positioning ----- moveHTML : function () { this.o.style.left = Math.round(this.x0) + "px"; this.o.style.top = Math.round(this.y0) + "px"; }, // ----- init color fading ------ colorFade : function (c1, steps) { this.cs = steps; this.cr = [(c1[0] - this.c0[0]) / steps, (c1[1] - this.c0[1]) / steps, (c1[2] - this.c0[2]) / steps]; if (this.cr[0] != 0 || this.cr[1] != 0 || this.cr[2] != 0){ this.ci = 0; colorStack.push (this); } } } /* ==== push character in the animation stack ==== */ function pushAnim (o, delay) { // init ease o.mx.init(o.x0, o.x1); o.my.init(o.y0, o.y1); o.delay = delay; // push stack animStack.push(o); } /* ==== next line ==== */ function nextLine () { if (lineIndex < lineChar.length - 1) { // display shadow text for (var i = 0, o; o = lineChar[lineIndex][i]; i++) { var s = o.o.cloneNode(true); s.style.zIndex = 1; s.style.color = colorRGB(colorGhost); frm.appendChild(s); } // matching next line characters for (var i = 0, t; t = lineChar[lineIndex + 1][i]; i++) { for (var j = 0, o; o = lineChar[lineIndex][j]; j++) { if (o.c == t.c) { // colors t.colorFade(colorMatch, o.match ? 1 : 40); t.match = true; // swap characters t.x0 = o.x0; t.y0 = o.y0; t.moveHTML(); // remove redundant character frm.removeChild(o.o); lineChar[lineIndex].splice(j, 1); break; } } } // take off redundant characters for (var i = 0, o; o = lineChar[lineIndex][i]; i++) { // set target position (off frame) o.y1 = frm.offsetHeight; o.off = true; o.match = false; o.colorFade (colorText, 40); // push in animation stack pushAnim (o, (lineDelay * .8) + charDelay * i); } } // push next line in animation stack lineIndex++; if (lineIndex < lineChar.length) { for (var i = 0, o; o = lineChar[lineIndex][i]; i++) pushAnim (o, lineDelay + charDelay * i); } } /* ==== main animation loop ==== */ function main() { // characters var n = animStack.length; if (n) { var i = n; while (i--) animStack[i].anim(i); } else nextLine (); // colors var i = colorStack.length; while (i--) colorStack[i].color(i); // get elapsed time and loop elapsedTime = new Date().getTime(); setTimeout(main, 16); } /* //////////// ==== public methods ==== //////////// */ return { /* ==== initialize script ==== */ init : function (cont, t1, t2, c1, c2, c3) { // container frm = document.getElementById(cont); lineDelay = t1; charDelay = t2; colorText = c1; colorMatch = c2; colorGhost = c3; loadLines(); main(); }, changeText : function () { document.getElementById("show").className = ""; document.getElementById("inputext").className = "hidden"; lineChar = []; animStack = []; colorStack = []; frm.innerHTML = ""; lineIndex = 0; elapsedTime = 0; loadLines(); frm.focus(); } } }(); /* ==== init text ==== */ onload = function () { document.getElementById('frm').style['height'] = document.documentElement.clientHeight - 60 + 'px';// mtx.init( el, linesDelay, charsDelay, cText, cMatch, cGhost); mtx.init("frm", 800, 150, [255,255,255], [255,64,0], [44,44,44]); } </script> </head> <body> <div id="doc" class="doc full"><h1>About</h1> <div id="frm"></div> <form id="mtxform" name="mtxform"> <span id="inputext" class="hidden"> <textarea rows="6" cols="46" id="text" name="text"> JXJavascript eXtension toolsDon't Repeat Yourself!--by Alloy Team</textarea></span> </form> </div> </body> </html>
[解决办法]
JET？ 第一次听说
[解决办法]
没听过！！！
[解决办法]
没有用过
[解决办法]
刚看了下，感觉和kissy有几分相仿，颗粒化，可以学习一下。
[解决办法]
听一次听说,
学习了....
[解决办法]
来看看。
[解决办法]
看起来很炫啊！
[解决办法]
腾讯真的有用,这个感觉得根据自己的功能需求以及这个框架的特性来定吧!
没研究过JET这个框架.
[解决办法]
看过，效果挺不错，有时间学学~