0

丸みを帯びた境界線を持つ div から円を作成しました。jquery ui を使用して、この div をドラッグ可能にしました。divを左にドラッグするほど不透明度が低くなるようにする方法を知りたいです。すでにコーディングしたもののスニペットを次に示します。

<script type="text/javascript" language="javascript">

$(function() {
    $( "#circle" ).draggable();
  });

  var circ = document.getElementById('circle');
  var num = circ.style.left/1000;



</script>
</head>

<body>
<div id="circle"></div>


<script type="text/javascript">circ.style.opacity = num;</script>
</body>
</html>

circ.style.opacity = num; を置くことでこれを機能させることができることを私は知っています。関数に変換してその関数を呼び出しますが、自動的に変更する方法があるかどうか疑問に思っていましたか? ご協力いただきありがとうございます。

4

1 に答える 1

1

drag他の人がすでに示唆しているように、コールバックで不透明度を計算し、不透明度を設定するだけです。dragコールバックは、ドラッグが停止するまで継続的に呼び出されます。これが「ライブ」更新のしくみです。

例：

$('#circle').draggable({
    "drag": function (e, ui) {
        var percentOpacity = someVal; //compute this however you like
        $(this).css('opacity', percentOpacity);
    }
});

ワーキングデモ：http://jsfiddle.net/gzA8w/

実際のデモでは、要素がドキュメントの右端から何ピクセル離れているかの関数として不透明度を単純に計算しています。左に行くほど透明になります。

于 2013-01-24T21:49:52.933 に答える