看到bluedream在他博客上写的javascript仿qq滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿。
【原理简述】
html和css跟jquery实现图片轮播效果里面的一样,略去。主要是几个公共函数,渐显和渐失,用闭包实现。至于主体逻辑部分,非常一般。
【程序源码】
贴几个公共函数算了,fadein,渐显,fadeout,渐失
复制代码 代码如下:
function id(name) {return document.getelementbyid(name);}
//遍历函数
function each(arr, callback) {
if (arr.foreach) {arr.foreach(callback);}
else {
for (var i = 0, len = arr.length; i }
function fadein(elem) {
setopacity(elem, 0)
for ( var i = 0; i (function() {
var pos = i * 5;
settimeout(function() {
setopacity(elem, pos)
}, i * 25);
})(i);
}
}
function fadeout(elem) {
for ( var i = 0; i (function() {
var pos = 100 - i * 5;
settimeout(function() {
setopacity(elem, pos)
}, i * 25);
})(i);
}
}
// 设置透明度
function setopacity(elem, level) {
if (elem.filters) {
elem.style.filter = alpha(opacity= + level + );
} else {
elem.style.opacity = level / 100;
}
}
【调用方法】
//count:图片数量,wrapid:包裹图片的div,ulid:按钮div,infoid:信息栏
babyzone.scroll(count,wrapid,ulid,infoid);
babyzone.scroll(4,banner_list,list,banner_info);
【源码下载】
/201009/yuanma/scroll_babyzone.rar