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 回答