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

Slider in the form of tape. Bugs in Safari

提问人:COSTADOR 提问时间:3/14/2013 最后编辑:dfsqCOSTADOR 更新时间:7/15/2021 访问量:617

问:

我以胶带的形式制作了滑块。在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;}

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();
javascript jquery css safari

评论

0赞 Steven 4/13/2013
这太棒了......但是我见过的不太兼容的代码哈哈。这是针对编程组合的吗?只需添加对 chrome 和 firefox 的兼容性即可。我什至不想想象探险家会是什么样子......

答:

0赞 Alessandro Tedesco 4/21/2013 #1

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

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

PS:要使它在Opera中工作,您需要使用-o-transform

0赞 dude_on_fire 7/15/2021 #2

IE浏览器 - Firefox - Chrome - Safari 浏览器 - Opera --ms--moz--webkit-webkit-webkit

用于 Safari-webkit-transform