Question

我以滑带的形式制作了滑块。在Chrome和Mozilla中它看起来不错，但在Safari中看起来很糟糕。也许有人可以帮忙解决问题？！？提前谢谢！

的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;}

jquery的：

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

Answer 2

Internet Explorer - -ms- 火狐 - -moz- 铬 - -webkit Safari - -webkit 歌剧 - -webkit

对 Safari 使用 -webkit-transform

滑块形式的磁带。 Safari中的错误

2 个答案: