Javascript実用コードセグメント-----純粋なJavascriptの書いた翻るピクチャーのコード

3276 ワード

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var g_fDiv;      //  DIV
var l2r = 1;     //      
var t2b = 1;     //      

/*
 *   : element.style.xxx ，         。        ，  style.width       
*/
//    
function movePic(pic) {
    var xpos = parseInt(pic.style.left);
    var ypos = parseInt(pic.style.top);
    var picWidth = parseInt(pic.style.width);   //  DIV  
    var picHeight = parseInt(pic.style.height);
    var bodyWidth = document.body.clientWidth;	//     ，          ？
    var bodyHeight = document.body.clientHeight;

    var step = 1;
    if(l2r==1) { //    -> 
        xpos += step;
        if(xpos+picWidth>=bodyWidth) {
            l2r = 0;
            xpos -= step;
        }
    }else{
        xpos -= step;
        if(xpos<=0) {
            l2r = 1;
            xpos += step;
        }
    }
    if(t2b==1) { //    -> 
        ypos += step;
        if(ypos+picHeight>=bodyHeight) {
            t2b = 0;
            ypos -= step;
        }
    }else{
        ypos -= step;
        if(ypos<=0) {
            t2b = 1;
            ypos += step;
        }
    }

    pic.style.left = xpos + "px";
    pic.style.top = ypos + "px";
    setTimeout('movePic(g_fDiv)', 18); //            ，     
}
//      , picFile-      
function startFloat(picPath) {
    //      
    var fDiv = document.createElement("div");
	fDiv.setAttribute("style","z-index:99;background-color:red;");
    g_fDiv = fDiv;
    fDiv.innerHTML = '<img src="' + picPath + '" />';
    fDiv.style.display = "block";
    fDiv.style.position = "absolute";
	//fDiv.style.z-index = 999;  //     ！     ？
    fDiv.style.left = 0;
    fDiv.style.top = 0;
    fDiv.style.width = "400px";
    fDiv.style.height = "300px";
    document.body.appendChild(fDiv);

    //    
    movePic(fDiv);
}
//              , func--          
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function' ) {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

addLoadEvent(function(){ startFloat('http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif'); });
</script>
</head>
<body style="height:800px;">
</body>
</html>

また、flashは一番上に表示されますが、フローティング画像を隠します.解決方法は:
簡単に述べます.

赤い文字コードを入れればいいです.------------------flashをフロートオブジェクトや層のキーパラメータに固定させない:wmode=opaque方法:IEに対して

初期seajs