主页 个人前端笔记 自定义Javascript图片垂直滚动库
admin
发表于2012-11-11 18:44:49    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息

更新版本,当图片数大于5张时
< script >
var movepic = {
wrapID: "md",
imgHeight: 67,
num: 0,
topmove: function() {
if (movepic.num == 1) {
return
}
movepic.num = 1;
var list = document.getElementById(movepic.wrapID).getElementsByTagName("img");
var ele = list[0].cloneNode(true);
if (list.length > 5) {
list[5].style.opacity = ′0′;
list[5].style.filter = "alpha(opacity=0)";
list[5].style.MozOpacity = ′0′
}
for (var i = 1; i < movepic.imgHeight + 1; i++) { (function() {
var t = i;
setTimeout(function() {
list[0].style.marginTop = -t + "px";
if (t == movepic.imgHeight) {
document.getElementById(movepic.wrapID).removeChild(list[0]);
var _list = document.getElementById(movepic.wrapID).getElementsByTagName("img");
_list[0].style.marginTop = 1 + "px";
if (_list.length > 5) {
document.getElementById(movepic.wrapID).appendChild(ele);
ele = _list[4]
} else {
ele.style.opacity = ′0′;
ele.style.filter = "alpha(opacity=0)";
ele.style.MozOpacity = ′0′;
document.getElementById(movepic.wrapID).appendChild(ele)
}
for (var _i = 0; _i <= 100; _i++) { (function() {
var _ii = _i;
setTimeout(function() {
if (_ii == 100) {
movepic.num = 0
}
ele.style.opacity = _ii / 100;
ele.style.filter = "alpha(opacity=" + _ii + ")";
ele.style.MozOpacity = _ii / 100
},
(_i + 1) * 20)
})()
}
}
},
(i + 1) * 10)
})()
}
},
bottommove: function() {
if (movepic.num == 1) {
return
}
movepic.num = 1;
var list = document.getElementById(movepic.wrapID).getElementsByTagName("img");
var ele = list[list.length - 1].cloneNode(true);
for (var i = 1; i < movepic.imgHeight + 1; i++) { (function() {
var t = i;
setTimeout(function() {
list[0].style.marginTop = t + "px";
if (t == movepic.imgHeight) {
document.getElementById(movepic.wrapID).removeChild(list[list.length - 1]);
var _list = document.getElementById(movepic.wrapID).getElementsByTagName("img");
_list[0].style.marginTop = 1 + "px";
ele.style.opacity = ′0′;
ele.style.filter = "alpha(opacity=0)";
ele.style.MozOpacity = ′0′;
document.getElementById(movepic.wrapID).insertBefore(ele, _list[0]);
for (var _i = 0; _i <= 100; _i++) { (function() {
var _ii = _i;
setTimeout(function() {
if (_ii == 100) {
movepic.num = 0
}
ele.style.opacity = _ii / 100;
ele.style.filter = "alpha(opacity=" + _ii + ")";
ele.style.MozOpacity = _ii / 100
},
(_i + 1) * 20)
})()
}
}
},
(i + 1) * 10)
})()
}
}
}
document.getElementById("tp").onclick = movepic.topmove;
document.getElementById("bp").onclick = movepic.bottommove;
< /script>

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理