点击图片弹出视频html,原生js的点击图片弹出预览效果(支持上一张下一张)

原生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、看媳妇意愿，增加其它