Javascript 用Raphael JS制作可点击对象_Javascript_Jquery_Html_Css_Raphael

Javascript 用Raphael JS制作可点击对象

javascript jquery html css

Javascript 用Raphael JS制作可点击对象,javascript,jquery,html,css,raphael,Javascript,Jquery,Html,Css,Raphael,我已经创建了一个3d外观的圆圈，希望它可以点击并显示其数据。但我似乎无法让它发挥作用。有人能帮我弄清楚吗？？？我尝试这样做的代码接近底部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" conte

我已经创建了一个3d外观的圆圈，希望它可以点击并显示其数据。但我似乎无法让它发挥作用。有人能帮我弄清楚吗？？？我尝试这样做的代码接近底部

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Raphaël · Ball</title>
    <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
    <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
    <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        Raphael.fn.ball = function (x, y, r, hue) {
            hue = hue || 0;
            return this.set(
                //this part is the drop shadow
                this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
                //this part is the top part of the circle
                this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
                //this is the inner glow part from the top
                this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
            );
        };
        window.onload = function () {
            var R = Raphael("holder"), x = 300, y = 100, r = 100;
            //I cant tell what numbers are passed into here?????
            R.ball(x, y, r, Math.random()).data("i", i).click(function () {
            alert(this.data("i"));
         });
        };
    </script>
    </head>
    <body>
        <div id="holder"></div>
    </body>
</html>


拉斐尔·鲍尔
拉斐尔·fn·鲍尔=函数（x，y，r，色调）{
色调=色调| | 0；
把这个还给我(
//这部分是阴影部分
椭圆（x，y+r-r/5，r，r/2）.attr（{fill:“rhsb”（“色调+”，1.25）-hsb（“+色调+”，1.25）”），笔划：“无”，不透明度：0}），
//这部分是圆的顶部
椭圆（x，y，r，r）.attr（{fill:“r（.5，.9）hsb（“+hue+”，1，.75）-hsb（“+hue+”，.5，.25）”），笔划：“无”}），
//这是顶部的内部发光部分
椭圆（x，y，r-r/5，r-r/20）.attr（{笔划：“无”，填充：“r（.5，.1）#ccc-#ccc”，不透明度：0}）
);
};
window.onload=函数（）{
var R=Raphael（“持有人”），x=300，y=100，R=100；
//我不知道这里传的是什么号码？？？？？
R.ball（x，y，R，Math.random（））。数据（“i”，i）。单击（函数（）{
警报（本数据（“i”）；
});
};

如果我在这里出错，我道歉。。。但这段代码的一个示例对我来说很好。。。。不幸的是，我似乎无法在您传递给

数据（'i'，i）

的代码中找到

变量i

。。。。声明

var i=something

或尝试使用此数据（'i'，'Hello'）让您知道它是有效的。。。希望能有帮助

你应该试试我的建议。。。。。您只需在代码中声明一个var i。。。。就这样。。。。