移动端 点击图片放大

移动端 点击图片放大_第1张图片

实现原理:
通过判断在线预览 img的宽度来改变图片的大小,jQ里面 width()可以获取到 元素的宽度。
1.HTM部分:

<p>
    <span>上传附件:span>      
    <input type="file" accept="image/*" capture="camera" class='file' id='uploadImg' value=''>      
p>
<div class='boxImg'>
    <img src="" class='imgShow'/>
div>
<div class="mengban">div>

2.CSS部分:

        p,input{font-size: .35rem;}
        .boxImg{ width: 4rem;height: 4rem; border: .01rem solid #999999; margin: 1rem auto; }
        .imgShow{ width: 100%;height: 100%; }
        .changeImg{ width: 6rem;height: 6rem; position: absolute; top: 2rem;left: .75rem; z-index: 5; }
        .mengban{ width: 100%;height: 13.34rem; background: rgba(0,0,0,.5); position: absolute; top: 0;left: 0; display: none; }

3.JS部分:

$('#uploadImg').on('change',function(){    //做了一个本地预览
        var file = $(this)
        var fileObj = file[0];  //获取当前元素
        var dataURL;
        var windowURL = window.URL;
        if(fileObj.files[0]){
            dataURL = windowURL.createObjectURL(fileObj.files[0])   //创建一个新的对象URL
            $('.imgShow').attr('src',dataURL);
        }else{
            dataURL = file.val();
            console.log(dataURL)
            $('.imgShow').style.filter = 'progid:DXImageTransform.Micsoft.AlphaImageLoader(sizingMethod = scale)'
            $('.imgShow').filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = dataURL;     
        }
       //点击图片放大
        $('.imgShow').click(function(){
            var width = $('.imgShow').width();
            console.log(width)          
            if(width == '200'){
                $('.mengban').show();
                $('.imgShow').addClass('changeImg')
            }
            $('.mengban').click(function(){
                $('.imgShow').removeClass('changeImg')
                $('.mengban').hide();
            })
        })
        //上传图片到服务器,这里用的是 ajaxFileUpload 插件上传
         $.ajaxFileUpload({
             url:"",
             fileElementId: "uploadImg",
             dataType: "string",
             success: function(data) {
                 //图片路径
                 $('.imgShow').attr("src",data);
           }
        });         
    })

你可能感兴趣的:(移动端开发)