当前位置：首页 → 问答吧 → 请教大家一个微博图片效果问题[已经解决]

请教大家一个微博图片效果问题[已经解决]

时间：2010-05-28

来源：互联网

效果是仿当今微博流行的图片放大旋转效果，参照网络上的代码基本实现（基于jquery），但在firefox 3.63下图片宽度控制不起效果导致图片超出去一部分，不知道是何种原因，这里贴出代码，大家帮忙分析下

复制内容到剪贴板

代码:

            var w=this.width;
            var h=this.height;
            if( w > maxw){  //图片宽度控制maxw为560像素，除Firefox其他浏览器正常
             oldw = w;
             w = maxw;
             h = parseInt(h * (maxw/oldw));
            };

在线演示地址 http://4jax.net/t/demo.html

原因已经找到，js代码本身没什么问题，是自己在写css样式的时候没有做到兼容，导致火狐下出现错误，谢谢大家!

[ 本帖最后由 henaxxz 于 2010-5-28 15:14 编辑 ]

作者: henaxxz 发布时间: 2010-05-28

代码运行框内东西补齐

作者: cwq2jxl 发布时间: 2010-05-28

吸收了佐佐的旋转方案更新：

复制内容到剪贴板

代码:

/*
Name:        artZoom[图片放大镜]
Version:    1.0.2
Author:     tangbin
Email:        [email protected]
Website:    www.planeArt.cn
*/
(function($){
    $.fn.artZoom = function(){
        $(this).live('click', function(){
            var maxImg = $(this).attr('href'),
            viewImg = $(this).attr('rel').length === '0' ? $(this).attr('rel') : maxImg;

            if ($(this).find('.loading').length == 0) $(this).append('<span class="loading" title="Loading..">Loading..</span>');
            imgTool($(this), maxImg, viewImg);
            return false;
        });

        //图片预先加载
        var loadImg = function (url, fn){
            var img = new Image();
            img.src = url;
            if (img.complete){
                fn.call(img);
            }else{
                img.onload = function(){
                    fn.call(img);
                };
            };
        };

        var imgTool = function(on, maxImg, viewImg) {
            var width = 0,
            height = 0,
            tool = function(){
                on.find('.loading').remove();
                on.hide();

                if (on.next('.artZoomBox').length != 0){
                    return on.next('.artZoomBox').show();
                };

                var maxWidth = on.parent().width() - 20;
                if (width > maxWidth) {
                    height = maxWidth / width * height;
                    width = maxWidth;
                };

                var html = '<div class="artZoomBox"><div class="tool"><a class="hideImg" href="#" title="收起">收起</a><a class="imgLeft" href="#" title="向左转">向左转</a><a class="imgRight" href="#" title="向右转">向右转</a><a class="viewImg" href="' + viewImg + '" title="查看原图">查看原图</a></div><a href="' + viewImg + '" class="maxImgLink"> <img class="maxImg" width="' + width + '" height="' + height + '" src="' + maxImg + '" /></a></div>';
                on.after(html);
                var box = on.next('.artZoomBox');
                box.hover(function(){
                    box.addClass('js_hover');
                }, function(){
                    box.removeClass('js_hover');
                });
                box.find('a').bind('click', function(){
                    //收起
                    if($(this).attr('class') == 'hideImg' || $(this).attr('class') == 'maxImgLink') {
                        box.hide();
                        box.prev().show();
                    };
                    //左旋转
                    if($(this).attr('class') == 'imgLeft') {
                        box.find('.maxImg').rotate('left')
                    };
                    //右旋转
                    if($(this).attr('class') == 'imgRight') {
                        box.find('.maxImg').rotate('right')
                    };
                    //新窗口打开
                    if($(this).attr('class') == 'viewImg') window.open(viewImg);

                    return false;
                });

            };

            loadImg(maxImg, function(){
                width = this.width;
                height= this.height;
                tool();
            });

            //图片旋转
            $.fn.rotate = function(p){
                img = $(this)[0];
                var n = img.getAttribute('step');
                if(n == null) n = 0;
                if(p == 'left'){
                    (n == 3) ? n = 0 : n++;
                }else if(p == 'right'){
                    (n == 0)? n = 3 : n--;
                };
                img.setAttribute('step', n);
                //MSIE
                if(document.all) {
                    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
                    //HACK FOR MSIE 8
                    switch(n){
                        case 0:
                            $(this).next().height = img.height;
                            break;
                        case 1:
                            $(this).next().height = img.width;
                            break;
                        case 2:
                            $(this).next().height = img.height;
                            break;
                        case 3:
                            $(this).next().height = img.width;
                            break;
                    }
                //DOM
                }else{
                    var c = $(this).next('canvas')[0];
                    if($(this).next('canvas').length == 0){
                        $(this).css({'visibility': 'hidden', 'position': 'absolute'});
                        c = document.createElement('canvas');
                        c.setAttribute('class', 'maxImg canvas');
                        img.parentNode.appendChild(c);
                    }
                    var canvasContext = c.getContext('2d');
                    switch(n) {
                        default :
                        case 0 :
                            c.setAttribute('width', img.width);
                            c.setAttribute('height', img.height);
                            canvasContext.rotate(0 * Math.PI / 180);
                            canvasContext.drawImage(img, 0, 0);
                            break;
                        case 1 :
                            c.setAttribute('width', img.height);
                            c.setAttribute('height', img.width);
                            canvasContext.rotate(90 * Math.PI / 180);
                            canvasContext.drawImage(img, 0, -img.height);
                            break;
                        case 2 :
                            c.setAttribute('width', img.width);
                            c.setAttribute('height', img.height);
                            canvasContext.rotate(180 * Math.PI / 180);
                            canvasContext.drawImage(img, -img.width, -img.height);
                            break;
                        case 3 :
                            c.setAttribute('width', img.height);
                            c.setAttribute('height', img.width);
                            canvasContext.rotate(270 * Math.PI / 180);
                            canvasContext.drawImage(img, -img.width, 0);
                            break;
                    };
                };
            };

        };
    };
)(jQuery);

[ 本帖最后由 tangbin1987 于 2010-5-28 14:41 编辑 ]

作者: tangbin1987 发布时间: 2010-05-28

~~ 好的，我马上修改下！可以先看下在线演示！

作者: henaxxz 发布时间: 2010-05-28

代码就是看了你博客上的修改的，我马上试试你发的~~

作者: henaxxz 发布时间: 2010-05-28

搞了半天才研究出来怎么用，但是在firefox下仍然无法合理控制宽度~~~ 在ie7下正常。但旋转一次后宽度可以正常。

[ 本帖最后由 henaxxz 于 2010-5-28 14:13 编辑 ]

作者: henaxxz 发布时间: 2010-05-28

我的项目中是正常的。你看我上面的代码有一句：
var maxWidth = on.parent().width() - 20;

意思就是获取缩略图父级元素的宽度为大图的最大宽度(再减去了20)，而高度不用限制。

作者: tangbin1987 发布时间: 2010-05-28

找到原因所在了，css样式惹得祸， display: -moz-inline-stack; 这句一加上问题就来了，看来ff的专用样式害人不浅，问题完美解决，谢谢各位！

作者: henaxxz 发布时间: 2010-05-28