2

私はこの質問を探しました、私はいくつかの答えを見つけました、しかしそれは本当に私が必要とするものではありません。

私はjqueryの経験はあまりありませんが、すでにホバー機能を作成しています。divにカーソルを合わせると、サイズが変更されます。この効果に追加したいのは、同じホバーで、画像の周りに円が描かれることです。

人々がボックス半径を追加する答えはすでに見ました。しかし、私が探しているのは、実際に円が描かれているのを見るということです。0:49秒の例（少しランダムですが、このビデオは私が必要とする効果を示しています）：

http://www.youtube.com/watch?feature=player_detailpage&v=jCdNnaTzItM#t=45s

これが可能であることを願っています！

私のコード：

$('li#balk1').hover(
    function(){ $(".ad").css('transform', 'scale(1.2)'); },
    function(){ $(".ad").css('transform', 'scale(1)'); } 
);

「.ad」の周りに円があるはずです

4

2 に答える 2

2

了解しました。これを実行できることがわかりました。このソリューションを変更するフィドルを投げました。2番目のリンクで詳しく説明されているプラ​​グインとプラグインの使用に依存していると思います。tweencurve

于 2013-03-26T19:41:42.920 に答える
0

このCodepen（リンク）をチェックアウトするか、要点（リンク）としても利用できます

SVGストローク属性を使用して、ランドで計算された不完全なベジェ曲線で生成されたSVGラインをアニメーション化します。これはあなたが探していたものにかなり近いはずだと思います。

jQueryとD3の依存関係

<style>
path.ln {
    stroke-width: 2px;
    stroke: #999;
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-animation: dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
    -moz-animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
    -o-animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
    animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
}

@keyframes dash {
    to { stroke-dashoffset: 0; }
}
</style>

<script>
function path(min_rad_delta,max_rad_delta, el_min, el_max, el_min_delta,el_max_delta) {
    var d = Math.sqrt( 0.5 * 0.5 + 1 * 1 ), r = 1; //returns the square root of a number
    var el = (el_min + Math.random() * (el_max - el_min)) * Math.PI / 180;
    var path = 'M' + [r * Math.sin(el), r * Math.cos(el)] + ' C' + [d * r * Math.sin(el + Math.LN2), d * r * Math.cos(el + Math.LOG10E)];

    for (var i = 0; i < 4; i++) {
        el += Math.PI / 2 * (1 + el_min_delta + Math.random() * (el_max_delta - el_min_delta));
        r *= (1 + min_rad_delta + Math.random()*(max_rad_delta - min_rad_delta));
        path += ' ' + (i?'S':'') + [d * r * Math.sin(el - 0.45), d * r * Math.cos(el - 0.45)];
        path += ' ' + [r * Math.sin(el), r * Math.cos(el)];
    }
    return path;
}

function cX(lambda_min, lambda_max, el_min, el_max) {
    var el = (el_min + Math.random()*(el_max - el_min));
    return 'rotate(' + el + ') ' + 'scale(1, ' + (lambda_min + Math.random()*(lambda_max - lambda_min)) + ')'+ 'rotate(' + (-el) + ')';
}
</script>

<svg id="circle" width="50%" height="75%" viewBox='-1.5 -1.5 3 3'></svg>

<script>
d3.selectAll( 'svg' )
    .append( 'path' )
    .classed( 'ln', true)
    .attr( 'd', path(-0.1,0, 0,360, 0,0.2 ))
    .attr( 'transform', cX( 0.6, 0.8, 0, 360 ));
setTimeout(function() { location = '' } ,5000)
</script>
于 2014-07-12T07:27:29.233 に答える