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

时间：2022-06-25 21:57:22 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<html>
<meta charset="utf-8"/>
<head>
    <script type="text/javascript" charset="utf-8">
        (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;
                    }
                }
            };
        })();

</script>
    <style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>" media="screen">
        h1 {
            color: #333;
            font-family: "微软雅黑";
            border-bottom: solid 3px #ddd;
        }
        div#bg {
            display: none;

position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #000000;
            filter:alpha(opacity=80);
            -moz-opacity:0.8;
            -khtml-opacity: 0.8;
            opacity: 0.8;
        }

div#box {
            display: none;
            position: fixed;
            top: 10%;
            width: 50%;
            border: 2px solid #eeeeee;
            padding: 10px;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }

img {
            max-width: 100%;
        }
        div#img-list img {
            padding: 4px;
            border: solid 1px #dddddd;
            box-shadow: 1px 1px 2px #ddd;
            -moz-box-shadow: 1px 1px 2px #ddd;
        }
        .btn {
            border: none;
            background-color: #2a6496;
            color: #ffffff;
            float: right;
            margin-bottom: 5px;

}
        .btn-left {
            float: left;
        }
        div#box-inner {
            position: relative;
            width: 100%;
        }
        p#text {
            
            letter-spacing: 2px;
            line-
            padding-left: 10px;

}
    </style>
</head>
<body>
<h1>overlay demo</h1>
<div id="img-list">
    <a href="https://img.111cn.net/uploads/20220926/img_63317252b5b2a30.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111cn.net/uploads/20220926/img_63317252b5b2a30.jpg"  alt="点我" onclick="AUI.overlay.fadeIn(this,20,'第一张图,真尼玛看着漂亮啊')"/></a>
    <a href="https://img.111cn.net/uploads/20220926/img_633172530daa931.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111cn.net/uploads/20220926/img_633172530daa931.jpg"  alt="点我" alt='原生js的点击图片弹出预览效果(支持上一张下一张)'  onclick="AUI.overlay.fadeIn(this,20,'第二张图,真尼玛看着漂亮啊')" /></a>
    <a href="https://img.111cn.net/uploads/20220926/img_633172533cf7c32.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111cn.net/uploads/20220926/img_633172533cf7c32.jpg"  alt="点我"  onclick="AUI.overlay.fadeIn(this,20,'第三张图,真尼玛看着漂亮啊')" alt='原生js的点击图片弹出预览效果(支持上一张下一张)' /></a>
    <a href="https://img.111cn.net/uploads/20220926/img_633172541d5d833.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111cn.net/uploads/20220926/img_633172541d5d833.jpg"   alt="点我"  onclick="AUI.overlay.fadeIn(this,20,'第四张图,真尼玛看着漂亮啊')" alt='原生js的点击图片弹出预览效果(支持上一张下一张)' /></a>
    <a href="https://img.111cn.net/uploads/20220926/img_63317254405f134.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111cn.net/uploads/20220926/img_63317254405f134.jpg"   alt="点我"  onclick="AUI.overlay.fadeIn(this,20,'第五张图,真尼玛看着漂亮啊')" alt='原生js的点击图片弹出预览效果(支持上一张下一张)' /></a>

</div>

</div>

</div>
<div id="bg">

</div>
<p>后期支持：
1、ajax调用
2、支持更多动画
3、支持拖动
4、支持上传
5、看媳妇意愿，增加其它</p>
</body>

</html>
</td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程