Javascript按源分层

时间:2015-05-21 14:19:15

标签: javascript html css

我想创建一个像Layer-ads这样的图层,所以我创建了一个代码,如果我打开脚本本身但是如果我想按源打开它就无法工作

图层应从左侧200像素滑入页面

从源代码中获取它的代码

<script language="JavaScript" src="http://www.domain.de/content/entwicklung/layer.php" type="text/javascript"></script>

代码本身

        var left=-200;
        var intervalid;
        function changePos(id){
            document.getElementById(id).style.left=left;
        } 
        function moveIn(id){
            if(left>=100){ 
                clearInterval(intervalid);
            } 
            left+=5; 
            changePos(id); 
        } 
        function close(id){
            document.getElementById(id).style.left=-900; 
        } 
        function startInterval(id){
            intervalid=setInterval("moveIn('"+id+"')",10);
        } 


document.write ("<body onload='startInterval('Layer1')'>"); 

document.write ("<div style='position: absolute;left: -200px;top: 50px;width: 800px;height: 600px;border: 1px solid black;background-color: #0071C1;'>");

document.write ("<div style='width: 795px;height: 23px;background-color: lightgrey;border-bottom: 1px solid black;padding-left: 5px;padding-top: 2px;font-family: lucida grande,tahoma,verdana,arial,sans-serif;font-size: 13px; '>");

document.write ("Sponsorenanzeige von"); 

document.write ("<a href='http://www.domain.de' target='_blank' title='title' alt='alt'>domain.de</a>");

document.write ("<a href='javascript:close('Layer1')' style='float: right; border: 1px solid black; margin-right: 5px; margin-top: 3px;' title='Fenster schließen' alt='close'>");

document.write ("<img src='domain.de/images/close.png'></a>");

document.write ("</div>");

document.write ("</div>");

document.write ("</body>");

我已经知道我必须删除javascript标签,如果我想通过源加载..所以我得到div但它没有移动,因为我想

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

添加了id =&#39; Layer1&#39;包装div,并在注入html时调用setInterval(&#39; Layer1&#39;),此解决方案不完整,您需要设置计时器来检查DOM在DOM中是否被定义并使其与浏览器兼容:)< / p>

 var left=-200;
            var intervalid;
            function changePos(id){
                document.getElementById(id).style.left=left;
            } 
            function moveIn(id){
                if(left>=100){ 
                    clearInterval(intervalid);
                } 
                left+=5; 
                changePos(id); 
            } 
            function close(id){
                document.getElementById(id).style.left=-900; 
            } 
            function startInterval(id){
                intervalid=setInterval("moveIn('"+id+"')",10);
            } 


    document.write ("<div id='Layer1' style='position: absolute;left: -200px;top: 50px;width: 800px;height: 600px;border: 1px solid black;background-color: #0071C1;'>");

    document.write ("<div style='width: 795px;height: 23px;background-color: lightgrey;border-bottom: 1px solid black;padding-left: 5px;padding-top: 2px;font-family: lucida grande,tahoma,verdana,arial,sans-serif;font-size: 13px; '>");

    document.write ("Sponsorenanzeige von"); 

    document.write ("<a href='http://www.domain.de' target='_blank' title='title' alt='alt'>domain.de</a>");

    document.write ("<a href='javascript:close('Layer1')' style='float: right; border: 1px solid black; margin-right: 5px; margin-top: 3px;' title='Fenster schließen' alt='close'>");

    document.write ("<img src='domain.de/images/close.png'></a>");

    document.write ("</div>");

    document.write ("</div>");

    document.write ("</body>");

    startInterval('Layer1');