【CSON原创】 图片滑动展开效果发布

功能说明：

鼠标移动到不同图片上，该图片滑动展开，其它图片折叠。

支持IE 6 7 8 firefox chrome

效果预览：

View Code

/*
created by cson
supports ie 6 7 8 firefox and chrome
*/

/*constructor of 'flow images controller' */
var flow_slide_imgs = function(options) {
this._init();

}
flow_slide_imgs.prototype = {
/* init container and images and set object's properties */
_init: function(options) {

var defaults = {
containerId: 'container',
ImgsWidth: 0.6

};
var opts = util.extend(defaults, options);

this.container = util.$(opts.containerId);
this.imgs = this.container.getElementsByTagName('img');
this.imgWidth = parseInt(util.getComputedStyle(this.container).width) * opts.ImgsWidth;
this.containerWidth = parseInt(util.getComputedStyle(this.container).width);
this.containerHeight = parseInt(util.getComputedStyle(this.container).height);
this.aveWidth = this.containerWidth / this.imgs.length;
this.newAveWidth = (this.containerWidth - parseInt(this.imgWidth)) / (this.imgs.length - 1);
this.selectedIndex;
this.movePath = 80;
this.canLeft = true;
this.canRight = true;

this._setContainerStyle();
this._setImgsStyle();
this._bindClickEvent();

},
/* set container's style */
_setContainerStyle: function() {
this.container.style.cssText = 'overflow:hidden; position:relative;';

},
/* set styles of  images in container */
_setImgsStyle: function() {

for (var i = 0; i < this.imgs.length; i++) {
this.imgs[i].style.cssText = 'position:absolute;'
+ 'left:' + i * this.aveWidth + 'px;'
+ 'top:0px;'
+ 'width:' + this.imgWidth + ';'
+ 'height:' + this.containerHeight + 'px;'
+ 'z-index:' + i + ';'
+ 'display:block';

}

},
/* get current selected image's index */
_getSelectedIndex: function(target) {
for (var i = 0, len = this.imgs.length; i < len; i++) {
if (target == this.imgs[i]) {
if (this.selectedIndex && this.selectedIndex < i) {
this.canLeft = true;
this.canRight = false;
}
if (this.selectedIndex && this.selectedIndex > i) {
this.canLeft = false;
this.canRight = true;
}
break;

}
}
return i;
},

/* reset images' size and position for three situation */
_resetImgsSizeAndPos: function(obj, selectedIndex) {

if (typeof obj.selectedIndex == 'undefined') {
if (parseInt(util.getComputedStyle(obj.imgs[1]).left) > obj.newAveWidth) {

for (var i = 1; i < obj.imgs.length; i++) {

if (i <= selectedIndex)
obj.imgs[i].style.left = Math.max(parseInt(obj.imgs[i].style.left) - obj.movePath * i, i * obj.newAveWidth) + 'px';
else
obj.imgs[i].style.left = Math.min(parseInt(obj.imgs[i].style.left) + obj.movePath * (obj.imgs.length - i), obj.containerWidth - (obj.imgs.length - i) * obj.newAveWidth) + 'px';
}

obj.timeId = window.setTimeout(arguments.callee, 100, obj, selectedIndex);
}
if (parseInt(util.getComputedStyle(obj.imgs[1]).left) == obj.newAveWidth || parseInt(util.getComputedStyle(obj.imgs[1]).left) == obj.imgWidth) {
obj.selectedIndex = selectedIndex;
}
}
else if (obj.selectedIndex > selectedIndex) {

if (parseInt(util.getComputedStyle(obj.imgs[selectedIndex + 1]).left) < (selectedIndex + 1) * obj.newAveWidth + (obj.imgWidth - obj.newAveWidth) && obj.canRight) {

for (var j = selectedIndex + 1; j <= obj.selectedIndex; j++) {

obj.imgs[j].style.left = Math.min(parseInt(obj.imgs[j].style.left) + obj.movePath, obj.newAveWidth * (j - 1) + obj.imgWidth) + 'px';
}

obj.timeId = window.setTimeout(arguments.callee, 100, obj, selectedIndex);
}
else {
obj.canLeft = true;

obj.selectedIndex = selectedIndex;

}
}
else if (obj.selectedIndex < selectedIndex) {
if (parseInt(util.getComputedStyle(obj.imgs[selectedIndex]).left) > (selectedIndex) * obj.newAveWidth && obj.canLeft) {

for (var j = selectedIndex; j > obj.selectedIndex; j--) {

obj.imgs[j].style.left = Math.max(parseInt(obj.imgs[j].style.left) - obj.movePath, j * obj.newAveWidth) + 'px';
}

obj.timeId = window.setTimeout(arguments.callee, 100, obj, selectedIndex);
}
else {
obj.canRight = true;

obj.selectedIndex = selectedIndex;

}

}

},

/*bind handler for mouseover event of images */
_bindClickEvent: function() {
util.addEventHandler(this.container, 'mouseover', (function(obj) {
return function(eve) {

eve = eve || window.event;
var target = eve.srcElement || eve.target,
selectedIndex = obj._getSelectedIndex(target);

obj._resetImgsSizeAndPos(obj, selectedIndex);

}

})(this));

}

}

欢迎转载，请标明出处：/article/5223724.html

// var util = {
$: function(sId) { return document.getElementById(sId); },
addEventHandler: function(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
}
else {
elem.attachEvent("on" + type, handler);
}
},
removeEventHandler: function(elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
}
else {
elem.detachEvent("on" + type, handler);
}
},
getComputedStyle: function(elem) {
if (elem.currentStyle)
return elem.currentStyle;
else {
return document.defaultView.getComputedStyle(elem, null);
}
},

getElementsByClassName: function(className, parentElement) {
var elems = (parentElement || document.body).getElementsByTagName("*");
var result = [];
for (i = 0; j = elems[i]; i++) {
if ((" " + j.className + " ").indexOf(" " + className + " ") != -1) {
result.push(j);
}
}
return result;
},
extend: function(destination, source) {
for (var name in source) {
destination[name] = source[name];
}
return destination;

}

};

(function() {
var st = window.setTimeout;
window.setTimeout = function(fn, mDelay) {
var t = new Date().getTime();
if (typeof fn == 'function') {
var args = Array.prototype.slice.call(arguments, 2);
var f = function() {
args.push(new Date().getTime() - t - mDelay);
fn.apply(null, args)
};
return st(f, mDelay);
}
return st(fn, mDelay);
}
})();

var flow_slide_imgs = function(options) {
this._init();

}
flow_slide_imgs.prototype = {
_init: function(options) {

var defaults = {
containerId: 'container',
ImgsWidth: 0.6

};
var opts = util.extend(defaults, options);

this.container = util.$(opts.containerId);
this.imgs = this.container.getElementsByTagName('img');
this.imgWidth = parseInt(util.getComputedStyle(this.container).width) * opts.ImgsWidth;
this.containerWidth = parseInt(util.getComputedStyle(this.container).width);
this.containerHeight = parseInt(util.getComputedStyle(this.container).height);
this.aveWidth = this.containerWidth / this.imgs.length;
this.newAveWidth = (this.containerWidth - parseInt(this.imgWidth)) / (this.imgs.length - 1);
this.selectedIndex;
this.movePath = 90;
this.canLeft = true;
this.canRight = true;

this._setContainerStyle();
this._setImgsStyle();
this._bindClickEvent();

},
_setContainerStyle: function() {
this.container.style.cssText = 'overflow:hidden; position:relative;';

},
_setImgsStyle: function() {

for (var i = 0; i < this.imgs.length; i++) {
this.imgs[i].style.cssText = 'position:absolute;'
+ 'left:' + i * this.aveWidth + 'px;'
+ 'top:0px;'
+ 'width:' + this.imgWidth + ';'
+ 'height:' + this.containerHeight + 'px;'
+ 'z-index:' + i + ';'
+ 'display:block';

}

},
_getSelectedIndex: function(target) {
for (var i = 0, len = this.imgs.length; i < len; i++) {
if (target == this.imgs[i]) {
if (this.selectedIndex && this.selectedIndex < i) {
this.canLeft = true;
this.canRight = false;
}
if (this.selectedIndex && this.selectedIndex > i) {
this.canLeft = false;
this.canRight = true;
}
break;
}
} return i;

},

_resetImgsSizeAndPos: function(obj, selectedIndex) {
if (typeof obj.selectedIndex == 'undefined') {
if (parseInt(util.getComputedStyle(obj.imgs[1]).left) > obj.newAveWidth) {

for (var i = 1; i < obj.imgs.length; i++) {

if (i <= selectedIndex)
obj.imgs[i].style.left = Math.max(parseInt(obj.imgs[i].style.left) - obj.movePath * i, i * obj.newAveWidth) + 'px';
else
obj.imgs[i].style.left = Math.min(parseInt(obj.imgs[i].style.left) + obj.movePath * (obj.imgs.length - i), obj.containerWidth - (obj.imgs.length - i) * obj.newAveWidth) + 'px';
}

window.setTimeout (arguments.callee, 60, obj, selectedIndex);
}
if (parseInt(util.getComputedStyle(obj.imgs[1]).left) == obj.newAveWidth || parseInt(util.getComputedStyle(obj.imgs[1]).left) == obj.imgWidth) {
obj.selectedIndex = selectedIndex;
}
}
else if (obj.selectedIndex > selectedIndex) {

if (parseInt(util.getComputedStyle(obj.imgs[selectedIndex + 1]).left) < (selectedIndex + 1) * obj.newAveWidth + (obj.imgWidth - obj.newAveWidth) && obj.canRight) {

for (var j = selectedIndex + 1; j <= obj.selectedIndex; j++) {

obj.imgs[j].style.left = Math.min(parseInt(obj.imgs[j].style.left) + obj.movePath, obj.newAveWidth * (j - 1) + obj.imgWidth) + 'px';
}

window.setTimeout (arguments.callee, 60, obj, selectedIndex);
}
else {
obj.canLeft = true;

obj.selectedIndex = selectedIndex;

}
}
else if (obj.selectedIndex < selectedIndex) {
if (parseInt(util.getComputedStyle(obj.imgs[selectedIndex]).left) > (selectedIndex) * obj.newAveWidth && obj.canLeft) {

for (var j = selectedIndex; j > obj.selectedIndex; j--) {

obj.imgs[j].style.left = Math.max(parseInt(obj.imgs[j].style.left) - obj.movePath, j * obj.newAveWidth) + 'px';
}

obj.timeId = window.setTimeout (arguments.callee, 60, obj, selectedIndex);
}
else {
obj.canRight = true;

obj.selectedIndex = selectedIndex;

}

}

},
_bindClickEvent: function() {
util.addEventHandler(this.container, 'mouseover', (function(obj) {
return function(eve) {

eve = eve || window.event;
var target = eve.srcElement || eve.target,
selectedIndex = obj._getSelectedIndex(target);

obj._resetImgsSizeAndPos(obj, selectedIndex);
}

})(this));

}

}

new flow_slide_imgs();
// ]]>