jquery实现图片预览（纯jquery实现）

jquery实现图片预览（纯jquery实现）

代码如下：

/**
 * 
 * 
 * @param {any} currentIndex 当前图片的索引
 * @param {any} srcList 图片的src路径
 */
function showImg(currentIndex,srcList) {
 
    //遮罩层
    var overlayStyle = 'position: absolute;top: 0%;left: 0%;width: 100%; height: ' + $('body').height() + 'px;background-color: #3B3B3B;z-index: 888;-moz-opacity: 0.8;opacity: .80; '
    var overlay = '<div class="overlay" style="' + overlayStyle + '"></div>'
    //1.先将遮罩层加到body
    $('body').append(overlay)
 
    //图片css
    var imgContainerMaxWidth = 1000 //图片允许的最大宽度（单位：px）
    var imgContainerMaxHeight = 750 //图片允许的最大高度（单位：px）
    var imgStyle = 'max-height:' + imgContainerMaxHeight + 'px;max-width:' + imgContainerMaxWidth
        + 'px;position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;'
        + 'background-color:white;z-index: 889;border-bottom:1px solid #000;border-radius: 5px;'
    var img = '<div class="pre-img" style="' + imgStyle + '">'
        + '<div class="pre-close" style="height:30px;">'
        + '<div style="cursor:pointer;margin-left:30px;width:30px;height:100%;border-radius: 50%;background-color:#E6E6FA;"><a href="" style="opacity: 0.3;"  class="close"></a></div></div>'
        + '<img class="detail-img" src="' + srcList[currentIndex] + '" style="height:' + 'auto' + ';width:' + 'auto' + '" />'
        + '</div>'
    //2.再将整个图片容器加到body
    $('body').append(img)
 
    //关闭按钮css（由于伪元素不可用js设置，所以在head创建一个style用,关闭窗口时移除）
    var closeStyle =
        ' .close{opacity: 0.6;}'
        + ' .close:hover{opacity: 1;}'
        + ' .close:before, .close:after {float: right;position: relative;right: 15px;top: 5px;content: "  ";height: 20px;width: 1px;background-color: #333;}'
        + '.close:before{transform: rotate(45deg);}'
        + '.close:after{ transform: rotate(-45deg); }'
    //3.将关闭按钮的样式加到body
    $('head').append($('<style id="closeSytle">').text(closeStyle))
 
    //左边（前一张）按钮
    var preLeft = '<div class="pre-left" style="cursor:pointer;z-index: 889;border-radius: 50%; background-color: #E6E6FA; top: 50%; position: absolute; width: 50px; height: 50px ">'
    '</div>'
    //4.将左边按钮加到body
    $('body').append(preLeft)
    $($('.pre-left')[0]).append('<a style="transform: translate3d(0, -50%, 0) rotate(-135deg);position: absolute;top:52%;left:35%;width: 1.5rem;height: 1.5rem;border-top: 0.4rem solid black;border-right: 0.4rem solid black;box-shadow: 0 0 0 lightgray;transition: all 200ms ease;z-index: 889;"></a>')
 
    //右边(下一张)按钮
    var preRight = '<div class="pre-right" style="right:0;cursor:pointer;z-index: 889;border-radius: 50%; background-color: #E6E6FA; top: 50%; position: absolute; width: 50px; height: 50px ">'
    '</div>'
    //5.将右边按钮加到body
    $('body').append(preRight)
    $($('.pre-right')[0]).append('<a style="transform: translate3d(0, -50%, 0) rotate(45deg);position: absolute;top:52%;right:35%;width: 1.5rem;height: 1.5rem;border-top: 0.4rem solid black;border-right: 0.4rem solid black;box-shadow: 0 0 0 lightgray;transition: all 200ms ease;z-index: 889;"></a>')
 
    //图片加载完成后才获取宽和高，不然同步执行可能获取不到，同时此后每当图片变化，需要重新加载就会
    //执行到这里
    $($('.pre-img')[0]).find('img')[0].addEventListener("load", function () {
        //图片原始宽高
        var imgHeight = this.naturalHeight
        var imgWidth = this.naturalWidth
 
        //图片经过计算后的宽高
        var newHeight
        var newWidth
 
        if (imgHeight < imgContainerMaxHeight && imgWidth < imgContainerMaxWidth) { //宽和高都没超过最大值
            newHeight = imgHeight
            newWidth = imgWidth
        } else if (imgHeight < imgContainerMaxHeight && imgWidth > imgContainerMaxWidth) {  //宽 超过最大值
            var rWidth = imgWidth / imgContainerMaxWidth
            newHeight = imgHeight / rWidth
            newWidth = imgContainerMaxWidth
        } else if (imgHeight > imgContainerMaxHeight && imgWidth < imgContainerMaxWidth) {  //高 超过最大值
            var rHeight = imgHeight / imgContainerMaxHeight
            newHeight = imgContainerMaxHeight
            newWidth = imgWidth / rHeight
        } else if (imgHeight > imgContainerMaxHeight && imgWidth > imgContainerMaxWidth) { //宽和高都超过最大值
            var rHeight = imgHeight / imgContainerMaxHeight
            var rWidth = imgWidth / imgContainerMaxWidth
            //rHeight 表示原图高度需要缩小 rHeight 倍才能到达允许的最大高度
            //rWidth  表示原图宽度需要缩小 rWidth  倍才能到达允许的最大宽度
            //由于这时 宽和高是要同时缩小的，所以假设宽和高要同时缩小n倍才能使缩小后宽和高都不超过  
            //最大值，那么 n必然取 rHeight 和 rWidth 之中的最大值
            if (rWidth > rHeight) {
                newWidth = imgContainerMaxWidth
                newHeight = imgHeight / rWidth
            } else {
                newHeight = imgContainerMaxHeight
                newWidth = imgWidth / rHeight
            }
        }
 
        //图片设置经过计算后的宽和高
        $($($('.pre-img')[0]).find('img')[0]).css({ 'height': newHeight, 'width': newWidth })
 
        //整个容器（div class="pre-img"）的高度是=关闭按钮的高度+图片的高度，
        //所以图片高度变化时，容器的高度也要变化
        $($('.pre-img')[0]).css({ 'height': newHeight + $($($('.pre-img')[0]).find('pre-close')[0]).height(), 'width': newWidth })
        
        //关闭按钮的位置
        $($('.pre-close')[0]).find('div').css({ 'margin-left': (newWidth - $($('.pre-close')[0]).find('div').width()) + 'px' })
    })
 
    //关闭按钮css
    $($('.pre-close')[0]).find('div').hover(function () {
        $($($('.pre-close')[0]).find('a')[0]).css('opacity', 1)
    })
    $($('.pre-close')[0]).find('div').mouseleave(function () {
        $($($('.pre-close')[0]).find('a')[0]).css('opacity', 0.6)
    })
 
    //关闭按钮点击 => 关闭
    $($('.pre-close')[0]).find('div').click(function () {
        close()
    })
 
    //遮罩层点击 => 关闭
    $('.overlay').click(function () {
        close()
    })
 
    //下一页点击
    $($('.pre-right')[0]).click(function () {
        next()
    })
 
    //上一页点击
    $($('.pre-left')[0]).click(function () {
        pre()
    })
 
    /**
     * 关闭
     * */
    function close() {
        $('.overlay').remove()
        $('.pre-img').remove()
        $('#closeSytle').remove()
        $($('.pre-left')[0]).remove()
        $($('.pre-right')[0]).remove()
    }
 
    /**
     * 前一张
     * */
    function pre() {
        if (currentIndex > 0) {
            currentIndex--
        }
        $($('.detail-img')[0]).attr('src', srcList[currentIndex])
    }
 
    /**
     * 下一张
     * */
    function next() {
        if (currentIndex < srcList.length - 1) {
            currentIndex++
        }
        $($('.detail-img')[0]).attr('src', srcList[currentIndex])
    }
}复制

调用示例：

$(function () {
        showImg(1,['all.jpg','not.jpg','up-height.jpg'])
})复制