zoukankan      html  css  js  c++  java
  • 记录js的一个图片预览功能代码

    1.图片预览层的样式:

    /* 图片预览 弹出层样式 */
    html,body,div,img,button{margin:0;padding:0;box-sizing:border-box;}
    img{border:0;}
    #imgModule{display:none;}
    .imgItem{220px;height:220px;cursor: pointer;}
    .mask{background:#000;opacity:1;filter:alpha(opacity=80);position:absolute;left:0;top:0;100%;height:100%;}
    .lightBoxContent{350px;height:350px;position:absolute;left:50%;top:50%;background:#fff;margin:-170px 0 0 -180px;}
    #imgLoader{32px;height:32px;position:absolute;left:50%;top:50%;margin:-16px 0 0 -16px;display:none;}
    #imgLight{350px;height:350px;-webkit-animation:change 1s;animation:change 1s;}
    #imgModule .btn{40px;height:50px;position:absolute;top:50%;margin-top:-25px;cursor:pointer;}
    .lightBoxSprite{background-image:url(../images/imgIcons.png);background-repeat:no-repeat;}
    #lightBoxPrev{left:10px;background-position:2px center;}
    #lightBoxNext{right:10px;background-position:-42px center;}
    .closeBtn{35px;height:35px;background-position:-100px center;position:absolute;top:15px;right:15px;cursor:pointer;}
    .lightBoxPagination{position:absolute;left:0;bottom:50px;100%;text-align:center;}
    .lightBoxPagination span{display:inline-block;10px;height:10px;border:1px solid #fff;-webkit-border-radius:50%;border-radius:50%;margin-right:8px;}
    .lightBoxPagination span.current{background:#fff;}
    @keyframes change{
    0%{opacity:0;}
    100%{opacity:1;}
    }

    2.图片预览层的js文件

    var LightBox = function(options){
    this.imgListParent = document.getElementById(options.imgListParent); //图片列表的父元素
    this.imgItemClass = options.imgItemClass; //图片的className
    this.idx = 0; //图片的索引,初始值为0
    this.isShowPage = options.isShowPage || false; //是否显示分页,默认不显示
    this.init();
    };
    //初始化
    LightBox.prototype.init = function(){
    this.renderDOM();
    this.imgListClick();
    this.nextBtnClick();
    this.prevBtnClick();
    this.closeBtnClick();
    this.keyDownEvent();
    };
    //渲染弹窗
    LightBox.prototype.renderDOM = function(){
    var imgModule = document.createElement("div");
    imgModule.id = "imgModule";
    var oHtml = "";
    oHtml += '<div class="mask"></div>';
    oHtml += '<div class="lightBox">';
    oHtml += '<div class="lightBoxContent">';
    oHtml += '<img src="avicit/mms/offlinedataqrcode/images/loading.gif" alt="" id="imgLoader">';
    oHtml += '<img alt="" id="imgLight">';
    oHtml += '</div>';
    oHtml += '<span class="btn lightBoxSprite" id="lightBoxPrev"></span>';
    oHtml += '<span class="btn lightBoxSprite" id="lightBoxNext"></span>';
    oHtml += '<span class="closeBtn lightBoxSprite" id="closeBtn"></span>';
    oHtml += '<div class="lightBoxPagination" id="lightBoxPagination"></div>';
    oHtml += '</div>';

    imgModule.innerHTML = oHtml;
    document.body.appendChild(imgModule);
    };
    //分页
    LightBox.prototype.pagination = function(idx){
    var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
    var pagination = document.getElementById("lightBoxPagination");
    var page = "";
    for(var i = 0; i < imgList.length; i++){
    if(idx == i){
    page += '<span class="current"></span>';
    }else{
    page += '<span></span>';
    }
    }
    if(this.isShowPage){
    pagination.innerHTML = page;
    }
    };
    //点击图片弹出弹窗
    LightBox.prototype.imgListClick = function(){
    var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
    var imgModule = document.getElementById("imgModule");
    var self = this;
    for(var i = 0; i < imgList.length; i++){
    imgList[i].index = i;
    imgList[i].onclick = function(){
    imgModule.style.display = "block";
    var src = this.getAttribute("src");
    self.idx = this.index;
    self.imgLoad(src);
    self.pagination(self.idx);


    }
    }
    //self.keyDownEvent();
    };
    //上一张
    LightBox.prototype.prevBtnClick = function(){
    var prevBtn = document.getElementById("lightBoxPrev");
    var self = this;
    prevBtn.onclick = function(){
    var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
    self.idx--;
    if(self.idx < 0){
    self.idx = imgList.length - 1;
    }
    var src = imgList[self.idx].getAttribute("src");
    self.imgLoad(src);
    self.pagination(self.idx);
    }
    };
    //下一张
    LightBox.prototype.nextBtnClick = function(){
    var nextBtn = document.getElementById("lightBoxNext");
    var self = this;
    nextBtn.onclick = function(){
    var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
    self.idx++;
    if(self.idx >= imgList.length){
    self.idx = 0;
    }
    var src = imgList[self.idx].getAttribute("src");
    self.imgLoad(src);
    self.pagination(self.idx);
    }
    };
    //图片预加载
    LightBox.prototype.imgLoad = function(src, callback){
    var imgLight = document.getElementById("imgLight");
    var loader = document.getElementById("imgLoader");
    loader.style.display = "block";
    var img = new Image();
    img.onload = function(){
    loader.style.display = "none";
    imgLight.src = src;
    };
    img.src = src;
    };
    //关闭弹窗
    LightBox.prototype.closeBtnClick = function(){
    var closeBtn = document.getElementById("closeBtn");
    var imgModule = document.getElementById("imgModule");
    closeBtn.onclick = function(){
    imgModule.style.display = "none";
    }
    };
    //封装获取元素函数
    LightBox.prototype.getByClass = function(oParent, oClass){
    var oEle = oParent.getElementsByTagName("*");
    var oResult = [];
    for(var i = 0; i < oEle.length; i++){
    if(oEle[i].className == oClass){
    oResult.push(oEle[i]);
    }
    }
    return oResult;
    };

    //封装获取元素函数
    LightBox.prototype.keyDownEvent = function(){
    var self = this;
    $(document).keydown(function(event){
    if($('#imgModule').is(':visible')){
    var e = event || window.event;
    var k = e.keyCode || e.which;
    switch(k) {
    case 37:
    var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
    self.idx--;
    if(self.idx < 0){
    self.idx = imgList.length - 1;
    }
    var src = imgList[self.idx].getAttribute("src");
    self.imgLoad(src);
    self.pagination(self.idx);
    break;
    case 39:
    var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
    self.idx++;
    if(self.idx >= imgList.length){
    self.idx = 0;
    }
    var src = imgList[self.idx].getAttribute("src");
    self.imgLoad(src);
    self.pagination(self.idx);
    break;
    }
    }
    return false;
    });
    };
    window.LightBox = LightBox;

    3.在使用页面引用上面的js和样式:

    在页面上初始化该组件

    $(function () {

    //创建图片预览对象
    lightBox = new LightBox({
    imgListParent: "imgDefault",//图片预览层所放置的div层的ID
    imgItemClass: "imgItem", //图片img标签上的样式标识
    isShowPage: true
    });

    });

    4.页面元素使用:

    <div id="imgDefault" style="overflow: auto;height: 99%;">

    <img class="imgItem" style="padding:10px" src="/image/test-1.jpg"/>

    <img class="imgItem" style="padding:10px" src="/image/test-2.jpg"/>

    <img class="imgItem" style="padding:10px" src="/image/test-3.jpg"/>

    </div>

    5.这样在页面上点击上面的某个图片的时候,会弹出图片预览层,进行图片的预览

  • 相关阅读:
    《大话数据结构》第1章 数据结构绪论 1.2 你数据结构怎么学的?
    伍迷七八月新浪微博集锦
    《大话数据结构》第9章 排序 9.7 堆排序(下)
    《大话数据结构》第3章 线性表 3.8.2 单链表的删除
    《大话数据结构》第9章 排序 9.5 直接插入排序
    《大话数据结构》第9章 排序 9.8 归并排序(上)
    《大话数据结构》第2章 算法基础 2.9 算法的时间复杂度
    《大话数据结构》第1章 数据结构绪论 1.1 开场白
    《大话数据结构》第9章 排序 9.1 开场白
    [AWS] Assign a public IP address to an EC2 instance after launched
  • 原文地址:https://www.cnblogs.com/web424/p/12491016.html
Copyright © 2011-2022 走看看