放大、缩小、左右旋转图片,兼容IE6+

标签: 放大、缩小、左右旋转图片,兼容IE6
5人阅读 评论(0) 收藏 举报
分类:

复制代码
js封装:
/**
 * @name jQuery imageView plugin
 * @license GPL
 * @version 0.0.4
 * @date September 16, 2010
 * @category jQuery plugin
 * @author Kotelnitskiy Evgeniy (evgennniy@gmail.com)
 * @copyright (c) 2010 Kotelnitskiy Evgeniy (http://4coder.info/en/)
 * @example Visit http://4coder.info/en/ for more informations about this jQuery plugin
 */
image_view_last_id = 0;
(function ($) {
    jQuery.fn.imageView = function (settings) {
        // Find Elements
        var $container = this;
        if ($container.length == 0) return false;
        var container = $container[0];
        var $img = $('img', container);
        var img = $img[0];


        if (!$img.attr('id')) {
            image_view_last_id++;
            $img.attr('id', 'image_view_' + image_view_last_id);
        }
        var id = $img.attr('id');


        // Settings
        settings = jQuery.extend({
            width: 500,
            height: 400,
            fullsize: $img.attr('rel'),
            mousewheel: false
        }, settings);
        settings['src'] = $img.attr('src');


        $img.data('mousedown', false);
        $img.data('cannot_minimize', false);
        $img.data('state', 0);


        // CSS
        $container.addClass('iv-loading');
        $container.width(settings['width']);
        $container.height(settings['height']);
        $container.css('overflow', 'hidden');
        $container.css('position', 'relative');


        $img.css('visibility', 'hidden');
        $img.css('position', 'absolute');
        $img.css('left', 0);
        $img.css('top', 0);


        if (img.complete) {
            setTimeout(function () {
                loaded();
            }, 100);
        }
        else {
            $(img).one('load', function () {
                loaded();
            });
        }


        function loaded() {
            settings['imgwidth'] = $img.width();
            settings['imgheight'] = $img.height();


            $img.css('left', settings['width'] / 2 - $img.width() / 2);
            $img.css('top', settings['height'] / 2 - $img.height() / 2);


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


            $(document).bind('mouseup.imgview', function (event) {
                $img.data('mousedown', false);
                return false;
            });
                
                $img.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;
                });




            function cursor() {
                if (settings['loading']) {
                    $container.css('cursor', 'progress');
                }
                else {
                    if ($img.data('state') == 0) {


                        if ($.browser.mozilla) {
                            $container.css('cursor', '-moz-zoom-in');
                        }
                        else {
                            $container.css('cursor', 'pointer');
                        }
                    }
                    else {
                        $container.css('cursor', 'move');
                    }
                }
            }


            // Finalize
            $img.css('visibility', 'visible');
            $container.removeClass('iv-loading');
            cursor();
        }
    };
})(jQuery);
复制代码
js调用: 

<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>
复制代码
复制代码
html部分: 
<div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; margin: 10px;">
                <img src="{$vat_special_invoice.img_id}" id="rotImg" style="cursor: move; visibility: visible; position: absolute; width: 800px; height: 500px;" alt="一般纳税人资质证明"/>
            </div>
            <div style="padding-top:5px;margin: 10px">
                <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>
复制代码

            
查看评论

兼容IE的旋转效果

先看看效果 chrome下 IE下效果相同,也就是该源码是一个兼容的方案,包括ie6-8。这里介绍两个方案 方案1: 1.按照上图可以切一张图片,旋转45度保存 2.然后使该图片旋转-45度...
  • yeliang0616
  • yeliang0616
  • 2015-02-08 18:29:59
  • 2236

html5中实现对图片的旋转

其实在js中也是一样的, 首先是代码: Firefox下: -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);//c...
  • ALEX__0805
  • ALEX__0805
  • 2015-07-27 20:47:29
  • 1959

放大、缩小、左右旋转图片,兼容IE6+

js封装:/**  * @name jQuery imageView plugin  * @license GPL  * @version 0.0.4  * @date September 16, 2...
  • mentalitys
  • mentalitys
  • 2018-04-17 16:21:39
  • 5

jquery实现图片放大,缩小,翻转,旋转小实例

测试兼容ie6,firefox3.6,chrome 10.0.648.133   New Document      https://ajax.googleapis.com/ajax/li...
  • Truong
  • Truong
  • 2014-03-29 11:50:42
  • 21050

【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)

CSS3 常用四个动画(旋转、放大、旋转放大、移动)在页面设计中,给一些图标或者图片加上一些动画效果,会给人非常舒服的感觉。这里收集了四个常用动画效果,以便不时之需。转载原文效果一:360°旋转 修改...
  • FungLeo
  • FungLeo
  • 2015-11-15 14:24:25
  • 21075

类似新浪微博js<em>图片旋转</em>/翻转效果

类似新浪微博js<em>图片旋转</em>/翻转效果兼容<em>ie6</em>,ie7,ie8,firefox,opera,chrome...; html5,canvas应用;新浪微博里的<em>图片旋转</em>效果!弥补了新浪里在ie8<em>下旋转图片</em>时不会...
  • 2018年04月17日 00:00

IE8、9、10下图片旋转

这里两天要实现一个功能,图片左右旋转 在网上找了各种zh
  • tang745163962
  • tang745163962
  • 2014-05-30 14:59:50
  • 9540

HTML里使图片放大,旋转

Baidu             * {             margin: 0;             padding: 0;         }         li {...
  • c_hjf
  • c_hjf
  • 2017-10-15 18:36:04
  • 190

仿照windows照片查看器

  • 2012年02月22日 14:07
  • 2.31MB
  • 下载

jquery实现简单的图片翻转效果

鼠标经过图片图片翻转显示图片背后的文字(对于其中引用的jquery文件、图片,需要用自己的)         Title             *{margin: 0;pad...
  • sunflower_li
  • sunflower_li
  • 2017-03-16 15:04:33
  • 1724
    个人资料
    持之以恒
    等级:
    访问量: 2866
    积分: 238
    排名: 32万+
    文章存档