Question

我想在对象窗口上为每次点击定位一个圆圈svg。

我的功能正常，但我该怎样做才能使圆圈脉冲同步？

window.addEventListener("click",
    function(event){
        var myBody = document.getElementsByTagName("body")[0];
        var circleDiv = document.createElement("div");

        circleDiv.innerHTML = "<svg><circle cx='80' cy='80' r='20' stroke='black' fill='white' fill-opacity='0.0' /></svg>";
        circleDiv.style.position = "absolute";
        circleDiv.style.left = event.x+'px';
        circleDiv.style.top  = event.y+'px';

        var direction = 5;
        var radius = 20;

        window.setInterval(function()
        {
            radius = radius + direction;
            if(radius<10) direction = 5;
            if(radius>50) direction = -5;
            circleDiv.firstChild.firstChild.setAttribute("r",radius);
        },500);

        myBody.appendChild(circleDiv);

    }
);

Answer 1

当你添加圆圈时，它们会在数组var observe; if (window.attachEvent) { observe = function(element, event, handler) { element.attachEvent('on' + event, handler); }; } else { observe = function(element, event, handler) { element.addEventListener(event, handler, false); }; } var firstHeight = 0; var storeH = 0; var storeH2 = 0; function init() { var text = document.getElementById('cryTextArea'); function resize() { //console.log(text.scrollHeight); text.style.height = 'auto'; if (storeH != text.scrollHeight) { text.style.height = text.scrollHeight + 'px'; storeH = text.scrollHeight; if (storeH2 != storeH) { console.log("SENT->" + storeH); storeH2 = storeH; } } } /* 0-timeout to get the already changed text */ function delayedResize() { window.setTimeout(resize, 0); } observe(text, 'change', resize); observe(text, 'cut', delayedResize); observe(text, 'paste', delayedResize); observe(text, 'drop', delayedResize); observe(text, 'keydown', delayedResize); text.focus(); text.select(); resize(); } init();中捕获它们，只有一个计时器来更新它们的大小。注意我添加了处理程序在jquery文档就绪函数中。这是一种很好的做法。试试这个：

circles

您可能希望确保您创建的SVG使用var circles = []; var radius = 20; var direction = 5; jQuery(document).ready(function() { window.addEventListener("click", function(event){ var myBody = document.getElementsByTagName("body")[0]; var circleDiv = document.createElement("div"); circleDiv.innerHTML = "<svg><circle cx='80' cy='80' r='20' stroke='black' fill='white' fill-opacity='0.0' /></svg>"; circleDiv.style.position = "absolute"; circleDiv.style.left = event.x + 'px'; circleDiv.style.top = event.y + 'px'; circles.push(circleDiv); myBody.appendChild(circleDiv); }); window.setInterval(function() { radius = radius + direction; if(radius<10) direction = 5; if(radius>50) direction = -5; for(var i = 0; i < circles.length; i++){ circles[i].firstChild.firstChild.setAttribute("r",radius); } } ,500); });值来设置起始大小。

Answer 2

如果你通过'synchronus'谈论pusle，你必须按原样分割你的功能：

var direction = 1;
var radius = 20;


window.addEventListener("click",
    function(event){
        var myBody = document.getElementsByTagName("body")[0];
        var circleDiv = document.createElement("div");

        circleDiv.innerHTML = "<svg><circle cx='80' cy='80' r='" + radius + "' stroke='black' fill='white' fill-opacity='0.0' /></svg>";
        circleDiv.style.position = "absolute";
        circleDiv.style.left = event.x+'px';
        circleDiv.style.top  = event.y+'px';    

        myBody.appendChild(circleDiv);

    }
);


window.setInterval(function()
{
    var circles = document.getElementsByTagName('circle');
    radius = radius + direction;
    if(radius<10) direction = 1;
    if(radius>50) direction = -1;

    for(var i = 0; i < circles.length; i++) {
        circle = circles[i];
        circle.setAttribute("r",radius);
    }
 },20);

Here the jsFiddle

希望它有所帮助;）

SVG圈脉冲同步不起作用

2 个答案: