类似手机壳加图片功能

介绍

上传一张图片，然后通过两个range滑块控制旋转角度和缩放

code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box{
        width: 200px;
        height: 300px;
        margin: 0 auto;
        border-radius: 5px;
        border: 1px solid #000;
        position: relative;
        overflow: hidden;
    }
    .control{
        text-align: center;
    }
    .img{
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 400px;
        transform-origin: top left;
        transform: translate(-50%,-50%);
    }
    .img:hover{
        cursor: move;
    }
</style>
<body>
    <div class="box">
        <img src="" alt="" class="img">
    </div>
    <div class="control">
        <input type="range" name="rot" value="0" id="rot" max="3600">
        <input type="range" name="size" value="110" id="size" max="200" min="20">
        <br><br>
        <input type="file" name="pic" value="" id="pic">
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        $(function(){
            var rot = $('#rot');
            var size = $('#size');
            var pic = $('.img');
            var currentSize = size.val()/100;
            var currentRot = rot.val();
            
            function setImgStyle(){
                currentSize = size.val()/100;
                currentRot = rot.val()/10;
                pic.css({
                    'transform':'rotate('+ currentRot +'deg) scale('+ currentSize +') translate(-50%,-50%)'
                })
            }  

            rot.on('input propertychange',function(){
                setImgStyle();
            });
            size.on('input propertychange',function(){
                setImgStyle();
            });
            
            var fileUpLoad = $('#pic');
            fileUpLoad.on('change',function(){
                var file = fileUpLoad[0].files[0];
                var fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onload = function(){
                    $('.img').attr('src',fr.result)
                }
                reset();
            })

            function reset(){
                rot.val(0);
                size.val(110);
                pic.css({
                    'transform':'rotate('+ currentRot +'deg) scale('+ currentSize +') translate(-50%,-50%)'
                })
            }
        })  
    </script>
</body>
</html>

posted on 2017-12-26 00:31  ouruixi  阅读(183)  评论(0)    收藏  举报

导航