夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
移动web图片预览案例原生版

源码放送,拿走不谢!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
    <title>Title</title>
    <style>
 *{
            padding: 0px;
 margin: 0px;
 }
        .limitcode-imgMask{
            position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9998;
 background: rgb(0, 0, 0);
 }
        .limitcode-imgMask .imgpre-box{
            position: absolute;top: 50%;
 transform: translateY(-50%);
 text-align: center;
 margin-left: 2px;
 margin-right: 2px;
 }
        .limitcode-imgMask .imgpre-box .imgpre{
            width: 100%;
 height: auto;
 margin: auto;
 max-width: 100%;
 }
        .limitcode-imgMask .icon-box{
            position:absolute;
 opacity: 40;
 padding: 4px;
 background-color: rgba(0,0,0,0.4);
 border: 1px solid #cccccc;
 border-radius: 3px;
 z-index: 9999;
 }
        .limitcode-imgMask .restore-icon-box{
            top:20px;
 right:20px;
 }
        .limitcode-imgMask .restore-icon{
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiZTNjZDNlMS1iZjM0LTUzNGEtYTQxNS1kOWQ3ODlmOWU3MzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTBCMTU1MjRGNjk0MTFFNzhEMTFCMTA2RUZDODIyMzgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTBCMTU1MjNGNjk0MTFFNzhEMTFCMTA2RUZDODIyMzgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MWU0NDhhYzgtNDkyNi04NDQ4LWFhOWEtMDA5OTZkOTY0MDU2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmJlM2NkM2UxLWJmMzQtNTM0YS1hNDE1LWQ5ZDc4OWY5ZTczMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pi9yf90AAAExSURBVHjaYvz//z8DLQATlP4FxP/RsDQR+h+j6fkNk2CB0qxA/AGIdyFZ9J4IgycAsRmUbQXEMnAZUFD8h4AVUDa5uBJqDpjPhGS7LoXBaoHMgQXFQSDegCTuCsS9QCyOpAYZgMLzGRD3A/F8qNgyIOZHDwp03PUfAf5iwf+gcjtwBQ0TDm/9g9LaQMyMBTOhqcOZ3LB5FQQUcciLkWswDLDjEOckNoPQLOfhAn9xiP8h12BmKH0Gh/xTtOSKAVgIWHgfmr1xyTMRcvEBIC5AEt8DxLeB+BueIALJr0YSC4eag1FWXKWwrNiIq6y4QmFCOInMYYQW9CDiNTS/M0DL1Vog/kHAsEQg1oeyvYBYFWQmssG/oGUyMpBBin1c4CEQy6ElQ1Zkg+meQQafwQABBgDZmxRiix94jQAAAABJRU5ErkJggg==");
 background-repeat: no-repeat;
 width: 22px;
 height: 22px;
 display: block;
 }
    </style>
</head>
<body>
<div class="limitcode-imgMask">
    <div class="icon-box restore-icon-box"><i class="restore-icon"></i></div>
    <div class="imgpre-box">
 <img class="imgpre" src="./Hydrangeas.jpg" >
    </div>
</div>
<script>
 var imgDoc=document.getElementsByClassName("imgpre")[0];
 var restore_icon_box=document.getElementsByClassName("restore-icon-box")[0];
 var imgpre_box=document.getElementsByClassName("imgpre-box")[0];
 //图片加载完成后重新调整位置
 imgDoc.addEventListener("load",onImgLoad,false);
 //绑定手势触摸
 imgDoc.addEventListener("touchstart",onImgTouchStart,false);
 //绑定手势触摸结束
 imgDoc.addEventListener("touchend",onImgTouchEnd,false);
 //绑定手势触摸移动
 imgDoc.addEventListener("touchmove",onImgTouchMove,false);
 //绑定手势单击,用于移除预览效果
//    imgDoc.addEventListener("click",onImgClick,false);
    //还原图片缩放效果
 restore_icon_box.addEventListener("click",onRestore_icon_box,false);
    
 var previewObj={
        translate_X:0,//横移距离
 translate_Y:0,//纵移距离
 touchesLen:0,//手指数量,区分 缩放 或 移动
 scale:1.0,//缩放倍数 X、Y轴使用同一值,按比例缩放
 startEvent:null,//保存touch事件对象
 scaleMulriple:0.15,//放大和缩小 每次的递增倍数
 scaleRange:6 //缩放幅度,小于该幅度不认为是 缩放操作
 };

 function onImgTouchStart(e) {
        previewObj.touchesLen=e.touches.length;
 previewObj.startEvent=e;
 }
    function  onImgTouchMove(e) {
        if(previewObj.touchesLen==1){
            if(previewObj.scale<=1)return;//如果图片没有做放大,不能移动
 var _touch = e.targetTouches[0];
 var current_X=_touch.clientX;
 var current_Y=_touch.clientY;
 var pre_X=previewObj.startEvent.targetTouches[0].clientX;
 var pre_Y=previewObj.startEvent.targetTouches[0].clientY;
 //判断 左滑 还是 右滑
 if(current_X>pre_X){
                //右滑
 previewObj.translate_X+=Math.abs(current_X-pre_X) ;
 }else{
                previewObj.translate_X-=Math.abs(current_X-pre_X) ;
 }
            //判断 上移 还是 下移
 if(current_Y>pre_Y){
                //下滑
 previewObj.translate_Y+=Math.abs(current_Y-pre_Y) ;
 }else{
                previewObj.translate_Y-=Math.abs(current_Y-pre_Y) ;
 }
//            console.log("current_X:"+current_X+" current_Y:"+current_Y);
 }else  if(previewObj.touchesLen==2){
            var endX = Math.abs(e.targetTouches[0].clientX - e.targetTouches[1].clientX);
 var startX= Math.abs(previewObj.startEvent.targetTouches[0].clientX - previewObj.startEvent.targetTouches[1].clientX);
 if(Math.abs(endX-startX)<= previewObj.scaleRange )return;//如果缩放幅度过小则不做处理
 if(endX-startX>0){
                //2指之间的距离变大,放大效果
 previewObj.scale+=previewObj.scaleMulriple;
 }else{
                previewObj.scale-=previewObj.scaleMulriple;
 }
            if(previewObj.scale<1){
                //缩小幅度太大,用户可能想一步还原,可以考虑触发还原事件
 previewObj.scale=1;
 onRestore_icon_box();
 }
//            console.log("endX:"+endX+" startX:"+startX);
 }
        //如果 滑动的 位移 距离 大于放大的 宽度 则不能继续 滑动
 if(Math.abs(previewObj.translate_X) > (imgDoc.width*(previewObj.scale-1))/2 )
        {
            var abs_x=(imgDoc.width*(previewObj.scale-1))/2+10;//因为是以中心轴两边放大的,所以要 除以 2 , 加 10 是阙值
 previewObj.translate_X=   previewObj.translate_X >0 ? abs_x: -abs_x;
 }
        if(Math.abs(previewObj.translate_Y) > (imgDoc.height*(previewObj.scale-1))/2 )
        {
            var abs_x=(imgDoc.height*(previewObj.scale-1))/2+10;//因为是以中心轴两边放大的,所以要 除以 2 , 加 10 是阙值
 previewObj.translate_Y=   previewObj.translate_Y >0 ? abs_x: -abs_x;
 }
        imgDoc.style.transform="translate("+previewObj.translate_X+"px,"+previewObj.translate_Y+"px)  scale("+previewObj.scale+","+previewObj.scale+")";
 previewObj.startEvent=e;
 }
    function onImgTouchEnd(e) {
    }
    function onRestore_icon_box() {
        previewObj.scale=1;
 previewObj.translate_X=0;
 previewObj.translate_Y=0;
 imgDoc.style.transform="translate(0px,0px)  scale(1,1)";
 }
    function onImgClick() {
        imgDoc.remove();
 }
    function onImgLoad() {
        var imgW=this.naturalWidth;
 var bodyW=document.body.clientWidth;
 if(bodyW>imgW){
            imgpre_box.style.left=((bodyW-imgW)/2)+"px";
 }
    }
</script>
</body>
</html>


在线Demo

请用手机扫描下方的二维码打开。

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

2

支持

0

反对

posted @2018-6-14  拜读(700)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付