web前端頁面點選預覽圖片及大小縮放

_Haobro發表於2020-10-19
Web前端

直接上程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxx</title>
    <style>
        #outerbox{
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9;
        }
        #innerbox{
            position: absolute;
            z-index: 99;
        }
        #innerbox #bigimg {
            cursor: grab;
            border: 5px solid #ffffff;
        }
    </style>
    
    <!-- 引入jquery 這裡是我放jq指令碼的檔案路徑，可自行設定 -->
	<script src="__PUBLIC__/Js/jquery-1.7.1.js?v=1.0.0" type="text/javascript"></script>
</head>
<body>
	<div id="conbox">
		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
	</div>

    <div id="outerbox">
        <div id="innerbox">
            <img id="bigimg" src="" />
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
		var scaling = 1;    //圖片的縮放比例: 1 為正常大小; 0 會消失，所以不能小於等於 
        // 點選圖片放大
        $('.imgitem').each(function(){
            $(this).click(function(){
                var _this = $(this);    //將當前點選的圖片元素作為_this傳入函式
                showBigImg('#outerbox', '#innerbox', '#bigimg', _this)
            })
        })
        function showBigImg(outerbox, innerbox, bigimg, _this) {
            var src = _this.attr('src');    //獲取當前點選圖片元素的src屬性
            $(bigimg).attr('src', src);     //設定#bigimg元素的src屬性值

            /* 獲取當前點選圖片的真實大小，並顯示彈出層及大圖 */
            $(bigimg).attr('src',src).load(function(){
                var windowW = $(window).width();    //獲取當前視窗寬度
                var windowH = $(window).height();   //獲取當前視窗高度
                var realW = this.width;     //獲取圖片真實寬度
                var realH = this.height;    //獲取圖片真實高度
                var imgW, imgH;
                var scale = 0.8;    //當圖片的真實寬高大於視窗的寬高時要進行的縮放尺寸
                if (realH > windowH*scale) {    //判斷圖片高度
                    imgH = windowH*scale;       //如大於視窗高度，圖片高度進行縮放
                    imgW = imgH/realH*realW;    //等比例縮放寬度
                    if (imgW > windowW*scale) { //如寬度仍大於視窗寬度
                        imgW = windowW*scale;   //再對寬度進行縮放
                    }
                } else if (realW > windowW*scale) { //如圖片高度合適，判斷圖片寬度
                    imgW = windowW*scale;       //圖片寬度進行縮放
                    imgH = imgW/realW*realH;    //等比例縮放高度
                } else {    //如圖片真實寬高都符合要求，寬高不變
                    imgW = realW;
                    imgH = realH;
                }
                $(bigimg).css('width',imgW);    //以最終的寬度對圖片進行縮放
                var w = (windowW - imgW) / 2;   //計算圖片與視窗的左右邊距
                var h = (windowH - imgH) / 2;   //計算圖片與視窗的上下邊距
                $(innerbox).css({'top': h, 'left': w});
                $(outerbox).fadeIn('fast');     //淡入顯示
                $('body').css('overflow-y','hidden');   //隱藏頁面滾動條防止滾動縮放圖片時影響頁面滾動條位置

                // IE9, Chrome, Safari, Opera  -- 滑鼠滾動監聽       
                $('#bigimg').on("mousewheel",MouseWheelHandler);         
                // Firefox	-- 滑鼠滾動監聽         
                $('#bigimg').on("DOMMouseScroll",MouseWheelHandler);  
            })

            $(outerbox).click(function(){   //再次點選淡出消失彈窗
                $(this).fadeOut('fast');

                // 解綁 滑鼠滾輪監聽事件        
                $('#bigimg').off("mousewheel");         
                $('#bigimg').off("DOMMouseScroll");
                // 重置
                scaling = 1; 
                $('#bigimg').css('transform','scale(1)');
                $('body').css('overflow-y','auto');
            })
        }
    
        // 滑鼠滾輪放大縮小
        function MouseWheelHandler(event){     
            var type = event.type;   
            if (type == 'DOMMouseScroll' || type == 'mousewheel') {         
                event.delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta / 120 : -(event.detail || 0) / 3;     
            }     
            
            if (event.delta == 1 || event.delta > 0) { //上滾 -- 放大  
                zoomImg('#bigimg','add')    
            } else if (event.delta == -1 || event.delta < 0) { //下滾 -- 縮小    
                zoomImg('#bigimg','cut')         
            } else {         
                console.log("滑鼠滾輪放大縮小狀態獲取失敗") 
            }
        }  
        // 縮放圖片比例
        function zoomImg (img,type) {
            if (type == 'add') {    
                scaling += 0.1;
            } else {
                if (scaling < 0.5) {   //控制圖片縮小到一定大小
                    return
                }
                scaling -= 0.1;
            }
            $(img).css('transform',`scale(${scaling})`);
        }
    })
</script>
</body>
</html>

效果如圖：

在這裡插入圖片描述

相關文章