国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js實現圖片查看器

3403771864 / 745人閱讀

　　1. 前言

　　以對圖片進行一些處理，例如：刪除、下載、標記等。

　　2. 設計思路

　　項目中用的是vue+iview，于是使用Modal彈窗組件做為播放器的盒子，考慮需要用到的基本功能有：放大縮小、監聽鼠標滾輪放大縮小、拖拽、全屏查看、查看上/下一張、雙擊圖片回到初始大小和初始位置。

　　3. 完成效果

　　4. 代碼思路

　　html部分：

　　<Modal
　　id="picture_viewer_modal"
　　v-model="visible"
　　:mask-closable = "false"
　　@on-cancel="cancel()"
　　footer-hide
　　width="70%"
　　:fullscreen="fullscreen"
　　>
　　<div class="wrap">
　　<p class="num_tip">第 {{index+1}}/{{picArr.length}} 張</p>
　　<!-- 查看圖片的盒子 -->
　　<div id="father" class="box">
　　<img id="box" class="img_max img_auto" @dblclick="getDefault()" :src="row.src">
　　<!-- 查看上一張 -->
　　<span class="next_btn btn_left" @click="left()"></span>
　　<!-- 查看下一張 -->
　　<span class="next_btn btn_right" @click="right()"></span>
　　</div>
　　<!-- 按鈕條 -->
　　<div class="tool_bar">
　　<!-- 裁剪 -->
　　<span class="tool_btn btn_1" @click="cutPic()"></span>
　　<!-- 全屏 -->
　　<span class="tool_btn btn_2" @click="fullScreen()"></span>
　　<!-- 放大 -->
　　<span class="tool_btn btn_3" @click="big()"></span>
　　<!-- 縮小 -->
　　<span class="tool_btn btn_4" @click="small()"></span>
　　<!-- 下載 -->
　　<span class="tool_btn btn_5" @click="download()"></span>
　　<!-- 選中 -->
　　<span class="tool_btn btn_8" @click="choose()"></span>
　　<!-- 刪除 -->
　　<span class="tool_btn btn_9" @click="del(row.id)"></span>
　　</div>
　　</div>
　　</Modal>

　　js部分：

　　props: {
　　picList:Array,
　　rowData:Object
　　},
　　data() {
　　return {
　　//彈窗顯隱
　　visible: false,
　　//當前查看的圖片
　　row: {},
　　//當前查看的圖片在數組中的位置
　　index: 0,
　　//所有圖片
　　picArr: [],
　　//是否全屏
　　fullscreen: false,
　　};
　　},
　　watch: {
　　//監聽彈窗打開事件
　　modal(val) {
　　this.visible = val;
　　if(val){
　　this.init();
　　this.getObj();
　　}
　　},
　　},
　　mounted(){
　　this.move();
　　},
　　methods: {
　　/**
　　* 打開彈窗后，獲取傳入彈窗組件的數據
　　*/
　　getObj(){
　　this.row = this.rowData.row;
　　this.index = this.rowData.index;
　　this.picArr = this.picList;
　　},
　　/**
　　* 初始化
　　*/
　　init(){
　　this.fullscreen = false;
　　//重新打開后圖片要重置回默認大小和居中
　　this.getDefault();
　　},
　　/**
　　* 雙擊圖片恢復默認大小、位置
　　*/
　　getDefault(){
　　var image = document.getElementById("box");
　　image.classList.add('img_max');
　　image.classList.add('img_auto');
　　box.style.left = '50%';
　　box.style.top = '50%';
　　box.style.transform = 'translate(-50%,-50%)';
　　},
　　/**
　　* 拖拽移動
　　*/
　　move(){
　　var thiz = this;
　　thiz.$nextTick(() => {
　　var box = document.getElementById("box");
　　var fa = document.getElementById('father');
　　// 圖片移動效果
　　box.onmousedown=function(ev) {
　　var oEvent = ev;
　　// 瀏覽器有一些圖片的默認事件,這里要阻止
　　oEvent.preventDefault();
　　var disX = oEvent.clientX - box.offsetLeft;
　　var disY = oEvent.clientY - box.offsetTop;
　　fa.onmousemove=function (ev) {
　　oEvent = ev;
　　oEvent.preventDefault();
　　var x = oEvent.clientX - disX;
　　var y = oEvent.clientY - disY;
　　// 圖形移動的邊界判斷
　　// x = x <= 0 ? 0 : x;
　　// x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
　　// y = y <= 0 ? 0 : y;
　　// y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
　　box.style.left = x + 'px';
　　box.style.top = y + 'px';
　　//取消居中效果
　　// box.style.transform = 'translate(0,0)';
　　};
　　// 圖形移出父盒子取消移動事件,防止移動過快觸發鼠標移出事件,導致鼠標彈起事件失效
　　fa.onmouseleave = function () {
　　fa.onmousemove = null;
　　fa.onmouseup = null;
　　};
　　// 鼠標彈起后停止移動
　　fa.onmouseup=function() {
　　fa.onmousemove = null;
　　fa.onmouseup = null;
　　}
　　}
　　//監聽鼠標滾輪放大縮小
　　box.addEventListener("mousewheel", MouseWheelHandler, false);// IE9, Chrome, Safari, Opera
　　box.addEventListener("DOMMouseScroll", MouseWheelHandler, false);// Firefox
　　function MouseWheelHandler(e) {
　　// cross-browser wheel delta
　　var e = window.event || e; // old IE support
　　var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//IE、Opera、Safari、Chrome e.wheelDelta,Firefox中 e.detail 判斷是向上還是向下滾動負值delta取-1 正值delta取1
　　box.height = Math.max(100, Math.min(2500, box.height + (50 * delta)));
　　box.classList.remove('img_max');
　　box.classList.remove('img_auto');
　　return false;
　　}
　　});
　　},
　　/**
　　* 全屏
　　*/
　　fullScreen(){
　　//控制彈窗全屏
　　this.fullscreen = !this.fullscreen;
　　//圖片恢復默認大小、位置
　　this.getDefault();
　　},
　　/**
　　* 放大
　　*/
　　big(){
　　var image = document.getElementById("box");
　　if (image.height <= 2500) {
　　image.height = image.height + 40;
　　}
　　image.classList.remove('img_max');
　　image.classList.remove('img_auto');
　　},
　　/**
　　* 縮小
　　*/
　　small(){
　　var image = document.getElementById("box");
　　if (image.height > 100) {
　　image.height = image.height - 40;
　　}
　　image.classList.remove('img_auto');
　　},
　　/**
　　* 查看上一張
　　*/
　　left(){
　　var thiz = this;
　　if(thiz.index == 0){
　　//如果是第一張，則跳到最后一張
　　thiz.index = thiz.picArr.length - 1;
　　thiz.row = thiz.picArr[thiz.index];
　　}else{
　　thiz.index = thiz.index - 1;
　　thiz.row = thiz.picArr[thiz.index];
　　}
　　//查看上下一張的時候，圖片回到初始大小和位置，這里會閃爍，待優化
　　this.getDefault();
　　},
　　/**
　　* 查看下一張
　　*/
　　right(){
　　var thiz = this;
　　if(thiz.index == thiz.picArr.length-1){
　　//如果是最后一張，則跳到第一張
　　thiz.index = 0;
　　thiz.row = thiz.picArr[thiz.index];
　　}else{
　　thiz.index = thiz.index + 1;
　　thiz.row = thiz.picArr[thiz.index];
　　}
　　//查看上下一張的時候，圖片回到初始大小和位置，這里會閃爍，待優化
　　this.getDefault();
　　},
　　}

　　css部分：

　　//less
　　@pictureBg: #fff,
　　@pictureBorder: #fff,
　　@pictureCloseBg: #fff,
　　@pictureCloseBorder: #1A82FD,
　　@pictureClose: #1A82FD,
　　@pictureBtn1: url('../assets/map/view_image/icon_cut_blue.png')
　　@pictureBtn2: url('../assets/map/view_image/icon_move_blue.png')
　　@pictureBtn3: url('../assets/map/view_image/icon_zoom_blue.png')
　　@pictureBtn4: url('../assets/map/view_image/icon_reduce_blue.png')
　　@pictureBtn5: url('../assets/map/view_image/icon_download_blue.png')
　　@pictureBtn6: url('../assets/map/view_image/icon_play_blue.png')
　　@pictureBtn7: url('../assets/map/view_image/icon_video_blue.png')
　　@pictureBtn8: url('../assets/map/view_image/icon_chose_blue.png')
　　@pictureBtn9: url('../assets/map/view_image/icon_delete_blue.png')
　　@pictureBtnHov1: url('../assets/map/view_image/icon_cut_hov.png')
　　@pictureBtnHov2: url('../assets/map/view_image/icon_move_hov.png')
　　@pictureBtnHov3: url('../assets/map/view_image/icon_zoom_hov.png')
　　@pictureBtnHov4: url('../assets/map/view_image/icon_reduce_hov.png')
　　@pictureBtnHov5: url('../assets/map/view_image/icon_download_hov.png')
　　@pictureBtnHov6: url('../assets/map/view_image/icon_play_hov.png')
　　@pictureBtnHov7: url('../assets/map/view_image/icon_video_hov.png')
　　@pictureBtnHov8: url('../assets/map/view_image/icon_chose_hov.png')
　　@pictureBtnHov9: url('../assets/map/view_image/icon_delete_hov.png')
　　#picture_viewer_modal{
　　.ivu-modal{
　　//覆蓋modal關閉按鈕樣式
　　.ivu-modal-close{
　　right: -12px;
　　top: -12px;
　　border-radius: 100px;
　　background: @pictureCloseBg;
　　border:1px solid @pictureCloseBorder;
　　.ivu-icon-ios-close{
　　font-size: 24px;
　　color: @pictureClose;
　　}
　　}
　　//覆蓋modal彈窗盒子樣式
　　.ivu-modal-content{
　　background: @pictureBg;
　　border:1px solid @pictureBorder;
　　border-radius: 0;
　　.ivu-modal-body{
　　height: 80vh;
　　padding: 35px 15px 0;
　　overflow: hidden;
　　}
　　// 內容樣式
　　.wrap{
　　height: 100%;
　　>.num_tip{
　　color: @pictureClose;
　　position: absolute;
　　top: 10px;
　　left: 15px;
　　z-index: 9;
　　}
　　//圖片盒子樣式
　　>.box{
　　height: calc(100% - 20px - 1.2vw);
　　position: relative;
　　//展示的圖片樣式
　　>img{
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
　　cursor: move;
　　&.img_auto{
　　width: auto;
　　height: auto;
　　}
　　&.img_max{
　　max-height: 100%;
　　max-width: 100%;
　　}
　　}
　　//上/下一張按鈕樣式
　　>.next_btn{
　　display: block;
　　width: 3vw;
　　height: 3vw;
　　position: absolute;
　　top: 50%;
　　margin-top: -1.5vw;
　　cursor: pointer;
　　transition: all 0.2s;
　　&.btn_left{
　　left: 6px;
　　background: url('../../../assets/map/view_image/btn_left.png') no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: url('../../../assets/map/view_image/btn_left_hov.png') no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　&.btn_right{
　　right: 6px;
　　background: url('../../../assets/map/view_image/btn_right.png') no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: url('../../../assets/map/view_image/btn_right_hov.png') no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　}
　　}
　　//底部工具條樣式
　　>.tool_bar{
　　text-align: center;
　　font-size: 0;
　　position: relative;
　　z-index: 9;
　　.tool_btn{
　　font-size: 12px;
　　display: inline-block;
　　width: 1.2vw;
　　height: 1.2vw;
　　margin: 10px 0.8vw;
　　transition: all 0.2s;
　　cursor: pointer;
　　}
　　.btn_1{
　　background: @pictureBtn1 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov1 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_2{
　　background: @pictureBtn2 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov2 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_3{
　　background: @pictureBtn3 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov3 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_4{
　　background: @pictureBtn4 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov4 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_5{
　　background: @pictureBtn5 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov5 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_6{
　　background: @pictureBtn6 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov6 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_7{
　　background: @pictureBtn7 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov7 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_8{
　　background: @pictureBtn8 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov8 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　.btn_9{
　　background: @pictureBtn9 no-repeat;
　　background-size: 100% 100%;
　　&:hover{
　　background: @pictureBtnHov9 no-repeat;
　　background-size: 100% 100%;
　　}
　　}
　　}
　　}
　　}
　　//彈窗全屏樣式
　　&.ivu-modal-fullscreen{
　　.ivu-modal-close{
　　right: 0;
　　top: 0;
　　}
　　.ivu-modal-content{
　　.ivu-modal-body{
　　height: 100vh;
　　overflow: hidden;
　　}
　　}
　　}
　　}
　　}


文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127669.html

相關文章

  • 你不知道的CSS

    摘要：不要忘了給子元素設置字號用來清除浮動除了著名的清除浮動類，利用屬性也可以清除浮動。 本文首發于我的博客 CSS的世界是神奇的。隨著各瀏覽器WEB標準的日趨統一，CSS在WEB世界中扮演的角色也愈發的重要。甚至于在GitHub上出現了You-Dont-Need-JavaScript這樣Star近萬的優秀開源項目，拋開該項目的實用性不說，項目中的眾多的DEMO就已經證明了CSS的強大。當然...

    cnio 評論0 收藏0

  • Webpack快速入門

    摘要：了解相關什么是是一個模塊打包器。配置文件默認是一個模塊，返回一個格式的配置信息對象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項中指定。 了解Webpack相關 什么是webpack Webpack是一個模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會作為模塊處理 它將根據模塊的依...

    laznrbfe 評論0 收藏0

  • Webpack快速入門

    摘要：了解相關什么是是一個模塊打包器。配置文件默認是一個模塊，返回一個格式的配置信息對象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項中指定。 了解Webpack相關 什么是webpack Webpack是一個模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會作為模塊處理 它將根據模塊的依...

    curried 評論0 收藏0

  • Webpack快速入門

    摘要：了解相關什么是是一個模塊打包器。配置文件默認是一個模塊，返回一個格式的配置信息對象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項中指定。 了解Webpack相關 什么是webpack Webpack是一個模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會作為模塊處理 它將根據模塊的依...

    LMou 評論0 收藏0

發表評論

0條評論

3403771864

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<