【原创】滑动门导航类，多种好看且实用的示例，一定来看看！（8月1日更新）

yaohaixiao　楼主

会武术的科学家

帖子: 2057
体力: 5636
威望: 45
居住地: 浙江省杭州市

发表于 2009-7-10 09:14:12 |显示全部楼层

调整了下YAO库文件，然后修来了原来的speed为autoSpeed

这样更直观些吧，完整的代码：

var YAO = function(){
var D = document, OA = '[object Array]', FC = "[object Function]", OP = Object.prototype, nt = "nodeType", listeners = [], unloadListeners = [], webkitKeymap = {
63232: 38, // up
63233: 40, // down
63234: 37, // left
63235: 39, // right
63276: 33, // page up
63277: 34, // page down
25: 9 // SHIFT-TAB (Safari provides a different key code in
};
return {
isArray: function(obj){
return OP.toString.apply(obj) === OA;
},
isString: function(s){
return typeof s === 'string';
},
isBoolean: function(b){
return typeof b === "boolean";
},
isFunction: function(func){
return OP.toString.apply(func) === FC;
},
isNull: function(obj){
return obj === null;
},
isNumber: function(num){
return typeof num === "number" && isFinite(num);
},
isObject: function(str){
return (str && (typeof str === "object" || this.isFunction(str))) || false;
},
isUndefined: function(obj){
return typeof obj === "undefined";
},
hasOwnProperty: function(obj, prper){
if (OP.hasOwnProperty) {
return obj.hasOwnProperty(prper);
}
return !this.isUndefined(obj[prper]) && obj.constructor.prototype[prper] !== obj[prper];
},
ua: function(){
var C = {
ie: 0,
opera: 0,
gecko: 0,
webkit: 0,
mobile: null,
air: 0,
caja: 0
}, B = navigator.userAgent, A;
if ((/KHTML/).test(B)) {
C.webkit = 1;
}
A = B.match(/AppleWebKit\/([^\s]*)/);
if (A && A[1]) {
C.webkit = parseFloat(A[1]);
if (/ Mobile\//.test(B)) {
C.mobile = "Apple";
}
else {
A = B.match(/NokiaN[^\/]*/);
if (A) {
C.mobile = A[0];
}
}
A = B.match(/AdobeAIR\/([^\s]*)/);
if (A) {
C.air = A[0];
}
}
if (!C.webkit) {
A = B.match(/Opera[\s\/]([^\s]*)/);
if (A && A[1]) {
C.opera = parseFloat(A[1]);
A = B.match(/Opera Mini[^;]*/);
if (A) {
C.mobile = A[0];
}
}
else {
A = B.match(/MSIE\s([^;]*)/);
if (A && A[1]) {
C.ie = parseFloat(A[1]);
}
else {
A = B.match(/Gecko\/([^\s]*)/);
if (A) {
C.gecko = 1;
A = B.match(/rv:([^\s\)]*)/);
if (A && A[1]) {
C.gecko = parseFloat(A[1]);
}
}
}
}
}
A = B.match(/Caja\/([^\s]*)/);
if (A && A[1]) {
C.caja = parseFloat(A[1]);
}
return C;
}(),
addListener: function(el, event, func){
try {
el.addEventListener(event, func, false);
}
catch (e) {
try {
el.attachEvent('on' + event, func);
}
catch (e) {
el['on' + event] = func;
}
}
if ("unload" == event) {
unloadListeners[unloadListeners.length] = [el, event, func];
return true;
}
else {
listeners[listeners.length] = [el, event, func];
}
},
removeListener: function(el, event, func){
var i,uli,j,li;
try {
el.removeEventListener(event, func, false);
}
catch (e) {
try {
el.detachEvent('on' + event, func);
}
catch (e) {
el['on' + event] = null;
}
}
if ("unload" == event) {
for (i = unloadListeners.length - 1; i > -1; i--) {
uli = unloadListeners[i];
if (uli && uli[0] === el && uli[1] == event && uli[2] == func) {
unloadListeners.splice(i, 1);
return true;
}
}
return false;
}
else {
for (j = listeners.length - 1; j > -1; j--) {
li = listeners[i];
if (li && li[0] === el && li[1] == event && li[2] == func) {
delete listeners[j][2];
listeners.splice(j, 1);
return true;
}
}
return false;
}
},
on: function(el, event, func){
YAO.addListener(el, event, func);
},
stopEvent: function(evt){
this.stopPropagation(evt);
this.preventDefault(evt);
},
stopPropagation: function(evt){
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
},
preventDefault: function(evt){
if (evt.preventDefault) {
evt.preventDefault();
}
else {
evt.returnValue = false;
}
},
getEvent: function(e){
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
},
getCharCode: function(ev){
var code = ev.keyCode || ev.charCode || 0;
// webkit key normalization
if (YAO.ua.webkit && (code in webkitKeymap)) {
code = webkitKeymap[code];
}
return code;
},
_unload: function(e){
var i, l, len, index, ul = unloadListeners.slice(), context;
// execute and clear stored unload listeners
for (i = 0, len = unloadListeners.length; i < len; ++i) {
l = ul[i];
if (l) {
context = window;
l[2].call(context, YAO.getEvent(e, l[0]));
ul[i] = null;
}
}
l = null;
context = null;
unloadListeners = null;
if (listeners) {
for (j = listeners.length - 1; j > -1; j--) {
l = listeners[j];
if (l) {
YAO.removeListener(l[0], l[1], l[2]);
}
}
l = null;
}
YAO.removeListener(window, "unload", YAO._unload);
},
getEl: function(elem, boundEl){
var elemID, E, m, i, k, length, len;
if (elem) {
if (elem[nt] || elem.item) {
return elem;
}
if (YAO.isString(elem)) {
elemID = elem;
elem = D.getElementById(elem);
if (elem && elem.id === elemID) {
return elem;
}
else {
if (elem && elem.all) {
elem = null;
E = D.all[elemID];
for (i = 0, len = E.length; i < len; i += 1) {
if (E[i].id === elemID) {
return E[i];
}
}
}
}
return elem;
}
else {
if (elem.DOM_EVENTS) {
elem = elem.get("element");
}
else {
if (YAO.isArray(elem)) {
m = [];
for (k = 0, length = elem.length; k < length; k += 1) {
m[m.length] = YAO.getEl(elem[k]);
}
return m;
}
}
}
}
return null;
},
hasClass: function(elem, className){
var has = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)");
return has.test(elem.className);
},
addClass: function(elem, className){
if (YAO.hasClass(elem, className)) {
return;
}
elem.className = [elem.className, className].join(" ");
},
removeClass: function(elem, className){
var replace = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)", "g");
if (!YAO.hasClass(elem, className)) {
return;
}
var o = elem.className;
elem.className = o.replace(replace, " ");
if (YAO.hasClass(elem, className)) {
YAO.removeClass(elem, className);
}
},
replaceClass: function(elem, newClass, oldClass){
if (newClass === oldClass) {
return false;
}
var has = new RegExp("(?:^|\\s+)" + newClass + "(?:\\s+|$)", "g");
if (!YAO.hasClass(elem, newClass)) {
YAO.addClass(elem, oldClass);
return;
}
elem.className = elem.className.replace(has, " " + oldClass + " ");
if (YAO.hasClass(elem, newClass)) {
YAO.replaceClass(elem, newClass, oldClass);
}
},
getElByClassName: function(className, tag, rootTag){
var elems = [], i, tempCnt = YAO.getEl(rootTag).getElementsByTagName(tag), len = tempCnt.length;
for (i = 0; i < len; i++) {
if (YAO.hasClass(tempCnt[i], className)) {
elems.push(tempCnt[i]);
}
}
if (elems.length < 1) {
return false;
}
else {
return elems;
}
},
setOpacity: function(el, val){
if (YAO.ua.ie) {
if (YAO.isString(el.style.filter)) {
el.style.filter = 'alpha(opacity=' + val * 100 + ')';
if (!el.currentStyle || !el.currentStyle.hasLayout) {
el.style.zoom = 1;
}
}
}
else {
el.style['opacity'] = val;
}
},
YTabs: function(){
var j, len = arguments.length, sigleTab = [];
for (j = 0; j < len; ++j) {
sigleTab[j] = new YAO.simpleTab(arguments[j]);
}
},
fadeUp: function(elem){
if (elem) {
var level = 0, fade = function(){
var timer = null;
level += 0.05;
if (timer) {
clearTimeout(timer);
timer = null;
}
if (level > 1) {
YAO.setOpacity(elem, 1);
return false;
}
else {
YAO.setOpacity(elem, level);
}
timer = setTimeout(fade, 50);
};
fade();
}
},
zebra: function(){
var j, length = arguments.length;
for (j = 0; j < length; ++j) {
(function(config){
var root = YAO.getEl(config.rootTag) || (config.root || null), rows = root.getElementsByTagName(config.rowTag) || (config.rows || null), i, len = rows.length, lastClass = '';
if (root && rows && len > 1) {
for (var i = 0; i < len; ++i) {
rows[i].className = i % 2 == 0 ? 'even' : 'odd';
rows[i].onmouseover = function(){
lastClass = this.className;
YAO.replaceClass(this, lastClass, 'hover');
};
rows[i].onmouseout = function(){
YAO.replaceClass(this, 'hover', lastClass);
};
}
}
else {
return false;
}
})(arguments[j]);
}
},
moveElement: function(element, finalX, finalY, speed){
var elem = YAO.isString(element) ? YAO.getEl(element) : element, style = null;
if (elem) {
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0";
}
if (!elem.style.top) {
elem.style.top = "0";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == finalX && ypos == finalY) {
return true;
}
if (xpos < finalX) {
var dist = Math.ceil((finalX - xpos) / 10);
xpos = xpos + dist;
}
if (xpos > finalX) {
var dist = Math.ceil((xpos - finalX) / 10);
xpos = xpos - dist;
}
if (ypos < finalY) {
var dist = Math.ceil((finalY - ypos) / 10);
ypos = ypos + dist;
}
if (ypos > finalY) {
var dist = Math.ceil((ypos - finalY) / 10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
elem.movement = setTimeout(function(){
YAO.moveElement(element, finalX, finalY, speed);
}, speed);
}
},
ajaxRequest: function(url, id, sload){
var oXhr, elem = YAO.isString(id) ? YAO.getEl(id) : id, sLoading = sload || '正在获取数据，请稍后...';
if (!url || !id) {
return;
}
if (window.XMLHttpRequest) {
oXhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
oXhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (oXhr !== null) {
try {
oXhr.open('GET', url, true);
oXhr.onreadystatechange = function(){
if (oXhr.readyState == 4) {
if (oXhr.status == 200 || location.href.indexOf('http') === -1) {
elem.innerHTML = oXhr.responseText;
}
else {
elem.innerHTML = sLoading;
}
}
};
oXhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
oXhr.send(null);
}
catch (e) {
throw new Error(e);
return false;
}
}
else {
throw new Error("Your browser does not support XMLHTTP.");
return false;
}
}
};
YAO.on(window, "unload", YAO._unload);
}();
YAO.simpleTab = function(oConfigs){
this.tabCnt = (oConfigs.tabId) ? YAO.getEl(oConfigs.tabId) : (oConfigs.tabRoot || null);
this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
this.length = this.tabs.length || 0;
this.defaultIndex = oConfigs.defaultIndex || 0;
this.lastIndex = this.defaultIndex;
this.lastTab = this.tabs[this.lastIndex] || null;
this.lastContent = this.contents[this.lastIndex] || null;
this.evtName = oConfigs.evt || 'mouseover';
this.defaultClass = oConfigs.defaultClass || 'current';
this.previousClass = oConfigs.previousClass || '';
this.hideAll = oConfigs.hideAll || false;
this.auto = oConfigs.auto || false;
this.autoSpeed = oConfigs.autoSpeed || 6000;
this.fadeUp = oConfigs.fadeUp || false;
this.scroll = oConfigs.scroll || false;
this.scrollId = oConfigs.scrollId || null;
this.scrollSpeed = oConfigs.scrollSpeed || 5;
this.direction = oConfigs.direction || 'V';
this.activeTag = oConfigs.activeTag || 'IMG';
this.ajax = oConfigs.ajax || false;
this.aPath = oConfigs.aPath || '';
var i, that = this;
if (this.tabs && this.contents) {
if (this.auto) {
this.timer = setTimeout(function(){
that.autoChange();
}, that.autoSpeed);
}
if (!this.hideAll) {
YAO.addClass(this.lastTab, this.defaultClass);
if (!this.ajax) {
this.lastContent.style.display = 'block';
}
else{
this.ajaxTab(this.lastTab);
}
}
else {
YAO.removeClass(this.lastTab, this.defaultClass);
if (!this.scroll) {
this.lastContent.style.display = 'none';
}
}
for (i = 0; i < this.length; ++i) {
if (i !== this.defaultIndex && !this.scroll) {
YAO.removeClass(this.tabs[i], 'current');
if (!this.ajax) {
this.contents[i].style.display = 'none';
}
}
YAO.on(this.tabs[i],this.evtName, function(index){
return function(event){
var evt = null, currentContent = that.ajax ? that.contents : that.contents[index], currentTab = this;
that.setCurrent.call(that, this, currentContent, index);
that.lastIndex = index;
if (that.auto) {
that.isPause = true;
}
evt = event || window.event;
YAO.stopEvent(evt);
}
}(i));
YAO.on(this.tabs[i],'mouseout', function(index){
return function(){
if (that.hideAll && that.evtName === 'mouseover') {
if (that.lastTab === this) {
YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
}
if (that.previousClassTab) {
YAO.removeClass(that.previousClassTab, that.previousClass);
}
if (!that.scroll && !that.ajax) {
that.contents[index].style.display = 'none';
}
}
else {
if (that.auto) {
that.isPause = false;
}
}
}
}(i));
}
}
};
YAO.simpleTab.prototype.timer = null;
YAO.simpleTab.prototype.isPause = false;
YAO.simpleTab.prototype = {
autoChange: function(){
var that = this;
if (!this.isPause) {
var currentContent = null, currentTab = null;
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.lastIndex = this.lastIndex + 1;
if (this.lastIndex === this.length) {
this.lastIndex = 0;
}
currentContent = this.ajax ? this.contents : this.contents[this.lastIndex];
currentTab = this.tabs[this.lastIndex];
this.setCurrent(currentTab, currentContent, this.lastIndex);
this.timer = setTimeout(function(){
that.autoChange();
}, this.autoSpeed);
}
else {
this.timer = setTimeout(function(){
that.autoChange()
}, this.autoSpeed);
return false;
}
},
setCurrent: function(curTab, curCnt, index){
var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0;
YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
if (curTab === this.tabs[this.defaultIndex]) {
YAO.addClass(curTab, this.defaultClass);
}
else {
YAO.addClass(curTab, 'current');
}
if (this.previousClass) {
if (this.previousClassTab) {
YAO.removeClass(this.previousClassTab, this.previousClass);
}
if (index !== 0) {
YAO.addClass(this.tabs[index - 1], this.previousClass);
if ((index - 1) === this.defaultIndex) {
YAO.removeClass(this.tabs[index - 1], this.defaultClass);
}
this.previousClassTab = (this.tabs[index - 1]);
}
}
if (!this.scroll && !this.ajax) {
this.lastContent.style.display = "none";
curCnt.style.display = "block";
}
if (this.fadeUp) {
activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
if (this.lastContent !== curCnt) {
YAO.fadeUp(activeObj);
}
}
else {
if (this.scroll) {
activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0];
if(this.direction === 'V'){
itemHeight = activeObj.offsetHeight;
scrollHeight = -(index * itemHeight);
}
else{
itemWidth = activeObj.offsetWidth;
scrollWidth = -(index * itemWidth);
}
YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed);
}
}
if (!this.ajax) {
this.lastContent = curCnt;
}
else {
this.ajaxTab(curTab);
}
this.lastTab = curTab;
},
ajaxTab: function(curTab){
var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
YAO.ajaxRequest(url, cnt, cnt.innerHTML);
}
};

复制代码

[ 本帖最后由 yaohaixiao 于 2009-7-10 09:19 编辑 ]

yaohaixiao　楼主

会武术的科学家

帖子: 2057
体力: 5636
威望: 45
居住地: 浙江省杭州市

发表于 2009-7-10 14:03:17 |显示全部楼层

回复 138# yaohaixiao [自己] 的帖子

不好意思，修改了事件加载机制，出现了点BUG，修改了。

最新代码

var YAO = function(){
var D = document, OA = '[object Array]', FC = "[object Function]", OP = Object.prototype, nt = "nodeType", listeners = [], unloadListeners = [], webkitKeymap = {
63232: 38, // up
63233: 40, // down
63234: 37, // left
63235: 39, // right
63276: 33, // page up
63277: 34, // page down
25: 9 // SHIFT-TAB (Safari provides a different key code in
};
return {
isArray: function(obj){
return OP.toString.apply(obj) === OA;
},
isString: function(s){
return typeof s === 'string';
},
isBoolean: function(b){
return typeof b === "boolean";
},
isFunction: function(func){
return OP.toString.apply(func) === FC;
},
isNull: function(obj){
return obj === null;
},
isNumber: function(num){
return typeof num === "number" && isFinite(num);
},
isObject: function(str){
return (str && (typeof str === "object" || this.isFunction(str))) || false;
},
isUndefined: function(obj){
return typeof obj === "undefined";
},
hasOwnProperty: function(obj, prper){
if (OP.hasOwnProperty) {
return obj.hasOwnProperty(prper);
}
return !this.isUndefined(obj[prper]) && obj.constructor.prototype[prper] !== obj[prper];
},
ua: function(){
var C = {
ie: 0,
opera: 0,
gecko: 0,
webkit: 0,
mobile: null,
air: 0,
caja: 0
}, B = navigator.userAgent, A;
if ((/KHTML/).test(B)) {
C.webkit = 1;
}
A = B.match(/AppleWebKit\/([^\s]*)/);
if (A && A[1]) {
C.webkit = parseFloat(A[1]);
if (/ Mobile\//.test(B)) {
C.mobile = "Apple";
}
else {
A = B.match(/NokiaN[^\/]*/);
if (A) {
C.mobile = A[0];
}
}
A = B.match(/AdobeAIR\/([^\s]*)/);
if (A) {
C.air = A[0];
}
}
if (!C.webkit) {
A = B.match(/Opera[\s\/]([^\s]*)/);
if (A && A[1]) {
C.opera = parseFloat(A[1]);
A = B.match(/Opera Mini[^;]*/);
if (A) {
C.mobile = A[0];
}
}
else {
A = B.match(/MSIE\s([^;]*)/);
if (A && A[1]) {
C.ie = parseFloat(A[1]);
}
else {
A = B.match(/Gecko\/([^\s]*)/);
if (A) {
C.gecko = 1;
A = B.match(/rv:([^\s\)]*)/);
if (A && A[1]) {
C.gecko = parseFloat(A[1]);
}
}
}
}
}
A = B.match(/Caja\/([^\s]*)/);
if (A && A[1]) {
C.caja = parseFloat(A[1]);
}
return C;
}(),
addListener: function(el, event, func){
try {
el.addEventListener(event, func, false);
}
catch (e) {
try {
el.attachEvent('on' + event, func);
}
catch (e) {
el['on' + event] = func;
}
}
if ("unload" == event) {
unloadListeners[unloadListeners.length] = [el, event, func];
return true;
}
else {
listeners[listeners.length] = [el, event, func];
}
},
removeListener: function(el, event, func){
var i,uli,j,li;
try {
el.removeEventListener(event, func, false);
}
catch (e) {
try {
el.detachEvent('on' + event, func);
}
catch (e) {
el['on' + event] = null;
}
}
if ("unload" == event) {
for (i = unloadListeners.length - 1; i > -1; i--) {
uli = unloadListeners[i];
if (uli && uli[0] === el && uli[1] == event && uli[2] == func) {
unloadListeners.splice(i, 1);
return true;
}
}
return false;
}
else {
for (j = listeners.length - 1; j > -1; j--) {
li = listeners[i];
if (li && li[0] === el && li[1] == event && li[2] == func) {
delete listeners[j][2];
listeners.splice(j, 1);
return true;
}
}
return false;
}
},
on: function(el, event, func){
YAO.addListener(el, event, func);
},
stopEvent: function(evt){
this.stopPropagation(evt);
this.preventDefault(evt);
},
stopPropagation: function(evt){
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
},
preventDefault: function(evt){
if (evt.preventDefault) {
evt.preventDefault();
}
else {
evt.returnValue = false;
}
},
getEvent: function(e){
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
},
getCharCode: function(ev){
var code = ev.keyCode || ev.charCode || 0;
// webkit key normalization
if (YAO.ua.webkit && (code in webkitKeymap)) {
code = webkitKeymap[code];
}
return code;
},
_unload: function(e){
var i, l, len, index, ul = unloadListeners.slice(), context;
// execute and clear stored unload listeners
for (i = 0, len = unloadListeners.length; i < len; ++i) {
l = ul[i];
if (l) {
context = window;
l[2].call(context, YAO.getEvent(e, l[0]));
ul[i] = null;
}
}
l = null;
context = null;
unloadListeners = null;
if (listeners) {
for (j = listeners.length - 1; j > -1; j--) {
l = listeners[j];
if (l) {
YAO.removeListener(l[0], l[1], l[2]);
}
}
l = null;
}
YAO.removeListener(window, "unload", YAO._unload);
},
getEl: function(elem, boundEl){
var elemID, E, m, i, k, length, len;
if (elem) {
if (elem[nt] || elem.item) {
return elem;
}
if (YAO.isString(elem)) {
elemID = elem;
elem = D.getElementById(elem);
if (elem && elem.id === elemID) {
return elem;
}
else {
if (elem && elem.all) {
elem = null;
E = D.all[elemID];
for (i = 0, len = E.length; i < len; i += 1) {
if (E[i].id === elemID) {
return E[i];
}
}
}
}
return elem;
}
else {
if (elem.DOM_EVENTS) {
elem = elem.get("element");
}
else {
if (YAO.isArray(elem)) {
m = [];
for (k = 0, length = elem.length; k < length; k += 1) {
m[m.length] = YAO.getEl(elem[k]);
}
return m;
}
}
}
}
return null;
},
hasClass: function(elem, className){
var has = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)");
return has.test(elem.className);
},
addClass: function(elem, className){
if (YAO.hasClass(elem, className)) {
return;
}
elem.className = [elem.className, className].join(" ");
},
removeClass: function(elem, className){
var replace = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)", "g");
if (!YAO.hasClass(elem, className)) {
return;
}
var o = elem.className;
elem.className = o.replace(replace, " ");
if (YAO.hasClass(elem, className)) {
YAO.removeClass(elem, className);
}
},
replaceClass: function(elem, newClass, oldClass){
if (newClass === oldClass) {
return false;
}
var has = new RegExp("(?:^|\\s+)" + newClass + "(?:\\s+|$)", "g");
if (!YAO.hasClass(elem, newClass)) {
YAO.addClass(elem, oldClass);
return;
}
elem.className = elem.className.replace(has, " " + oldClass + " ");
if (YAO.hasClass(elem, newClass)) {
YAO.replaceClass(elem, newClass, oldClass);
}
},
getElByClassName: function(className, tag, rootTag){
var elems = [], i, tempCnt = YAO.getEl(rootTag).getElementsByTagName(tag), len = tempCnt.length;
for (i = 0; i < len; i++) {
if (YAO.hasClass(tempCnt[i], className)) {
elems.push(tempCnt[i]);
}
}
if (elems.length < 1) {
return false;
}
else {
return elems;
}
},
setOpacity: function(el, val){
if (YAO.ua.ie) {
if (YAO.isString(el.style.filter)) {
el.style.filter = 'alpha(opacity=' + val * 100 + ')';
if (!el.currentStyle || !el.currentStyle.hasLayout) {
el.style.zoom = 1;
}
}
}
else {
el.style['opacity'] = val;
}
},
YTabs: function(){
var j, len = arguments.length, sigleTab = [];
for (j = 0; j < len; ++j) {
sigleTab[j] = new YAO.simpleTab(arguments[j]);
}
},
fadeUp: function(elem){
if (elem) {
var level = 0, fade = function(){
var timer = null;
level += 0.05;
if (timer) {
clearTimeout(timer);
timer = null;
}
if (level > 1) {
YAO.setOpacity(elem, 1);
return false;
}
else {
YAO.setOpacity(elem, level);
}
timer = setTimeout(fade, 50);
};
fade();
}
},
zebra: function(){
var j, length = arguments.length;
for (j = 0; j < length; ++j) {
(function(config){
var root = YAO.getEl(config.rootTag) || (config.root || null), rows = root.getElementsByTagName(config.rowTag) || (config.rows || null), i, len = rows.length, lastClass = '';
if (root && rows && len > 1) {
for (var i = 0; i < len; ++i) {
rows[i].className = i % 2 == 0 ? 'even' : 'odd';
rows[i].onmouseover = function(){
lastClass = this.className;
YAO.replaceClass(this, lastClass, 'hover');
};
rows[i].onmouseout = function(){
YAO.replaceClass(this, 'hover', lastClass);
};
}
}
else {
return false;
}
})(arguments[j]);
}
},
moveElement: function(element, finalX, finalY, speed){
var elem = YAO.isString(element) ? YAO.getEl(element) : element, style = null;
if (elem) {
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0";
}
if (!elem.style.top) {
elem.style.top = "0";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == finalX && ypos == finalY) {
return true;
}
if (xpos < finalX) {
var dist = Math.ceil((finalX - xpos) / 10);
xpos = xpos + dist;
}
if (xpos > finalX) {
var dist = Math.ceil((xpos - finalX) / 10);
xpos = xpos - dist;
}
if (ypos < finalY) {
var dist = Math.ceil((finalY - ypos) / 10);
ypos = ypos + dist;
}
if (ypos > finalY) {
var dist = Math.ceil((ypos - finalY) / 10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
elem.movement = setTimeout(function(){
YAO.moveElement(element, finalX, finalY, speed);
}, speed);
}
},
ajaxRequest: function(url, id, sload){
var oXhr, elem = YAO.isString(id) ? YAO.getEl(id) : id, sLoading = sload || '正在获取数据，请稍后...';
if (!url || !id) {
return;
}
if (window.XMLHttpRequest) {
oXhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
oXhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (oXhr !== null) {
try {
oXhr.open('GET', url, true);
oXhr.onreadystatechange = function(){
if (oXhr.readyState == 4) {
if (oXhr.status == 200 || location.href.indexOf('http') === -1) {
elem.innerHTML = oXhr.responseText;
}
else {
elem.innerHTML = sLoading;
}
}
};
oXhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
oXhr.send(null);
}
catch (e) {
throw new Error(e);
return false;
}
}
else {
throw new Error("Your browser does not support XMLHTTP.");
return false;
}
}
};
YAO.on(window, "unload", YAO._unload);
}();
YAO.simpleTab = function(oConfigs){
this.tabCnt = (oConfigs.tabId) ? YAO.getEl(oConfigs.tabId) : (oConfigs.tabRoot || null);
this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
this.length = this.tabs.length || 0;
this.defaultIndex = oConfigs.defaultIndex || 0;
this.lastIndex = this.defaultIndex;
this.lastTab = this.tabs[this.lastIndex] || null;
this.lastContent = this.contents[this.lastIndex] || null;
this.evtName = oConfigs.evt || 'mouseover';
this.defaultClass = oConfigs.defaultClass || 'current';
this.previousClass = oConfigs.previousClass || '';
this.hideAll = oConfigs.hideAll || false;
this.auto = oConfigs.auto || false;
this.autoSpeed = oConfigs.autoSpeed || 6000;
this.fadeUp = oConfigs.fadeUp || false;
this.scroll = oConfigs.scroll || false;
this.scrollId = oConfigs.scrollId || null;
this.scrollSpeed = oConfigs.scrollSpeed || 5;
this.direction = oConfigs.direction || 'V';
this.activeTag = oConfigs.activeTag || 'IMG';
this.ajax = oConfigs.ajax || false;
this.aPath = oConfigs.aPath || '';
var i, that = this;
if (this.tabs && this.contents) {
if (this.auto) {
this.timer = setTimeout(function(){
that.autoChange();
}, that.autoSpeed);
}
if (!this.hideAll) {
YAO.addClass(this.lastTab, this.defaultClass);
if (!this.ajax) {
this.lastContent.style.display = 'block';
}
else{
this.ajaxTab(this.lastTab);
}
}
else {
YAO.removeClass(this.lastTab, this.defaultClass);
if (!this.scroll) {
this.lastContent.style.display = 'none';
}
}
for (i = 0; i < this.length; ++i) {
if (i !== this.defaultIndex && !this.scroll) {
YAO.removeClass(this.tabs[i], 'current');
if (!this.ajax) {
this.contents[i].style.display = 'none';
}
}
YAO.on(this.tabs[i],this.evtName, function(index){
return function(event){
var evt = null, currentContent = that.ajax ? that.contents : that.contents[index], currentTab = this;
that.setCurrent.call(that, currentContent, index);
that.lastIndex = index;
if (that.auto) {
that.isPause = true;
}
evt = event || window.event;
YAO.stopEvent(evt);
}
}(i));
YAO.on(this.tabs[i],'mouseout', function(index){
return function(){
if (that.hideAll && that.evtName === 'mouseover') {
if (that.lastTab === this) {
YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
}
if (that.previousClassTab) {
YAO.removeClass(that.previousClassTab, that.previousClass);
}
if (!that.scroll && !that.ajax) {
that.contents[index].style.display = 'none';
}
}
else {
if (that.auto) {
that.isPause = false;
}
}
}
}(i));
}
}
};
YAO.simpleTab.prototype.timer = null;
YAO.simpleTab.prototype.isPause = false;
YAO.simpleTab.prototype = {
autoChange: function(){
var that = this;
if (!this.isPause) {
var currentContent = null, currentTab = null;
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.lastIndex = this.lastIndex + 1;
if (this.lastIndex === this.length) {
this.lastIndex = 0;
}
currentContent = this.ajax ? this.contents : this.contents[this.lastIndex];
currentTab = this.tabs[this.lastIndex];
this.setCurrent(currentContent, this.lastIndex);
this.timer = setTimeout(function(){
that.autoChange();
}, this.autoSpeed);
}
else {
this.timer = setTimeout(function(){
that.autoChange()
}, this.autoSpeed);
return false;
}
},
setCurrent: function(curCnt, index){
var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0;
curTab = this.tabs[index];
YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
if (curTab === this.tabs[this.defaultIndex]) {
YAO.addClass(curTab, this.defaultClass);
}
else {
YAO.addClass(curTab, 'current');
}
if (this.previousClass) {
if (this.previousClassTab) {
YAO.removeClass(this.previousClassTab, this.previousClass);
}
if (index !== 0) {
YAO.addClass(this.tabs[index - 1], this.previousClass);
if ((index - 1) === this.defaultIndex) {
YAO.removeClass(this.tabs[index - 1], this.defaultClass);
}
this.previousClassTab = (this.tabs[index - 1]);
}
}
if (!this.scroll && !this.ajax) {
this.lastContent.style.display = "none";
curCnt.style.display = "block";
}
if (this.fadeUp) {
activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
if (this.lastContent !== curCnt) {
YAO.fadeUp(activeObj);
}
}
else {
if (this.scroll) {
activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0];
if(this.direction === 'V'){
itemHeight = activeObj.offsetHeight;
scrollHeight = -(index * itemHeight);
}
else{
itemWidth = activeObj.offsetWidth;
scrollWidth = -(index * itemWidth);
}
YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed);
}
}
if (!this.ajax) {
this.lastContent = curCnt;
}
else {
this.ajaxTab(curTab);
}
this.lastTab = curTab;
},
ajaxTab: function(curTab){
var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
YAO.ajaxRequest(url, cnt, cnt.innerHTML);
}
};

复制代码

哎，还是自己基础知识没有学习好，在IE的冒泡事件里A标签的this指向的Object但是不是一个XHTML DOM对象，通过这个this是获得不了tagName的，所以我在IE里给this添加className只是给一个JS的对象添加了一个属性，而浏览器不会把这个属性跟XHTML DOM联系起来，也就不会解析相应的CSS样式，并在IE中显示出来。

呵呵，不知道大家发现没有，我现在的演示在IE中，那个滚动切换的圆点，点击的时候，我的期望是显示红摄圆点（current的className样式）。哎，还总自以为自己对DOM的事件有一定的了解了，却发先自己学的很不扎实。哎！！还要继续努力啊！！

yaohaixiao　楼主

会武术的科学家

帖子: 2057
体力: 5636
威望: 45
居住地: 浙江省杭州市

发表于 2009-7-10 14:12:41 |显示全部楼层

呵呵，可能我上面说的不清楚，给个示例

<a id="aLink" href="http://www.yaohaixiao.com/">A Link</a>
<script language="javascript" type="text/javascript">
var Link = document.getElementById()
function addListener(el, event, func){
try {
el.addEventListener(event, func, false);
}
catch (e) {
try {
el.attachEvent('on' + event, func);
}
catch (e) {
el['on' + event] = func;
}
}
}
addListener(Link, 'click', function(){
alert(this);
alert(this.tagName);
});
</script>

复制代码

大家到IE和FF测试下就知道我说的不同了

liujincan　

灿灿

高级会员 

帖子: 243
体力: 733
威望: 0
居住地: 广东省深圳市

发表于 2009-7-10 15:46:14 |显示全部楼层

好好学习，天天向上！

yaohaixiao　楼主

会武术的科学家

帖子: 2057
体力: 5636
威望: 45
居住地: 浙江省杭州市

发表于 2009-7-11 05:44:41 |显示全部楼层

又添加了一个新示例

看看！！

http://www.yaohaixiao.com/effects/samples/ytabs/

程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-11 05:46 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

dnaliang　

钻石会员

帖子: 1538
体力: 7921
威望: 0

发表于 2009-7-11 08:38:32 |显示全部楼层

楼主,,,效果真棒... 眼睛都看花了...

能不能整理1个最新的完整的包呀...
看到后面都不知道你哪个是最新最完整的啦.呵呵...

另外,问下楼主, 你有几个图片焦点变化的效果,,, 其中里面的图片能不能放GIF动画格式的图片啊?
http://www.i3gchina.com/bnqhtml/4.html 我用了个类似的,,,
但放了 gif动画图片,,,她的gif动画不起效果了...虽然其他焦点变化,图片显示都正常, 但那个GIF图片,却好像只是静态的.
不知道能否解决?谢谢啊

www.i1.cn
找些人帮忙。。。

nisk　

初级会员

帖子: 45
体力: 165
威望: 0
居住地: 广东省广州市

发表于 2009-7-11 10:04:01 |显示全部楼层

Thanks~~~~收下。。

www.mainones.com

yaohaixiao　楼主

会武术的科学家

帖子: 2057
体力: 5636
威望: 45
居住地: 浙江省杭州市

发表于 2009-7-11 11:25:09 |显示全部楼层

回复 143# dnaliang 的帖子

我第一贴的下载地址就可以下载最新的全部效果打包，你自己去下。你的那个地址的效果我看过了，我劝你还是不要用那种代码的效果。找个其他的吧！

var browser=navigator.userAgent.toLowerCase();
var IE = false;
if (browser.indexOf("msie") != -1) {
IE = true;
}
/*
var IE = function(){
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
return true;
}
else{
return false;
}
}
*/
// 完全可以删除
function debug(v) {
var b = document.getElementsByTagName('body')[0];
var d = document.createElement('div');
d.style.color="#fff";
d.innerHTML = v;
b.insertBefore(d, b.firstChild);
}
var imgs = Array(); // 这个很新颖，搞笑
var currScene = 0;
var pgs = Array();
var slideID = null;
var urls = [
'http://www.96ta.cn',
'http://www.96ta.cn',
'http://www.96ta.cn',
'http://www.96ta.cn',
];
function initAnimation() {
var h = $('fla_head');
imgs = h.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
if(urls[i]!='') {
imgs[i].url = urls[i] // 这个也很有创意，给这个IMG对象添加url属性，没有错，但估计些的人，不清楚为什么可以起作用，用闭包就可以解决
imgs[i].onclick = function() {
location.href = this.url;//绕了一圈，原来即使想给图加个连接，为什么不直接就在页面里加链接，这样JS不能运行，也可以点击啊，整这么多事
}
imgs[i].style.cursor = 'pointer';// 如果是链接，这个就没有必要了
}
}
pgs = $('fla_pages').getElementsByTagName('a');
for(var i=0; i<pgs.length; i++) {
pgs[i].i = i; //还是上面那招，不过现在是给A标签这个DOM对象添加.i这个属性
pgs[i].onclick = function(){
nextScene(this.i);
}
}
$('prev_scene').onclick = function() {
if(currScene!=0)
nextScene(currScene-1);
}
$('next_scene').onclick = function() {
nextScene(currScene+1);
}
$('pause_scene').onclick = function() {
togglePlaySlideShow(this);
}
startSlideShow();
}
var step = 10;
var timeID = null;
function animate(el, id) {
if(!timeID) {
// alert(el.src);
el.style.zIndex = 20;
imgs[id].style.zIndex = 19;
el.style.opacity = 1;
if(IE) {
el.style.filter = "alpha(opacity=100)";
}
timeID = setInterval(function(){animate(el, id)}, 1);
}
el.style.opacity = parseFloat(el.style.opacity) - (step/100);
if(IE) {
el.style.filter = "alpha(opacity="+ parseFloat(el.style.opacity)*100 +")";
}
if(parseFloat(el.style.opacity) < 0.01) {
clearInterval(timeID);
timeID = null;
el.style.zIndex = 1;
imgs[id].style.zIndex = 20;
pgs[currScene].className = '';
pgs[id].className = 'active';
el.style.opacity = 1;
if(IE) {
el.style.filter = "alpha(opacity=100)";
}
currScene = id;
// startSlideShow();
}
}
function nextScene(id) {
if(id==imgs.length) {
id=0;
}
// debug('ID:' + id);
// debug('currScene:' + currScene);
animate(imgs[currScene], id);
}
function togglePlaySlideShow(el) {
if(slideID) {
clearInterval(slideID);
slideID = null;
el.innerHTML = 'play';
}else {
startSlideShow();
el.innerHTML = 'pause';
}
}
function startSlideShow() {
if(!slideID) {
slideID = setInterval(startSlideShow, 4000);
}else {
id = currScene+1;
nextScene(id);
}
}

复制代码

唉，不想在些注释了。

yaohaixiao　楼主

会武术的科学家

帖子: 2057
体力: 5636
威望: 45
居住地: 浙江省杭州市

发表于 2009-7-11 11:56:18 |显示全部楼层

现在我的这个完整的JS库代码

把之前自己整理的一些觉得比较实用的代码整合一下，写成了现在的YAO.js库，呵呵，只是包含很多功能单体类，这样的代码估计大家看得更清楚些，没有过深的链，最有3级，也算是方便大家调用。由于代码比较常了，贴不下，就打包给大家自己看吧，能力有限，有什么不对的还请大家指正，稍后我就会用这个库把我之前的一系列的程序重写，整理后一起发给大家看看，那些也算是比较使用的东西。

YAO.JS未压缩版：

YAO-MINI.JS压缩版：

ytabs.js基本是直针对我这个滑动门的代码：

[ 本帖最后由 yaohaixiao 于 2009-7-11 12:04 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 