javacript で svg を使用して「iphone スタイル」のトグル ボタンを作成しました。コードは次のとおりです。
var btnsvg;
var aCircle;
var aTextOn;
var aTextOff;
function circle_click(evt) {
var circle = evt.target;
if ($(circle).position({ svgCx: 20 })) {
$(circle).animate({ svgCx: 50 }, 400);
$(aTextOn).animate({ svgFillOpacity: 1.0 }, 400);
$(aTextOff).animate({ svgFillOpacity: 0.0 }, 400);
}
else {
$(circle).animate({ svgCx: 20 }, 400);
$(aTextOn).animate({ svgFillOpacity: 0.0 }, 400);
$(aTextOff).animate({ svgFillOpacity: 1.0 }, 400);
}
}
function drawToggleButton() {
$('.toggleButton').each(function () {
btnsvg = $(this).svg().svg('get');
btnsvg.linearGradient('btnGrad',
[[0, '#000000'], [1, '#000000', 0.32]], 50.168, 28, 50.168, 3,
{ gradientUnits: 'userSpaceOnUse'
});
btnsvg.linearGradient('offGrad',
[[0, '#1F1F1F'], [1, '#A2A1A1']], 32.6685, 28, 32.6685, 3,
{ gradientUnits: 'userSpaceOnUse'
});
btnsvg.linearGradient('onGrad',
[[0, '#1A2D49'], [1, '#304866']], 32.6685, 28, 32.6685, 3,
{ gradientUnits: 'userSpaceOnUse'
});
btnsvg.rect(10, 10, 50, 20, 10, 10,
{ fill: 'url(#offGrad)', stroke: 'black', strokeWidth: 1
});
aCircle = btnsvg.circle(20, 20, 10, { onclick: 'circle_click(evt)', fill: 'url(#btnGrad)' });
});
}
それは一種の作品です...
問題1両方の単語が最初に表示されます。不透明度により、アニメーションで変更できますが、初期属性として設定できません。テキストをまとめて削除したいのですが (aTextOn = visible、aTextOff = notVisible)、ここでは不透明度で解決します。私も試しました
$(aTextOff).text({fill: 'rgb(0,0,0,0.0)'});
それもうまくいきませんでした
問題 2 最初のクリックでしか機能しない... なぜこれが起こっているのか見当がつかない!
どんな助けでも大歓迎です!ありがとう
ps。グラデーションのスムーズな移行に関するヒントもあれば..それもクールです。