Javascript实用代码段-----纯Javascript写的飘动图片代码

原创于 2013-04-19 17:11:00 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

web开发同时被 2 个专栏收录

54 篇文章

订阅专栏

脚本语言

33 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页中图片浮动效果的方法，并解决了浮动图片被Flash内容遮挡的问题。通过设置浮动图片的z-index属性及调整Flash对象的wmode属性，实现了图片始终处于页面顶层的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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会显示在最上面而把浮动图片挡住，解决办法是：

简述：<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="963" height="233">
      <param name="movie" value="images/top.swf" />
      <param name="quality" value="high" />
<param name="wmode" value="opaque" />
      <embed src="images/top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="963" height="233"></embed>
    </object> 加入红色字符代码即可。

------------------------------

让Flash不档住浮动对象或层的关键参数：wmode=opaque

方法：

针对IE 在<object></object>内加上参数<param name="wmode" value="opaque" />

针对FF 在<embed />内加上参数wmode="opaque"