Question

我有一个隐藏显示属性的段落元素。我将每个段落的单词拆分并放入单独的span元素中。然后我想给它们一些效果，这些效果涉及每个单词将来自不同的位置并坐在正确的位置但是这里的每个单词都没有显示出这样的效果，而是从较低的位置到较高的位置。我可以达到我希望的效果吗？请帮帮我!!!

jsfiddle

<html>
<head>
<style>
#myp{
display:none;

}
</style>
</head>
<body>
<h3>if you miss the action ,please reload the page</h3>
<p id='myp'>the earth moves round the sun</p>
<script>
var para;
var para_array=[];
var string;
var splits;
var ids=[];
var m;
var time=10;
k=50;

function init(){

  para=document.getElementById('myp');
  string=para.innerHTML.toString();
  splits=string.split(' ');

  for(i=0;i<splits.length;i++){
    para_array.push(splits[i]);

  }

  for(i=0;i<para_array.length;i++){
    m=document.createElement('span');
    var id='span'+i;
    m.setAttribute('id',id);
    var left=window.innerWidth-(Math.floor(Math.round()*900)+800);
    var top=window.innerHeight-(Math.floor(Math.round()*400)+50);

    ids.push(m.id);
    var style='position:absolute;left:'+left+';top:'+top+';color:red;margin-right:30px;opacity:0;display:block;transition:all 1s ease-in-out;'
    m.setAttribute('style',style);
    m.innerHTML=para_array[i];
    document.body.appendChild(m);
    k+=70;
  }

  var t=setTimeout(function(){
    for(i=0;i<para_array.length;i++){

      var g=document.getElementById('span'+i);
      g.style.top="200px";
      g.style.left=150+time+"px";
      g.style.opacity=1;

      g.style.transform="rotate(360deg)";
      time+=50;
    }
  },100);
}

window.onload=init;
</script>
</body>
</html>

Answer 1

您忘记将'px'附加到您的左上角和左上角：

var style='position:absolute;left:'+left+';top:'+top+';color:red;margin-right:30px;opacity:0;display:block;transition:all 1s ease-in-out;'

应该是：

var style='position:absolute;left:'+left+'px;top:'+top+'px;color:red;margin-right:30px;opacity:0;display:block;transition:all 1s ease-in-out;'

另外，我相信您希望Math.random代替Math.round

更新小提琴：http://jsfiddle.net/gaurav5430/R92f9/1/

Answer 2

gaurav5430已经回答了你的问题。我只是想为你提供一些清理过的代码。还改变了你的jsfiddle以使单词均匀分布。

http://jsfiddle.net/R92f9/2/

var para = document.getElementById('myp');

function init(target){
    var words = para.innerHTML.toString().split(' ');
    var spans = [];
    var left = window.innerWidth-(Math.floor(Math.random()*900)+800);
    var top = 1000-(Math.floor(Math.random()*10)+50);
    var style='position:absolute; left:'+left+'px; top:'+top+'px; color:red; margin-right:30px; opacity:0; display:block; transition:all 1s ease-in-out;';
    var wordSpacing = 10;

    for(var i=0; i<words.length; i++){

        var span = document.createElement('span');

        span.setAttribute('style', style);
        span.innerHTML = words[i];
        document.body.appendChild(span);

        spans.push(span);

    }

    var t=setTimeout(function(){

        var currentLeft = 150;

        for(var i=0; i<spans.length; i++){
            var span = spans[i];

            span.style.top       = "200px";
            span.style.left      = currentLeft+"px";
            span.style.opacity   = 1;
            span.style.transform = "rotate(360deg)";

            currentLeft += span.offsetWidth + wordSpacing;

        }

    },1000);
}

window.onload=function(){init(para, 10);};

拆分段落的单词并将单个单词放在单独的span元素中并为它们设置动画

2 个答案: