javascript - 使用 .css 文件中采用 CSS 属性的 JQuery 创建元素

Question

我的代码如下所示：

样式.css

#div1{
 height: 1280;
 width: 800;
 top: -5000px;
 position: absolute;

}
#div2{
    height: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    position: absolute;
    display: none;

}
#div3{
    height: 100%;
    width: 100%;
    background: white;
    position: absolute;
    display: none;
}
#ball,
#ball1,
#ball2,
#ball3,
#ball4,
#ball5,
#ball6,
#ball7,
#ball8
{
    height: 100px;
    width: 100px;
    position: absolute;
    display: none;
}

游戏.js

document.addEventListener("deviceready", onDeviceReady, true); 
function onDeviceReady(){
    //jQuery.fx.interval = 120;
    $("#div1").animate({top:'0px'});
    $("#div2").delay(1000).fadeIn(500);
    $("#div2").animate({height:'75%',width:'75%',top:'12.5%',left:'12.5%'});
    $("#div2").delay(1000).animate({left:'20%'},50).animate({left:'2.5%'},50).animate({left:'12.5%'},50);
    $("#div3").delay(2000).fadeIn(500).fadeOut(500);


//#ball turn orbit around the fixed pixel
var angle = 0;     // starting position (degrees)
var angle1 = 45;
var angle2 = 90;
var angle3 = 135;
var angle4 = 180;
var angle5 = 225;
var angle6 = 270;
var angle7 = 315;
var angle8 = 0;

var distance = 250; // distance of b from a
var speed = 300;    // revolution speed in degrees per second
var rate  = 10;    // refresh rate in ms

function f() {

    var t = 450 + (distance * Math.sin(angle * Math.PI/180.0));
    var l = 350 + (distance * Math.cos(angle * Math.PI/180.0));

    var t1 = 450 + (distance * Math.sin(angle1 * Math.PI/180.0));
    var l1 = 350 + (distance * Math.cos(angle1 * Math.PI/180.0));

    var t2 = 450 + (distance * Math.sin(angle2 * Math.PI/180.0));
    var l2 = 350 + (distance * Math.cos(angle2 * Math.PI/180.0));

    var t3 = 450 + (distance * Math.sin(angle3 * Math.PI/180.0));
    var l3 = 350 + (distance * Math.cos(angle3 * Math.PI/180.0));

    var t4 = 450 + (distance * Math.sin(angle4 * Math.PI/180.0));
    var l4 = 350 + (distance * Math.cos(angle4 * Math.PI/180.0));

    var t5 = 450 + (distance * Math.sin(angle5 * Math.PI/180.0));
    var l5 = 350 + (distance * Math.cos(angle5 * Math.PI/180.0));

    var t6 = 450 + (distance * Math.sin(angle6 * Math.PI/180.0));
    var l6 = 350 + (distance * Math.cos(angle6 * Math.PI/180.0));

    var t7 = 450 + (distance * Math.sin(angle7 * Math.PI/180.0));
    var l7 = 350 + (distance * Math.cos(angle7 * Math.PI/180.0));

    var t8 = 450 + (50 * Math.sin(angle8 * Math.PI/180.0));
    var l8 = 350 + (50 * Math.cos(angle8 * Math.PI/180.0));

    $("#ball").css({
        top: t,        
        left: l
    });

    angle += (speed * (rate/1000)) % 360;

    $("#ball1").css({
        top: t1,        
        left: l1
    });

    angle1 += (speed * (rate/1000)) % 360;

    $("#ball2").css({
        top: t2,        
        left: l2
    });

    angle2 += (speed * (rate/1000)) % 360;

    $("#ball3").css({
        top: t3,        
        left: l3
    });

    angle3 += (speed * (rate/1000)) % 360;

    $("#ball4").css({
        top: t4,        
        left: l4
    });

    angle4 += (speed * (rate/1000)) % 360;

    $("#ball5").css({
        top: t5,        
        left: l5
    });

    angle5 += (speed * (rate/1000)) % 360;

    $("#ball6").css({
        top: t6,        
        left: l6
    });

    angle6 += (speed * (rate/1000)) % 360;

    $("#ball7").css({
        top: t7,        
        left: l7
    });

    angle7 += (speed * (rate/1000)) % 360;

    $("#ball8").css({
        top: t8,        
        left: l8
    });

    angle8 += (speed * (rate/1000)) % 360;

}

setInterval(f, rate);

$("#ball").delay(4000).show(100);
$("#ball1").delay(4000).show(100);
$("#ball2").delay(4000).show(100);
$("#ball3").delay(4000).show(100);
$("#ball4").delay(4000).show(100);
$("#ball5").delay(4000).show(100);
$("#ball6").delay(4000).show(100);
$("#ball7").delay(4000).show(100);
$("#ball7").delay(6000).remove();
$("#ball6").delay(6000).remove();
$("#div1").append("<img src='pix/s1.png' id='ball8' />").show(100);

};

abc.html

<html>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/android2_1.js" type = "text/javascript"></script>
<script src="js/jquery.gamequery-0.7.0.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<head>
</head>
<body onload="onDeviceReady()">
<div id="div1">
<img src="pix/bg1.jpg" id="bgpic" style="height: 100%; width: 100%;" />
<img src="pix/item1.png" id="div2" />
<img src="pix/s1.png" id="ball" />
<img src="pix/s1.png" id="ball1" />
<img src="pix/s1.png" id="ball2" />
<img src="pix/s1.png" id="ball3" />
<img src="pix/s1.png" id="ball4" />
<img src="pix/s1.png" id="ball5" />
<img src="pix/s1.png" id="ball6" />
<img src="pix/s1.png" id="ball7" />
</div>
<div id="div3"></div>
</body>
</html>

但代码似乎不起作用。我确实尝试用谷歌搜索它。我得到的是 .addClass() 这也不起作用。

希望你们能在这方面帮助我。提前致谢。

伙计们，我的坏。

我发现了我的问题。

而不是这个，

$("#div1").append("<img src='pix/s1.png' id='ball8' />").show(100);

我应该写这个

$("#div1").append("<img src='pix/s1.png' id='ball8' />");
$("#ball8").show(100);

score 1 · Accepted Answer

您将链接包含在html而不是head标记中。

更改您的 html 文件，如下所示：

<html>

<head>
   <!-- All plugin references should be inside head tag -->
   <!-- Added -->
   <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

   <!-- Your plugins here -->
   <script src="js/jquery.min.js"></script>
   <script src="js/jquery-ui.min.js" type="text/javascript"></script>
   <script src="js/android2_1.js" type = "text/javascript"></script>
   <script src="js/jquery.gamequery-0.7.0.js" type="text/javascript"></script>
   <link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body onload="onDeviceReady()">
   <div id="div1">
     <img src="pix/bg1.jpg" id="bgpic" style="height: 100%; width: 100%;" />
     <img src="pix/item1.png" id="div2" />
     <img src="pix/s1.png" id="ball" />
     <img src="pix/s1.png" id="ball1" />
     <img src="pix/s1.png" id="ball2" />
     <img src="pix/s1.png" id="ball3" />
     <img src="pix/s1.png" id="ball4" />
     <img src="pix/s1.png" id="ball5" />
     <img src="pix/s1.png" id="ball6" />
     <img src="pix/s1.png" id="ball7" />
  </div>
  <div id="div3"></div>
</body>
</html>

更新

setInterval(f, rate);
$("#div1").append("<img src='pix/s1.png' id='ball8' />");
$("#ball").delay(4000).show(100);
$("#ball1").delay(4000).show(100);
$("#ball2").delay(4000).show(100);
$("#ball3").delay(4000).show(100);
$("#ball4").delay(4000).show(100);
$("#ball5").delay(4000).show(100);
$("#ball6").delay(4000).show(100);
$("#ball7").delay(4000).show(100);
$("#ball8").delay(4000).show(100);
$("#ball7").delay(6000).remove();
$("#ball6").delay(6000).remove();

score 0 · Accepted Answer

错误只是新元素没有应用样式吗？正在创建元素，只是样式不正确？

如果是这样，可能是因为您使用的是 ID 而不是类来分配样式。样式表在脚本之前被解释。应用于 id 的样式将被忽略，因为您所定位的元素在解释 CSS 时不存在。如果您将 CSS 选择器从更改#ball8为.ball8，然后将图像的 id 更改为一个类，它可能会起作用。如果您确实需要该图像具有“ball8” id，那么只需为样式使用不同的类。

score 0 · Accepted Answer

您使用 display none 作为图像。你必须在 jquery 中显示图像。试试这个代码：

游戏.js

$('<img />', {
   id:'ball8'
}).appendTo('#div1').attr('src', 'pix/s1.png').show();

score 0 · Accepted Answer

您可以使用 addClass 轻松完成此操作，但它不起作用，因为您获得的是 Id 而不是类。

试试这个

.ball8 { height: 100px;width: 100px; position: absolute; display: none; }

game.js

$("#div1").addClass('ball8');

并且不要忘记使用以下内容使其可见：

$('.ball8').show()

javascript - 使用 .css 文件中采用 CSS 属性的 JQuery 创建元素

4 回答 4

Related

Reference