javascript - 磁带形式的 slider 。 Safari 中的错误

Question

我把 slider 做成胶带的形式。在 Chrome 和 Mozilla 中它看起来不错，但在 Safari 中它看起来很糟糕。也许有人可以帮助解决问题？!？提前致谢!

jsfiddle.net/mcbgv/7/

CSS:

#wrapper1 #my_scroll {z-index:5; height:480px; width:640px; position:absolute; top:-10px; left:12px;}
#wrapper1 #bloc_wrap {height:480px; width:640px; z-index:7; overflow:hidden;}
#wrapper1 #wrapper_sl {height:480px;}
#wrapper1 #wrapper_sl .block {width:150px; background:blue; border:2px solid #fff; position:absolute; margin:-40px 0 0 0; z-index:1;  height:108px; overflow:hidden; transition: all 1.2s linear ; -webkit-transition: all 1.2s linear ; -moz-transition: all 1.2s linear ; -webkit-border-radius: 15px; -moz-border-radius: 15px; zoom: 1; border-radius: 15px;  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}
#wrapper1 #wrapper_sl .block img {border:0px solid #FFF; height:108px; cursor:pointer; margin:0 0 0 -16px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
#wrapper1 #my_scroll .main {position:relative;}
#wrapper1 #my_scroll .main div {display:none; background:green; position:absolute; z-index:5; top:74px; left:78px;}
#wrapper1 #my_scroll .main div a {display:block; position:relative; width:560px; height:350px; border:solid 1px #000000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; overflow:hidden; color:#ffffff; text-decoration:none;}

j查询:

var docheight = $("#my_scroll").outerHeight();
var docwidth = $(window).width();
// Slider "circular motion" Drew - magart.com.ua START
var myDiv = document.getElementById("bloc_wrap");
var ImgDiv = $("#wrapper_sl").find(".block");
var ImgLink = $("#wrapper_sl").find(".block a");
var $size_dug = 230; //radius
var $smes_x = 230;
var $smes_y = docheight - $size_dug - 17;
var $kolvo = 14; //kolichestvo blokov
var $skorost = 200; //cem bolshe tem medlennei (dilitel skorosti)
var $ugol = (2 * Math.PI / $kolvo);
var $start_pr = 0;
var $global_v = 0;

var main = $('#my_scroll').find('.main');

$(ImgLink).click(function () {
    var ImgRel = $(this).attr('rel');
    main.find('div').fadeOut(100);
    $('#my_scroll .main ' + ImgRel).fadeIn(250);
});

function sec1() {
    $global_v = $global_v + 10;
    $nowz = (($global_v + $start_pr) / $skorost) + $ugol * 2;
    for (var ink = 0, len = $kolvo; ink < len; ink++) {
        uno1 = $(ImgDiv[ink]);
        $rad1 = ((ink + 1) * $ugol + $nowz);
        $deg1 = $rad1 * 360 / (2 * Math.PI) + 270;
        trata = Math.sin(-($rad1)) * $size_dug + $smes_x;
        if (trata > 260) {
            zind = 1;
        } else {
            zind = 10;
        }
        uno1.css({
            top: Math.cos($rad1) * $size_dug + $smes_y,
            left: trata,
            zIndex: zind,
            transform: 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)',
            '-moz-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)',
            '-webkit-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)'
        });
    };

}

// Slider "circular motion" Drew - magart.com.ua END    

sec1();

Answer 1

-webkit-transform 应该适用于 Chrome 和 Safari。

您使用的是哪个版本的 Safari？

P.S.:要让它在 Opera 中运行，您需要使用 -o-transform