2 una chou una_chou 于 2017.09.08 00:10 提问

怎么可以让图片 先旋转 之后再 缩放

代码:

 var rotate = 0;
        function rotatePlus() {
            $('#canvas').css('transform', 'rotate(' + (rotate += 5) + 'deg)');
        }

        function rotateRedu() {
            $('#canvas').css('transform', 'rotate(' + (rotate -= 5) + 'deg)')
        }

        var scale = 1;
        function scalePlus() {
            $('#canvas').css('transform', 'scale(' + (scale += 0.1) + ')');
        }

        function scaleRedu() {
            $('#canvas').css('transform', 'scale(' + (scale -= 0.1) + ')')
        }

上面的代码只能执行一种效果。怎么样可以让图片点击旋转的时候旋转,之后,再点击放大,可以让图片在旋转的基础上放大?

2个回答

showbo
showbo   Ds   Rxr 2017.09.08 09:11

叠加就行了


<div id="canvas"></div>
<style>#canvas{width:100px;height:100px;position:absolute;left:300px;top:300px;background:#eee}</style>
<script>
    var rotate = 0, rotatevalue = 5, scalevalue = 0.1, scale=1;
    function animate() {
        rotate += rotatevalue
        scale += scalevalue
        if (scalevalue < 0 && scale < 0) scale = 0;
        $('#canvas').css('transform', 'rotate(' + rotate + 'deg) scale(' + scale + ')');
    }
    setInterval(animate, 100);
</script>
<input type="button" value="rotate +" onclick="rotatevalue=5" />
<input type="button" value="rotate -" onclick="rotatevalue=-5" />
<input type="button" value="scale +" onclick="scalevalue = 0.1" />
<input type="button" value="scale -" onclick="scalevalue = -0.1" />
XianRenShan
XianRenShan   2017.09.08 08:50
Csdn user default icon
上传中...
上传图片
插入图片