I saw the javascript written by BlueDream on his blog to imitate the effect of the QQ sliding menu. The code is really elegant, and the difference is highlighted by comparison. I will steal the essence of his code next time, hehe.
[Brief description of the principle]
html and css are the same as those used in JQuery to achieve the image carousel effect, so they are omitted. It is mainly a few public functions, gradually appearing and disappearing, implemented with closures. As for the main logic part, it is very general.
[Program source code]
Just post a few public functions, fadeIn, fadeout, fadeOut, fade
function id(name) {return document.getElementById(name);}
//Traversal function
function each(arr , callback) {
if (arr.forEach) {arr.forEach(callback);}
else {
for (var i = 0, len = arr.length; i < len; i ) callback.call(this, arr[i], i, arr);}
}
function fadeIn(elem) {
setOpacity(elem, 0)
for ( var i = 0; i < 20; i ) {
(function() {
var pos = i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
function fadeOut(elem) {
for ( var i = 0; i <= 20; i ) {
(function() {
var pos = 100 - i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
} )(i);
}
}
// Set transparency
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" level ")";
} else {
elem.style.opacity = level / 100;
}
}
[Calling method]
//count: number of pictures, wrapId: DIV that wraps the picture, ulId: button DIV, infoId: information bar
babyzone.scroll(count,wrapId,ulId,infoId);
babyzone.scroll(4,"banner_list","list","banner_info");
【Source code download】
/201009/yuanma/scroll_babyzone.rar