js滑动旋转图片效果实例

发布时间:2019-11-25编辑:脚本学堂
本文介绍了js滑动旋转图片效果的实现代码,有需要的朋友参考下。

效果图:
js滑动旋转图片


源码.
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height: 100%;">
<body style="height: 100%;">
</body>
<script type="text/javascript">    
     //    Util.
    //
    var Util = {
        getBody: function()
        {
            return document.body;
        },
        appendToBody: function(tag)
        {
            this.getBody().appendChild(tag);
        },
        createShape: function(x, y, width, height)
        {
            var div = document.createElement("div");
            div.style.position     = "absolute";
            div.style.border    = "solid";
            div.style.background= "rgb(180, 230, 29)";
            //div.style.color        = "rgb(180, 230, 29)";
            div.style.left         = x + "px";
            div.style.top         = y + "px";       
            div.style.width     = width + "px";
            div.style.height     = height + "px";
            //div.style.webkitTransform = "rotate(70deg)";
            return div;
        },
        equal: function(v1, v2)
        {
            return Math.abs(v1 - v2) < 0.0001;
        },
        parseAngle: function(angle)
        {
            return "rotate(_angledeg)".replace("_angle", angle);
        },
        parseRect: function(x, y, width, height)
        {
            var result = "rect(_ypx, _endxpx, _endypx, _xpx)";
            result = result.replace("_x", x).replace("_y", y);
            result = result.replace("_endx", x + width).replace("_endy", y + height);
            return result;
        },
        getTagPoint: function(tag)
        {
            return {
                "x": parseInt(tag.style.left.replace("px", "")),
                "y": parseInt(tag.style.top.replace("px", ""))
            };
        },
        setTagPoint: function(tag, point)
        {
            tag.style.left = point.x + "px";
            tag.style.top = point.y + "px";
        }
    };   
    //
    //
    //    获取鼠标坐标.
    //
    var cursor = {
        "x": 0,
        "y": 0,
        "setPosition": function(e)
        {
            this.x = e.clientX;
            this.y = e.clientY;
        }
    };
    // 绑定全局, 获取鼠标坐标.
    (
        function()
        {
            Util.getBody().onmousemove = cursor.setPosition;
        }
    )();
    //
    //    元素信息.
    //
    function ElementInfo(tag)
    {
        var self = this;       
        tag.onmousemove = function() { self.step1 = 10; self.step2 = 5; };
        this.angle = 0;       
        this.step1 = 0;    // 旋转.
        this.step2 = 0;    // 移动.
        this.tag = tag;
        Util.appendToBody(tag);   
    }
    // 执行旋转.
    ElementInfo.prototype.onRotate = function()
    {
        if ( !Util.equal(this.step1, 0) )
        {
            this.angle += this.step1;
            this.angle = parseInt(this.angle);
            this.angle = parseInt(this.angle % 360);
            this.step1 -= 0.05;
            this.tag.style.webkitTransform = Util.parseAngle(this.angle);
        }
    }
    // 执行移动.
    ElementInfo.prototype.onMove = function()
    {
        if ( !Util.equal(this.step2, 0) )
        {
            var tagPoint = Util.getTagPoint(this.tag);           
            var toX = this.step2 * Math.sin(3.14 / 180 * this.angle) + tagPoint.x;
            var toY = this.step2 * Math.cos(3.14 / 180 * this.angle) + tagPoint.y;
            Util.setTagPoint(this.tag, {"x": toX, "y": toY});
            this.step2 -= 0.05;
        }
    }
    //
    var elements = [];
    (   
        function() {
            var screenWidth = document.documentElement.clientWidth;
            var screenHeight = document.documentElement.clientHeight;
            var cellWidth = 50;
            var cellHeight = 50;
            var cellNumX = 16;
            var cellNumY = 6;
            var viewWidth = cellNumX * cellWidth;
            var viewHeight = cellNumY * cellHeight;
            var viewX = parseInt( (screenWidth - viewWidth) / 2);
            var viewY = parseInt( (screenHeight - viewHeight) / 2);       

            for (var i = 0; i != cellNumX * cellNumY; ++i)
            {
                var x = viewX + parseInt(i % cellNumX) * cellWidth;
                var y = viewY + parseInt(i / cellNumX) * cellHeight;   
               
                var tag = Util.createShape(x, y, cellWidth, cellHeight);
                var ele = new ElementInfo(tag);
                elements.push(ele);
               
            }       
            setInterval(handleLogic, 10);                   
        }
    )();
   
    function handleLogic()
    {
        for (var i in elements)
        {
            elements[i].onRotate();
            elements[i].onMove();
        }
    }
</script>
</html>
 

鼠标经过时, 方块会旋转并且移动。