js实现图片旋转效果

JavaScript013

js实现图片旋转效果,第1张

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。

<!DOCTYPE HTML>

<html>

<head>

<meta charset=UTF-8>

<title>YuGiOh</title>

<style type="text/css">

#div {

    position: absolute

    top: 50px

    left: 300px

    width: 300px

    height: 300px

    line-height: 300px

    text-align: center

    border: 1px solid black

}

</style>

<script type="text/javascript">

    var rotateHTML5 = function (limit)

    {

        var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i

        var wt = div.style['-webkit-transform'], wts = wt.match (reg)

        var $2 = RegExp.$2

        console.log ($2)

        div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4)

    }

     

    var rotateIE = function (obj)

    {

        var d = !!obj.d ? obj.d : 1

        var r = d * Math.PI / 180

        costheta = Math.cos (r)

        sintheta = Math.sin (r)

        obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"

        var item = obj.filters.item (0)

        var width = obj.clientWidth

        var height = obj.clientHeight

        item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2

        item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2

        item.M11 = costheta

        item.M12 = -sintheta

        item.M21 = sintheta

        item.M22 = costheta

        obj.timer = setTimeout (function ()

        {

            var dx = d + 1

            dx = dx > 360 ? 1 : dx

            obj.d = dx

            rotate (obj, dx)

        }, 30)

    }

     

    var start = function ()

    {

        if (!!div.interval)

        {

            clearInterval (div.interval)

            delete div.interval

        }

        else

        {

            div.interval = setInterval (function ()

            {

                /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div)

            }, 30)

        }

    }

</script>

</head>

<body>

    <button onclick="start()">rotate</button>

    <div id="div" style="border-radius: 90px -webkit-transform: rotate(10deg)">ROTATE</div>

</body>

</html>

<div class="upload-img-box" ref="moveWrap">

<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">

<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>

</div>

<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>

<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>

<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>

</div>