原生js的点击图片弹出预览效果(支持上一张下一张)
(function(){
AUI = {} ; //随便起个名字,
AUI.Utils = {};
AUI.Utils.Array = window.Array;
if (!AUI.Utils.Array.prototype.indexOf) {
AUI.Utils.Array.prototype.indexOf = function (searchElement, fromIndex) {
if ( this === undefined || this === null ) {
throw new TypeError( '"this" is null or not defined' );
}
var length = this.length >>> 0; // Hack to convert object.length to a UInt32
fromIndex = +fromIndex || 0;
if (Math.abs(fromIndex) === Infinity) {
fromIndex = 0;
}
if (fromIndex < 0) {
fromIndex += length;
if (fromIndex < 0) {
fromIndex = 0;
}
}
for (;fromIndex < length; fromIndex++) {
if (this[fromIndex] === searchElement) {
return fromIndex;
}
}
return -1;
};
}
AUI.overlay = {};
AUI.overlay.doCenter = function(target){
//让target 位于网页的中央居中的位置
var targetWidth = target.offsetWidth, //目标的可见宽度
targetHeight = target.offsetHeight, //目标的可见高度
realLeft = window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft,
realTop = window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop,
clientWidth = document.documentElement.clientWidth|| document.body.clientWidth,
clientHeight = document.documentElement.clientHeight || document.body.clientHeight,
boxTop = realTop + Math.round((clientHeight - targetHeight)/2),
boxLeft = realLeft + Math.round((clientWidth - targetWidth)/2);
target.style.position = 'absolute';
target.style.top = boxTop + 'px';
target.style.left = boxLeft + 'px';
};
AUI.overlay.fadeIn = function(target,speed,txt){
var speed = speed || 20;
var box = document.getElementById("box"),
bg = document.getElementById("bg"),//有点透明的黑色背景
show = document.getElementById('show'),
text = document.getElementById("text");
bg.style.display = "block";
box.style.display = "block";
box.style.opacity = 0 ;
show.src = target.src;
text.innerHTML = txt;
AUI.overlay.doCenter(box);
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
box.style.opacity = val ;
val += 0.1;
if (val <= 100) {
setTimeout(arguments.callee, speed);
}
})();
};
AUI.overlay.fadeOut = function(speed){
var speed = speed || 20,
box = document.getElementById("box"),
bg = document.getElementById("bg"),
val = 100;
//循环将透明值以4递减,即淡出效果
(function(){
box.style.opacity = val ;
val = val - 4;
if (val > 0) {
setTimeout(arguments.callee, speed);
}
if(val <= 0){
box.style.display = "none";
bg.style.display = "none";
}
})();
};
AUI.overlay.next = function(){
var imgList = document.getElementById("img-list"),
imgs = imgList.getElementsByTagName('img'),
show = document.getElementById("show"),
text = document.getElementById("text"),
srcs = [];
Array.indexOf = AUI.Utils.Array.indexOf;
for(var i = 0 ; i < imgs.length; i++){
srcs.push(imgs[i].src);
if(srcs.indexOf(show.src) === -1 ){
continue;
}else if(srcs.indexOf(show.src) < imgs.length - 1 ){
show.src = imgs[i+1].src;
text.innerHTML = "第" + (i+2) + "张图,真尼玛看着漂亮啊";
break;
}else{
alert("最后一张了");
return false;
}
}
};
AUI.overlay.pre = function(){
var imgList = document.getElementById("img-list");
var imgs = imgList.getElementsByTagName('img');
var show = document.getElementById("show");
var text = document.getElementById("text");
var srcs = [];
for(var i = 0 ; i < imgs.length; i++){
srcs.push(imgs[i].src);
if(srcs.indexOf(show.src) === -1 ){
continue;
}else if(srcs.indexOf(show.src) >0 && i !== 0 ){
show.src = imgs[i-1].src;
text.innerHTML = "第" + (i) + "张图,真尼玛看着漂亮啊";
break;
}else{
alert("第一张了");
return false;
}
}
};
})();
overlay demo
×
下一张
上一张
后期支持:
1、ajax调用
2、支持更多动画
3、支持拖动
4、支持上传
5、看媳妇意愿,增加其它