磁带形式的滑块。 Safari中的Bug [英] Slider in the form of tape. Bugs in Safari

问题描述

我以磁带的形式制作了滑块。在Chrome和Mozilla它看起来不够好，但在Safari它看起来可怕。也许有人可以帮助解决这个问题？提前感谢！

I have made the slider in the form of tape. In Chrome and Mozilla it looks good enough, but in Safari it looks terrible. Maybe someone can help to solve the problem?!? Thanks in advance!

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

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();

推荐答案

-webkit-transform应与Chrome和Safari配合使用。

-webkit-transform should works with Chrome and Safari.

您使用的Safari版本是什么？

Which version of Safari are you using?

PS： -o-transform

P.S.: to make it works in Opera you need to use -o-transform

这篇关于磁带形式的滑块。 Safari中的Bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！