1

我有以下拖放设置，但是列表图标的大小是固定的，因此当浏览器较小（平板电脑/移动设备）时，项目不会像桌面那样均匀地播放。

我该如何着手制作尺寸百分比？

完整代码与 jsfiddle 上的演示在线：http: //jsfiddle.net/elogicmedia/rKUkF/4/

谢谢

JS

    circle_radius = 200;
$links = $('nav ul.gallery li a');
total_links = $links.size();
$links.each(function(index) {
    $(this).attr('data-index',index);
    animateCircle($(this), 1);
});
$('ul.gallery > li a').hover(function() {
    animateCircle($(this), 1.1);
}, function() {
    animateCircle($(this), 1);

});

function animateCircle($link, expansion_scale) {
    index = $link.attr('data-index');
    radians = 2*Math.PI*(index/total_links);
    x = -(Math.sin(radians)*circle_radius*expansion_scale);
    y = -(Math.cos(radians)*circle_radius*expansion_scale);
    $link.animate({
        top: x+'px',
        left: y+'px'
    }, 200);
}

CSS

a {
position: absolute;
text-decoration: none;
width:98px;
height:98px;
border-radius:50%;
line-height:1.5em;
text-align:center;
font-family: helvetica, arial;
background-color: #C0D9D9;

}

4

0 回答 0