div内部实现图片旋转、放大、缩小、拖拽

div内部实现图片旋转、放大、缩小、拖拽

  • 商品编号:
    #05388242_053
    • 原价:
      免费
    • 会员价:
      免费
  • 分类:
    • V1.0.0
  • 数量:
    限购1件

购物车中已存在此商品(限购一件),单击跳转购物车

  • 开发者:码上组合
  • 开发语言:Jquery
  • 开发环境:SubLine
  • 商品架构:B/S
  • 代码管理工具:github
  • 大小(M):0 M
  • 编码格式:utf-8
  • 是否开源:是
  • 开源协议:BSD

    药药,切克闹,一人我编码累,累把那bug写成堆。秋高气爽空气干燥你一定dei多喝水,过完了这周我就要回去、趁还有几天、你尽情的来跟我怼~~~

    新的一年,很久没更博客了,眼看十一要来了,听说过了十一就等过年了,但是感觉刚过完年一样,心里黯然神伤,更博一篇以表对小白驹过隙之神速聊以慰藉下……

    在开发中这样一个场景,web应用程序某处功能会接收来自各个户上传的图片,后台有个图片查看功能,实际生产过程中的结果出现了用户上传的图片是倒转的或者图片因为远距离拍摄上传的比较模糊的情况。

1、解决图片角度的问题

    大概原理很简单,切换HTML元素对象(图片)的class。如下CSS代码:

.rot1{transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

    再添加简单的JavaScript代码——根据是向左转还是向右转动态改变class的名称就行了。再次提示下,IE8浏览器是使用的是-ms-filter直接filter没有效果。这里使用的是CSS3+filter滤镜的方法,所以低版本的Firefox以目前版本的Opera浏览器下式没有效果的。但绝对适用于90%以上的互联网用户了。

2、图片放大缩小

即为调整图片的宽和高。如下核心代码

  //放大缩小图片
        function imgToSize(size) {
            var img = $("#rotImg");
            var oWidth = img.width(); //取得图片的实际宽度
            var oHeight = img.height(); //取得图片的实际高度

            img.width(oWidth + size);
            img.height(oHeight + size / oWidth * oHeight);
        }

3、区域内拖动图片

图片放大超过父级容器时,支持图片在容器内拖动,在mousedown的条件下绑定mousemove,计算拖拽区域大小,核心代码如下:

 $(document).bind('mousemove.imgview', function (event) {
                if ($img.data('mousedown')) {
                    var dx = event.pageX - settings['pageX'];
                    var dy = event.pageY - settings['pageY'];
                    if ((dx == 0) && (dy == 0)) {
                        return false;
                    }

                    var newX = parseInt($img.css('left')) + dx;
                    if (newX > 0) newX = 0;
                    if (newX < settings['width'] - $img.width())
                        newX = settings['width'] - $img.width() + 1;
                    var newY = parseInt($img.css('top')) + dy;
                    if (newY > 0) newY = 0;
                    if (newY < settings['height'] - $img.height())
                        newY = settings['height'] - $img.height() + 1;

                    if (settings['width'] >= $img.width()) {
                        newX = settings['width'] / 2 - $img.width() / 2;
                    }
                    if (settings['height'] >= $img.height()) {
                        newY = settings['height'] / 2 - $img.height() / 2;
                    }

                    $img.css('left', newX + 'px');
                    $img.css('top', newY + 'px');

                    settings['pageX'] = event.pageX;
                    settings['pageY'] = event.pageY;
                    $img.data('cannot_minimize', true);
                }
                return false;
            });

4、综合功能实现代码如下,运行请底部下载demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .rot1 {
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        }

        .rot2 {
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
            -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
        }

        .rot3 {
            -moz-transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        #imageView_container{
            border: 2px solid #000000;
        }
    </style>

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-browser.js"></script>
    <script src="js/jquery.imageView.js"></script>
</head>
<body>
<div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; ">
    <img src="images/1.jpg" id="rotImg" style="cursor: move; visibility: visible; position: absolute; width: 800px; height: 500px;" />
</div>
<div style="padding-top:5px;">
    <input type="button" value="放大" onclick="imgToSize(100)">
    <input type="button" value="缩小" onclick="imgToSize(-100);">
    <input type="button" value="向右旋转" id="rotRight">
    <input type="button" value="向左旋转" id="rotLeft">
</div>

<script type="text/javascript">
    $(function () {
    var param = {
        right: document.getElementById("rotRight"),
        left: document.getElementById("rotLeft"),
        img: document.getElementById("rotImg"),
        rot: 0
    };

    var fun = {
        right: function () {
            param.rot += 1;
            param.img.className = "rot" + param.rot;
            if (param.rot === 3) {
                param.rot = -1;
            }
        },
        left: function () {
            param.rot -= 1;
            if (param.rot === -1) {
                param.rot = 3;
            }
            param.img.className = "rot" + param.rot;
        }
    };
    param.right.onclick = function () {
        fun.right();
        return false;
    };
    param.left.onclick = function () {
        fun.left();
        return false;
    };

    $('#imageView_container').imageView({ width: 800, height: 500 });

    });

    var size = 0;


    //放大缩小图片
    function imgToSize(size) {
        var img = $("#rotImg");
        var oWidth = img.width(); //取得图片的实际宽度
        var oHeight = img.height(); //取得图片的实际高度

        img.width(oWidth + size);
        img.height(oHeight + size / oWidth * oHeight);
    }
</script>
</body>
</html>

5、最终效果如下图所示:

QQ截图20170930173544

QQ截图20170930173601


权利声明:本站所有商品信息、客户评价等信息是初心商城重要的数据资源,未经许可,禁止非法转载使用。 注:本站商品信息均来自初心商城,其真实性、准确性和合法性由初心商城负责。

                  初心源说明:初心商城主要为程序员提供开发基础的代码源以及成熟项目,网站中所有的商品有提供收费版本的, 也有提供免费版本的,按照大家各自不同的需求进行购买。实实在在的让程序员只用专注于自己的业务实现你的小梦想, 如果您对我们的成果表示认同并且觉得对你有所帮助我们愿意接受来自各方面的支持^_^。

                  支持:用手机扫描二维码支付

                  支付宝支持我们 微信支持我们

                  您的支持将被用于:
                  1、持续深入的上传更多更好的源代码
                  2、建立更加完善的技术社区
                  3、完善现在系统出现各种问题
                  4、购买域名和租赁服务器

                  1、交易规则

                  2、发货方式

                  1、自动:在上方保障服务中标有自动发货的商品,拍下后,将会自动收到来自卖家的商品获取(下载)链接

                  2、手动:在上方保障服务中标有手动发货的商品,拍下后,卖家会收到邮件,也可通过QQ或订单中的电话联系对方。

                  3、退款说明

                  1、描述:源码描述(含标题)与实际源码不一致的(例:描述PHP实际为ASP、描述的功能实际缺少、版本不符等)

                  2、演示:有演示站时,与实际源码小于95%一致的(但描述中有"不保证完全一样、有变化的可能性"类似显著声明的除外)

                  3、发货:手动发货源码,在卖家未发货前,已申请退款的

                  4、服务:卖家不提供安装服务或需额外收费的(但描述中有显著声明的除外)

                  5、其它:如质量方面的硬性常规问题等

                  备注:经核实符合上述任一,均支持退款,但卖家予以积极解决问题则除外。交易中的商品,卖家无法对描述进行修改!

                  4、注意事项

                  1、客户买完之后未确认收货,将不会收到下载地址和下载码,确认收货之后才能收到下载地址和下载码。

                  2、在未拍下前,双方在QQ上所商定的内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准);

                  3、在商品同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外);

                  4、在没有"无任何正当退款依据"的前提下,写有"一旦售出,概不支持退款"等类似的声明,视为无效声明;

                  5、虽然交易产生纠纷的几率很小,但请尽量保留如聊天记录这样的重要信息,以防产生纠纷时出现问题不明确的情况。

                  5、交易声明

                  1、本站作为直卖平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益;

                  2、非平台线上交易的商品,出现任何后果均与本站无关;无论卖家以何理由要求线下交易的,请联系管理举报。

                  初心Logo

                  初心商城| 初心系列| 初心博客| 初心历史| 系统反馈

                  chuxinm.com 京ICP备16055626号 © 2016-2018 山西米立信息技术有限公司 保留所有权利
                  违法和不良信息举报电话:186-2950-9347,本网站所列数据,除特殊说明,所有数据均出自我工作室
                  本网站兼容所有主流浏览器,不支持手机自适应