拖拽图片旋转

Posted 2020-12-16 lyj153

var img = document.getElementById(‘color_type_img‘);
        var color_index = 0;
        var lastIndex = 0;
        var num = 17;
        var speed = 20;
        var color_name = "电光银";
        img.onmousedown = function (e) {
            e = e || window.event;
            document.body.style.cursor = ‘w-resize‘;
            //记录当前按下的位置
            startX = e.clientX;
            img.onmousemove = function (evt) {
                evt = evt || window.event;
                //dis是移动了多少距离,向右拉时:evt.clientX为正,dis为负数,那么就图片
                var dis = startX - evt.clientX;
                //根据移动多少距离来移动多少张图片,
                //lastIndex记录最后一次停留的图片.jpg
                color_index = Math.floor(dis / speed) % num + lastIndex;
                if (color_index < 0) {
                    color_index = color_index % num + num;
                } else if (color_index >= num) {
                    color_index = color_index % num;
                }
                var newsrc = ‘/Content/images/‘ + color_name + ‘/0_‘ + color_index + ‘.png‘;
                img.setAttribute(‘src‘, newsrc);
                showImg();
                evt.preventDefault();

            }


        }
        function showImg() {
            img.onmouseup = function () {
                img.onmousemove = null;
                document.body.style.cursor = ‘‘;
                lastIndex = color_index;//将最后停留的图片给赋值
            };
        }