找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js的图片预览功能

2018-12-27 分类：JavaScript 阅读(730) 评论(0)
游戏前端开发主程
游戏开发前端后端
游戏前端开发 策划

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>图片预览功能</title>
        <meta name=”description” content=”” />
        <meta name=”keywords” content=”” />
        <!– <link href=”css/index.css” rel=”stylesheet”> –>
        <style>
            @charset “UTF-8”;
            /**
*
* @authors Your Name (you@example.org)
* @date 2016-02-26 09:21:56
* @version $Id$
*/
            body {
                padding: 0;
                margin: 0;
                font-size: ‘微软雅黑’, Arial;
            }
            .wrap {
                position: relative;
            }
            .pic {
                height: 300px;
                width: 250px;
                overflow: hidden;
                float: left;
                padding: 10px;
                box-sizing: border-box;
                border-radius: 5px;
                border: 1px solid #ccc;
                margin: 5px;
            }
            .pic img {
                height: 100%;
                width: 100%;
            }
            .fixbox {
                height: 100%;
                width: 100%;
                background: rgba(0, 0, 0, 0.5);
                position: fixed;
                z-index: 999999;
                left: 0;
                top: 0;
            }
            .box-cent {
                position: absolute;
                transform: translate3d(-50%, -50%, 0);
                -moz-transform: translate3d(-50%, -50%, 0);
                -ms-transform: translate3d(-50%, -50%, 0);
                -webkit-transform: translate3d(-50%, -50%, 0);
                left: 50%;
                top: 50%;
                border: 10px solid rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                background: white;
            }
            .box-img {
                max-width: 800px;
                max-height: 450px;
            }
            .pic-num {
                display: block;
                height: 20px;
                width: 100%;
                line-height: 20px;
                text-align: right;
                color: black;
                font-size: 20px;
            }
            .img-next,
            .img-prev,
            .close {
                height: 50px;
                width: 50px;
                display: block;
                position: absolute;
            }
            .img-next {
                right: 50px;
                top: 50%;
                background: url(http://www.zxhuan.com/wp-content/uploads/2016/02/arrows.png)
                    no-repeat 0 0;
            }
            .img-prev {
                left: 50px;
                top: 50%;
                background: url(http://www.zxhuan.com/wp-content/uploads/2016/02/arrows.png)
                    no-repeat 0 -68px;
            }
            .close {
                right: 50px;
                top: 50px;
                background: url(http://www.zxhuan.com/wp-content/uploads/2016/02/arrows.png)
                    no-repeat 0 -127px;
            }
        </style>
    </head>
    <body>
        <div class=”wrap” id=”wrap”>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/41.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/40.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/39.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/38.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/37.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/36.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/35.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/34.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/33.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/32.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/31.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/30.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/29.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/28.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/27.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/26.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/24.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/23.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/22.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/21.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/20.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/19.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/18.jpg”
                />
            </div>
            <div class=”pic”>
                <img
                    src=”http://www.zxhuan.com/wp-content/uploads/2016/02/17.jpg”
                />
            </div>
        </div>
        <!– <script type=”text/javascript” src=’js/index.js’></script> –>
        <!– <script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.10.2/jquery.min.js”></script> –>
        <script type=”text/javascript”>
            /**
             *
             * @authors Your Name (you@example.org)
             * @date 2016-02-26 09:22:20
             * @version $Id$
             */
            //
             window.onload = function () {
                        waterFall(‘wrap’, ‘pic’)
                            function waterFall(oParent, child) {
                                var oParent = document.getElementById(oParent),
                                oPic = getClass(oParent, child),
                                winW = document.body.clientWidth || document.documentElement.clientWidth,
                                oPicW = oPic[1].offsetWidth + 10,
                                num = Math.floor(winW / oPicW);
                                oParent.style.cssText = “width:” + oPicW * num + ‘px;margin:0 auto’;
                                for (var i = 0; i < oPic.length; i++) {
                                    oPic[i].index = i;
                                    oPic[i].onclick = function () {
                                        var thisNum = this.index;
                                        showPic(thisNum)
             }
             }
                                function showPic(thisNum) {
                                    var getImg = oPic[thisNum].getElementsByTagName(‘img’)[0],
                                    getSrc = getImg.getAttribute(‘src’),
                                    fixBox = document.createElement(‘div’),
                                    boxCent = document.createElement(‘div’),
                                    boxImg = document.createElement(‘img’),
                                    PicNum = document.createElement(‘span’),
                                    next = document.createElement(‘span’),
                                    close = document.createElement(‘span’),
                                    prev = document.createElement(‘span’);
                                    next.className = ‘img-next’;
                                    PicNum.className = ‘pic-num’;
                                    prev.className = ‘img-prev’;
                                    close.className = ‘close’;
                                    boxCent.className = ‘box-cent’;
                                    boxImg.className = ‘box-img’;
                                    boxImg.src = getSrc;
                                    fixBox.className = ‘fixbox’;
                                    fixBox.appendChild(boxCent);
                                    boxCent.appendChild(boxImg);
                                    boxCent.appendChild(PicNum);
                                    fixBox.appendChild(next);
                                    fixBox.appendChild(close);
                                    fixBox.appendChild(prev);
                                    document.body.appendChild(fixBox);
                                    PicNum.innerHTML = thisNum + 1 + ‘/’ + oPic.length;
                                    next.onclick = function () {
                                        runs(1);
                                    }
                                        prev.onclick=function() {
                                            runs(2);
                                        }
                                    close.onclick = function () {
                                        fixBox.style.display = ‘none’;
                                    }
                                        function runs(num) {
                                            if (num == 1) {
                                                if (thisNum == oPic.length – 1) {
                                                    thisNum = -1;
                                                }
                                                var getImg = oPic[thisNum + 1].getElementsByTagName(‘img’)[0],
                                                getSrc = getImg.getAttribute(‘src’);
                                                boxImg.src = getSrc;
                                                thisNum++;
                                                PicNum.innerHTML = thisNum + 1 + ‘/’ + oPic.length;
                                            } else {
                                                if (thisNum == 0) {
                                                    thisNum = oPic.length
             }
                                                console.log(thisNum);
                                                var getImg = oPic[thisNum – 1].getElementsByTagName(‘img’)[0],
                                                getSrc = getImg.getAttribute(‘src’);
                                                boxImg.src = getSrc;
                                                thisNum–;
                                                PicNum.innerHTML = thisNum + 1 + ‘/’ + oPic.length;
                                            }
                                        }
             }
                            }
                            function getClass(oparent, child) {
                                var obj = oparent.getElementsByTagName(‘*’);
                                var arr = [];
                                for (var i = 0; i < obj.length; i++) {
                                    if (obj[i].className == child) {
                                        arr.push(obj[i]);
                                    }
                                }
                                return arr;
                            }
             }</p >
        </script>
    </body>
</html>
杭州 游戏前端开发
web前端游戏开发
前端游戏开发技能要求
赞(0)
前端开发者 » 前端开发js的图片预览功能
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论