<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BySideMenu</title>
<style type="text/css">
ul.bsm{
padding:0px;
margin: 0 auto;
border: 1px solid #969696;
list-style-type: none;
top: 10px;
}
ul.bsm li {}
</style>
<script type="text/javascript">
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 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);
}
}
}
var BySideMenu = Class.create();
BySideMenu.prototype = {
initialize: function(containerId, options){
var Container = $(containerId), oThis = this;
this.Childs = $$(Container, 'li');
var num = this.Childs.length;
this.SetOptions(options);
Extend(this, this.options);
this.timer = null, this.t = 0, 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";
this.defaultDis = (!!this.vertical ? iHeight : iWidth)/ num;
this.openSize = (!!this.vertical ? iHeight : iWidth)- (num - 1) * this.compressSize;
Container.style.position = "relative";
Container.style.overflow = "hidden"; Each(this.Childs, function(oList, index){
oList.style.position = "absolute";
oList._target = index * this.defaultDis;
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');
}); }, SetOptions: function(options){
this.options = {
defaultIndex: false,
expandMode: "mouseover",
pinMode: "mouseout",
vertical: false,
compressSize: 40,
autoSize: false,
containerWidth: 460,
containerHeight: 225,
time: 100,
duration: 500,
tween: Tween.Bounce.easeOut
};
Extend(this.options, options || {});
}, SetTarget: function(i){
Each(this.Childs, function(oList, index){
if(i == 'reset'){
oList._target = index * this.defaultDis;
}else{
oList._target = index <= i ? (index * this.compressSize) : this.openSize + (index-1)* this.compressSize;// 每个List目标值设定
}
}, this);
this.Move();
},
/*
记得cloudgamer的Tween类上对tween(t, b, c, d)参数解析. t为递增时间量 b为初始目标值 c为目标变化量 d为持续时间
然后当t >= d && 变化量为0的时候 就停止setTimeout循环 下面Move方法里 iNow我留着存储b(即当前的目标值) oList_target(为每个list对应的目标值) 那么变化量c就应该是(oList._target - iNow)
oThis.duration就是持续时间d. *****但我用Tween类却不能实现缓动,然后我排查 发现在Move方法里不应该每次循环都重新获取iNow,但我不知道该怎么改能用上Tween类
希望大家帮个忙,,
*/ Move: function(){
clearTimeout(this.timer);
Each(this.Childs, function(oList){
var iNow = parseInt(oList.style[!!this.vertical ? 'top' : 'left'], 10), oThis = this, hasDis = oList._target - iNow;
if(!!hasDis){
oList.style[!!this.vertical ? 'top' : 'left'] = Math.round(oThis.tween(oThis.t++, iNow, hasDis, oThis.duration)) + "px";
$('ospan').innerHTML = "t: " + oThis.t + "inow: " + iNow + "hasDis: " + hasDis + "duration: " + oThis.duration;
this.timer = setTimeout(function(){oThis.Move();}, this.time);
}
}, this);
}
}</script></head><body>
<hr>
<span style="color:white" id="test"></span>
<ul id="bysidemenu" class="bsm">
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_125307814376MK.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_12530781423n0R.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_1253078131hins.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_125307814759uU.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_1253078146j6GQ.jpg" /></li>
</ul>
<span id="ospan"></span>
<br/>
<hr>
<script type="text/javascript">
<!--
var mySideMenu = new BySideMenu('bysidemenu');
//-->
</script>
</body>
</html>
// 唉,折腾了一天 Tween类还是不知道怎么能用上.希望大家放到本地调调.成功了再追加100分..谢谢
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BySideMenu</title>
<style type="text/css">
ul.bsm{
padding:0px;
margin: 0 auto;
border: 1px solid #969696;
list-style-type: none;
top: 10px;
}
ul.bsm li {}
</style>
<script type="text/javascript">
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 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);
}
}
}
var BySideMenu = Class.create();
BySideMenu.prototype = {
initialize: function(containerId, options){
var Container = $(containerId), oThis = this;
this.Childs = $$(Container, 'li');
var num = this.Childs.length;
this.SetOptions(options);
Extend(this, this.options);
this.timer = null, this.t = 0, 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";
this.defaultDis = (!!this.vertical ? iHeight : iWidth)/ num;
this.openSize = (!!this.vertical ? iHeight : iWidth)- (num - 1) * this.compressSize;
Container.style.position = "relative";
Container.style.overflow = "hidden"; Each(this.Childs, function(oList, index){
oList.style.position = "absolute";
oList._target = index * this.defaultDis;
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');
}); }, SetOptions: function(options){
this.options = {
defaultIndex: false,
expandMode: "mouseover",
pinMode: "mouseout",
vertical: false,
compressSize: 40,
autoSize: false,
containerWidth: 460,
containerHeight: 225,
time: 100,
duration: 500,
tween: Tween.Bounce.easeOut
};
Extend(this.options, options || {});
}, SetTarget: function(i){
Each(this.Childs, function(oList, index){
if(i == 'reset'){
oList._target = index * this.defaultDis;
}else{
oList._target = index <= i ? (index * this.compressSize) : this.openSize + (index-1)* this.compressSize;// 每个List目标值设定
}
oList._b = oList.offsetLeft;
oList._c = oList._target - oList._b;
}, this);
this.t = 0;
this.d=100
this.Move();
},
/*
记得cloudgamer的Tween类上对tween(t, b, c, d)参数解析. t为递增时间量 b为初始目标值 c为目标变化量 d为持续时间
然后当t >= d && 变化量为0的时候 就停止setTimeout循环 下面Move方法里 iNow我留着存储b(即当前的目标值) oList_target(为每个list对应的目标值) 那么变化量c就应该是(oList._target - iNow)
oThis.duration就是持续时间d. *****但我用Tween类却不能实现缓动,然后我排查 发现在Move方法里不应该每次循环都重新获取iNow,但我不知道该怎么改能用上Tween类
希望大家帮个忙,,
*/ Move: function(){
clearTimeout(this.timer);
// Each(this.Childs, function(oList){
// var iNow = parseInt(oList.style[!!this.vertical ? 'top' : 'left'], 10), oThis = this, hasDis = oList._target - iNow;
// if(!!hasDis){
// oList.style[!!this.vertical ? 'top' : 'left'] = Math.round(oThis.tween(oThis.t++, iNow, hasDis, oThis.duration)) + "px";
// //$('ospan').innerHTML = "t: " + oThis.t + "inow: " + iNow + "hasDis: " + hasDis + "duration: " + oThis.duration;
// this.timer = setTimeout(function(){oThis.Move();}, this.time);
// }
// }, this);
//设置样式
if (this.t < this.d) {
//未到达
var oThis = this
Each(this.Childs, function(o){
o.style.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.left = o._target + "px"; })
}
}
}</script></head><body>
<hr>
<span style="color:white" id="test"></span>
<ul id="bysidemenu" class="bsm">
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_125307814376MK.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_12530781423n0R.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_1253078131hins.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_125307814759uU.jpg" /></li>
<li><img src="http://hi.csdn.net/attachment/200909/16/3275222_1253078146j6GQ.jpg" /></li>
</ul>
<span id="ospan"></span>
<br/>
<hr>
<script type="text/javascript">
<!--
var mySideMenu = new BySideMenu('bysidemenu');
//-->
</script>
</body>
</html>
==//哈哈 cloudgamer出来了 太好了.. 现在是缓动了 有两个问题..
1. 如果在两个图片间一直切换图片会越来越偏移
2. 我怎么才能控制 缓动的速度 我将duration减小 怎么不行
至于偏移的问题我再看看
就不会偏移了
1是那个border
恩 谢谢了 太感谢了..
最后还有一点
Move: function(){
clearTimeout(this.timer);// 为什么要在这里清timer那样第二次循环move不就又得新开一个timer了?
自己动手试试