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>
效果如圖:
相關文章
- 淺談Flutter web 圖片選擇器及圖片壓縮FlutterWeb
- 網頁中的圖片預覽思路(純前端)網頁前端
- 禁止web頁面縮放解決方案Web
- 針對IOS頁面縮放,需要點選兩次才能選中iOS
- 前端圖片壓縮及上傳前端
- 縮放圖片至固定大小,尺寸不足以0填充
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- 前端奇淫技術:圖片壓縮、方向糾正、預覽、上傳外掛前端
- 微信瀏覽器字型縮放導致頁面變形瀏覽器
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- 前端圖片壓縮方案前端
- 前端實現點選下載圖片前端
- 圖片響應式縮放,已中心為原點裁剪
- js如何監聽頁面縮放?JS
- android imageview 縮放檢視圖片AndroidView
- 前端圖片壓縮 - H5&Uni-App圖片壓縮前端H5APP
- js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...JS
- 視訊直播app原始碼,點選圖片放大再點選縮小APP原始碼
- 【前端】壓縮圖片以及圖片相關概念前端
- BMP格式圖片縮放及在LCD螢幕展示練習
- WKWebView 獲取網頁高度,圖片點選檢視,網頁連結點選WebView網頁
- opencv 圖片幾何變換-縮放OpenCV
- 圖片預覽元件PhotoView元件View
- Android開發筆記——點選檢視大圖過渡動畫與圖片縮放與移動Android筆記動畫
- 開源圖片工具箱(Img Toolbox) 格式轉換 新增水印 圖片壓縮 圖片裁剪 圖片旋轉 圖片縮放
- win10工作列預覽視窗大小如何調整_win10工作列縮圖預覽視窗大小的調整方法Win10
- 23.Quick QML-簡單且好看的圖片瀏覽器-支援多個圖片瀏覽、縮放、旋轉、滑輪切換圖片UI瀏覽器
- 處理短屏下縮放,以及初始化時固定頁面大小,防止豎屏下彈出鍵盤或橫屏時頁面發生縮放的情況
- 前端的圖片壓縮image-compressor(可在圖片上傳前實現圖片壓縮)前端
- JS中通過指定大小來壓縮圖片JS
- 頁面圖片預載入與懶載入策略
- 谷歌瀏覽器頁面放大縮小谷歌瀏覽器
- 滑鼠懸浮圖片實現縮放效果
- JavaScript圖片簡單等比例縮放JavaScript
- css中圖片按照長寬比縮放CSS
- QLabel顯示圖片 ,並實現縮放
- 圖片等比例縮放裁切詳解
- 點選圖片大圖預覽,RecyclerView + PhotoView 滑動衝突,RecyclerView不回撥SCROLL_STATE_IDLEView