JQuery操作CSS3 transform 属性旋转图片

公司项目管理平台有比较多的横置图片,看起来十分不方便。

于是,产品提出添加一个旋转的功能。

我在给组员做系统设计的时候,考虑到有可能以后会有放大、缩小的功能,

于是考虑该怎么扩展?

阿远博客

不过后台图片本身就展现在一个弹出框插件上了,这间接就具备了放大、缩小的功能。

所以,就直接做出旋转的功能,不用考虑到扩展放大、缩小的问题了!

我就打算利用CSS3的transform属性操作图片使之旋转。

效果如下:

阿远博客


demo 代码示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片旋转</title>
    <style>
        /*全局样式*/
 *{
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        /*div的样式*/
 #one{
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        /*span的样式*/
 #one>p>span{
            display: inline-block;
            width: 60px;
            height: 25px;
            background-color: #1b1b1b;
            text-align: center;
            font-size: 16px;
            border-radius: 3px;
            color: #c1e2b3;
            cursor: pointer;
        }
        /*左旋 按钮浮动到左边*/
 #pull-left{
            float: left;
        }
        /*右旋 按钮浮动到右边*/
 #pull-right{
            float: right;
        }
    </style>
</head>
<body>
<div id="one">
    <img id ="target" title="img" width="100%" height="100%" src="http://demo.mycodes.net/tupian/boxImg/img/bz2.png" alt="img" />
    <p>
        <span id="pull-left">左旋90°</span>
        <span id="pull-right">右旋90°</span>
    </p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
        //左旋90°
 $('#pull-left').click(function(){
            rotate(90,$('#target'));
        });

        //右旋90°
 $('#pull-right').click(function(){
            rotate(-90,$('#target'));
        });

        //初始值
 var current = 0;

        /***
         * @param angle  旋转的角度
         * @param obj 操作的对象
         */
 function rotate(angle,obj){
            //计算最终想要旋转多少度
 current = (current+angle)%360;
            //旋转元素
 obj[0].style.transform = 'rotate('+current+'deg)';
        }
    });
</script>
</html>

网上很多开源插件感觉很不错,例如:

1、ajax-zoom

      360°旋转、放大、缩小、滚轮感应,功能很是强大。

阿远博客


2、Jquery图片放大缩小旋转代码

      代码整洁,小而全。

阿远博客


thanks~


阿远博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论