Question

如何使图片飞到浏览器窗口然后淡出。我需要从左侧将一张图片拖入浏览器窗口，然后淡出。然后下一张图片。我有五张照片。我需要他们一个接一个地做这个，一遍又一遍。接下来是我的代码：它不能正常工作。方法1：五张五张图片，ID为“＃Slogan0”，“＃Slogan1”，...等。一开始，“左”是“-1000px”，第一个是“显示”为“块”，其他为“无”，所以我可以改变它们使它们消失。“moveNext”是改变图片

var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){ 
moveNext();
}

function moveNext(){
cf.moveTo("next");  

if($(sloganid).css("display") == "block") {

    slogannum = (slogannum+1)%5;

    $(sloganid).css("display","none");
    sloganid=sloganidPre+slogannum;
    $(sloganid).css("display","block");
    $(sloganid).animate({left:"30px"});
        $(sloganid).css("opacity","0.2");
}

setTimeout(moveNext, 1500);
}

方法2：为父节点创建新元素。

var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;

window.onload = function(){ 

$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\"  /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});

moveNext();
}

function moveNext(){

cf.moveTo("next"); 
$("#sloganparent:first-child").empty();

slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;

$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\"  /></div>");

var i=0;
for (i=-1000; i<30; i++) {
    document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);                     
}

Jquery似乎没有得到动态创建的元素。两种方法都不能正常工作。无论如何，我只是想知道如何部署图片，因为titile说。任何方法都没问题。请你考虑一下。

如何使图片飞入浏览器窗口然后淡出？

0 个答案: