SliderMenu
2009-09-17 13:07 BlueDream 阅读(480) 评论(0) 编辑 收藏 举报
程序源码
var isIE6 = navigator.userAgent.indexOf('MSIE 6.0') != -1;
isIE6 && document.execCommand("BackgroundImageCache",false,true);
var $ = function(id){
return "string" == typeof id ? document.getElementById(id) : id;
}
var $$ = function(e, tag){
return e.getElementsByTagName(tag);
}
var Tween = {
Linear: function(t,b,c,d){return c*t/d + b;},
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
},
Bounce: {
easeIn: function(t,b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOut: function(t,b,c,d){
if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
}
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
function addEvent(oTarget, sType, fnHandler){
if(window.addEventListener){
oTarget.addEventListener(sType, fnHandler, false);
}else if(window.attachEvent){
oTarget.attachEvent("on" + sType, fnHandler);
}else{
oTarget["on" + sType] = fnHandler;
}
}
var CancelBubble = function(e){
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
var CurrentStyle = function(e){
return e.currentStyle || document.defaultVeiw.getComputedStyle(e, null);
}
var Extend = function(destination, source){
for(var pro in source){
destination[pro] = source[pro];
}
return destination;
}
var Contains = function(a, b){
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
var Each = function(array, callback, thisObj){
if(array.forEach){
array.forEach(callback, thisObj);
}else{
for(var i = 0, len = array.length; i < len; i++) callback.call(thisObj, array[i], i, array);
}
}
var Class = {
create: function(){
return function() {
this.initialize.apply(this, arguments);
}
}
}
// ========================================================
// ===== images slider ====
// script: s_liangchao1s
// http://www.cnblogs.com/s_liangchao1s/
// date: 2009-09-16
// ========================================================
var BySideMenu = Class.create();
BySideMenu.prototype = {
//* ==== the function init ==== */
initialize: function(containerId, childType, options){
this.container = $(containerId)
var Container = $(containerId), oThis = this;
this.Childs = $$(Container, childType);
var num = this.Childs.length;
this.SetOptions(options);
Extend(this, this.options);
this.timer = null, iWidth = 0, iHeight = 0;
if(!!this.autoSize){
iWidth = this.Childs[0].childNodes[0].offsetWidth;
iHeight = this.Childs[0].childNodes[0].offsetHeight;
}else{
iWidth = this.containerWidth;
iHeight = this.containerHeight;
}
Container.style.width = iWidth + "px";
Container.style.height = iHeight + "px";
Container.style.position = "relative";
Container.style.overflow = "hidden";
this.defaultDis = (!!this.vertical ? iHeight : iWidth)/ num;
this.openSize = (!!this.vertical ? iHeight : iWidth)- (num - 1) * this.compressSize;
Each(this.Childs, function(oList, index){
oList.style.position = "absolute";
this.SetPosition(oList,index);
oList.style[this.vertical ? 'top' : 'left'] = oList._target + "px";
addEvent(oList, this.expandMode, function(){oThis.SetTarget(index)});
}, this);
!!this.pinMode && addEvent(Container, this.pinMode, function(e){
var o = Event(e).relatedTarget;
!Contains(Container, o) && oThis.SetTarget('reset');
});
},
/* ==== set the default params ==== */
SetOptions: function(options){
this.options = {
defaultIndex: 'none', // 默认展开索引.
expandMode: "mouseover", // 展开触发事件
pinMode: "mouseout", // 关闭触发事件
vertical: false, // 展开方向
compressSize: 40, // 图片压缩后宽度
autoSize: false, // 是否自适应如果true则下面两个属性无效
containerWidth: 300, // autoSize为false时.容器的宽度
containerHeight: 385, // autoSize为false时.容器的高度
time: 10, // 缓动频率
duration: 50, // 缓动步长(越短越快)
tween: Tween.Linear // 缓动公式
};
Extend(this.options, options || {});
},
/* ==== set searching the target ==== */
SetTarget: function(i){
Each(this.Childs, function(oList, index){
if(i == 'reset'){
this.SetPosition(oList, index);
}else{
oList._target = index <= i ? (index * this.compressSize) : this.openSize + (index-1)* this.compressSize;
}
oList._b = parseInt(oList.style[!!this.vertical ? 'top' : 'left']);
oList._c = oList._target - oList._b;
}, this);
this.t = 0;this.d = this.duration;
this.Move();
},
/* ==== move object ==== */
Move: function(){
clearTimeout(this.timer);
if (this.t < this.d) {
var oThis = this;
Each(this.Childs, function(o){
o.style[!!this.vertical ? 'top' : 'left'] = Math.round(this.tween(this.t, o._b, o._c, this.d)) + "px";
},this);
this.t++; this.timer = setTimeout(function(){oThis.Move();}, this.time);
}else{
Each(this.Childs, function(o){ o.style[!!this.vertical ? 'top' : 'left'] = o._target + "px"; }, this);
}
},
/* ==== store the init status ==== */
SetPosition: function(oList,index){
if(this.defaultIndex == 'none'){
oList._target = index * this.defaultDis;
}else{
var len = this.Childs.length;
if(this.defaultIndex < 0) this.defaultIndex = 0;
else if(this.defaultIndex >= len) this.defaultIndex = len;
oList._target = (index <= this.defaultIndex) ? index * this.compressSize : (index-1) * this.compressSize + this.openSize;
}
}
}
isIE6 && document.execCommand("BackgroundImageCache",false,true);
var $ = function(id){
return "string" == typeof id ? document.getElementById(id) : id;
}
var $$ = function(e, tag){
return e.getElementsByTagName(tag);
}
var Tween = {
Linear: function(t,b,c,d){return c*t/d + b;},
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
},
Bounce: {
easeIn: function(t,b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOut: function(t,b,c,d){
if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
}
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
function addEvent(oTarget, sType, fnHandler){
if(window.addEventListener){
oTarget.addEventListener(sType, fnHandler, false);
}else if(window.attachEvent){
oTarget.attachEvent("on" + sType, fnHandler);
}else{
oTarget["on" + sType] = fnHandler;
}
}
var CancelBubble = function(e){
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
var CurrentStyle = function(e){
return e.currentStyle || document.defaultVeiw.getComputedStyle(e, null);
}
var Extend = function(destination, source){
for(var pro in source){
destination[pro] = source[pro];
}
return destination;
}
var Contains = function(a, b){
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
var Each = function(array, callback, thisObj){
if(array.forEach){
array.forEach(callback, thisObj);
}else{
for(var i = 0, len = array.length; i < len; i++) callback.call(thisObj, array[i], i, array);
}
}
var Class = {
create: function(){
return function() {
this.initialize.apply(this, arguments);
}
}
}
// ========================================================
// ===== images slider ====
// script: s_liangchao1s
// http://www.cnblogs.com/s_liangchao1s/
// date: 2009-09-16
// ========================================================
var BySideMenu = Class.create();
BySideMenu.prototype = {
//* ==== the function init ==== */
initialize: function(containerId, childType, options){
this.container = $(containerId)
var Container = $(containerId), oThis = this;
this.Childs = $$(Container, childType);
var num = this.Childs.length;
this.SetOptions(options);
Extend(this, this.options);
this.timer = null, iWidth = 0, iHeight = 0;
if(!!this.autoSize){
iWidth = this.Childs[0].childNodes[0].offsetWidth;
iHeight = this.Childs[0].childNodes[0].offsetHeight;
}else{
iWidth = this.containerWidth;
iHeight = this.containerHeight;
}
Container.style.width = iWidth + "px";
Container.style.height = iHeight + "px";
Container.style.position = "relative";
Container.style.overflow = "hidden";
this.defaultDis = (!!this.vertical ? iHeight : iWidth)/ num;
this.openSize = (!!this.vertical ? iHeight : iWidth)- (num - 1) * this.compressSize;
Each(this.Childs, function(oList, index){
oList.style.position = "absolute";
this.SetPosition(oList,index);
oList.style[this.vertical ? 'top' : 'left'] = oList._target + "px";
addEvent(oList, this.expandMode, function(){oThis.SetTarget(index)});
}, this);
!!this.pinMode && addEvent(Container, this.pinMode, function(e){
var o = Event(e).relatedTarget;
!Contains(Container, o) && oThis.SetTarget('reset');
});
},
/* ==== set the default params ==== */
SetOptions: function(options){
this.options = {
defaultIndex: 'none', // 默认展开索引.
expandMode: "mouseover", // 展开触发事件
pinMode: "mouseout", // 关闭触发事件
vertical: false, // 展开方向
compressSize: 40, // 图片压缩后宽度
autoSize: false, // 是否自适应如果true则下面两个属性无效
containerWidth: 300, // autoSize为false时.容器的宽度
containerHeight: 385, // autoSize为false时.容器的高度
time: 10, // 缓动频率
duration: 50, // 缓动步长(越短越快)
tween: Tween.Linear // 缓动公式
};
Extend(this.options, options || {});
},
/* ==== set searching the target ==== */
SetTarget: function(i){
Each(this.Childs, function(oList, index){
if(i == 'reset'){
this.SetPosition(oList, index);
}else{
oList._target = index <= i ? (index * this.compressSize) : this.openSize + (index-1)* this.compressSize;
}
oList._b = parseInt(oList.style[!!this.vertical ? 'top' : 'left']);
oList._c = oList._target - oList._b;
}, this);
this.t = 0;this.d = this.duration;
this.Move();
},
/* ==== move object ==== */
Move: function(){
clearTimeout(this.timer);
if (this.t < this.d) {
var oThis = this;
Each(this.Childs, function(o){
o.style[!!this.vertical ? 'top' : 'left'] = Math.round(this.tween(this.t, o._b, o._c, this.d)) + "px";
},this);
this.t++; this.timer = setTimeout(function(){oThis.Move();}, this.time);
}else{
Each(this.Childs, function(o){ o.style[!!this.vertical ? 'top' : 'left'] = o._target + "px"; }, this);
}
},
/* ==== store the init status ==== */
SetPosition: function(oList,index){
if(this.defaultIndex == 'none'){
oList._target = index * this.defaultDis;
}else{
var len = this.Childs.length;
if(this.defaultIndex < 0) this.defaultIndex = 0;
else if(this.defaultIndex >= len) this.defaultIndex = len;
oList._target = (index <= this.defaultIndex) ? index * this.compressSize : (index-1) * this.compressSize + this.openSize;
}
}
}
使用方法
var myIndexMenu = new BySideMenu('indexmenu','li',{
expandMode: 'mouseover', // 图片展开触发事件如'mouseover','click'
containerWidth:750, // 容器宽度 如果设置autoSize:true那么将取第一张图片的宽度
containerHeight: 334, // 容器高度 同上.
compressSize: 35 // 压缩后距离 当焦点移到某张图片,其余图片间的空隙
});
expandMode: 'mouseover', // 图片展开触发事件如'mouseover','click'
containerWidth:750, // 容器宽度 如果设置autoSize:true那么将取第一张图片的宽度
containerHeight: 334, // 容器高度 同上.
compressSize: 35 // 压缩后距离 当焦点移到某张图片,其余图片间的空隙
});
通过改变参数我们可以很容易的生产出一种新形势的slideMenu.由于篇幅原因就不演示了.可以直接下载源码获取.
var mySideMenu = new BySideMenu('bysidemenu','li',{
defaultIndex: 0, // 默认展开图片索引 0--图片的数量(小于0则为0, 大于最多数量则为最多数量)
expandMode: 'click', // 展开事件设置为'click'
vertical: true, // 设置展开方式 默认为false(横向展开) true(纵向展开)
pinMode: false, // 设置闭合模式 默认为mouseout(移开容器恢复默认状态).false则为不回复.(也可设置click等)
tween: Tween.Bounce.easeOut // Tween缓动模式 默认为Linear (目前提供三种) 也可以自定义
});
defaultIndex: 0, // 默认展开图片索引 0--图片的数量(小于0则为0, 大于最多数量则为最多数量)
expandMode: 'click', // 展开事件设置为'click'
vertical: true, // 设置展开方式 默认为false(横向展开) true(纵向展开)
pinMode: false, // 设置闭合模式 默认为mouseout(移开容器恢复默认状态).false则为不回复.(也可设置click等)
tween: Tween.Bounce.easeOut // Tween缓动模式 默认为Linear (目前提供三种) 也可以自定义
});
