您好，欢迎来好库！ [ 请登录 ] [ 免费注册 ] 好库网首页 | 我的好库
好库网
大虾米的专栏
dengxm

最新文章

热门文章

让网页中的图片随屏幕滚动，并避免与文字重叠

发布者：dengxm
发布日期：2011-3-17 0:07:17   更新日期：2011-3-17 0:07:17
浏览次数：302
阅读次数：545
评分：4.80
介绍： 有时，想让一张图片随着屏幕滚动，有几种办法，一种是使用绝对定位的层来解决这个问题。 但这样容易导致图片与下面的文字发生重叠。特别是在不同的分辨率下，有的分辨率OK，而有的会发生重叠。 我也见过不少的网站，都有这种毛病。 本人的谷歌广告曾经采用过这种技术，结果被警告，说广告不允许与文章内容重叠。 有什么更好的办法吗？
正文：

有时，想让一张图片随着屏幕滚动，有几种办法，一种是使用绝对定位的层来解决这个问题。
但这样容易导致图片与下面的文字发生重叠。特别是在不同的分辨率下，有的分辨率OK，而有的会发生重叠。

我也见过不少的网站，都有这种毛病。

本人的谷歌广告曾经采用过这种技术，结果被警告，说广告不允许与文章内容重叠。

有什么更好的办法吗？

我的新办法是采用相对定位法，但是在图片上面，放一张透明的GIF图片，通过根据滚动条的位置，随时调整透明GIF图的高度，达到设置所展示图片位置的目的。

上代码

<td width=170 valign=top cellspacing=5>
<img id="img_t" src="img/t.gif" height=1 width=4>
<img src="img/mypic.jpg">
</td>

其中t.gif是一张透明的gif图。mypic是我要浮动显示的图片。

<script type="text/javascript">
function scrollImg(){
    var img_t=document.getElementById("img_t");

    var posX,posY;
    if (window.innerHeight) {
        posX = window.pageXOffset;
        posY = window.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        posX = document.documentElement.scrollLeft;
        posY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        posX = document.body.scrollLeft;
        posY = document.body.scrollTop;
    }
    
    if( posY>document.body.clientHeight-660 )
        posY = document.body.clientHeight-660;
    
    if( posY<60 )
    {
        posY = 1;
        img_t.style.display ="none";
    }
    else
        img_t.style.display ="block";
     
    img_t.height=posY;
    
}
setInterval("scrollImg()",120);
</script>


这个代码的意思是，每120ms，就检查一次滚动条的位置，并修改透明图的高度。



免责声明：好库网所展示的信息由买卖双方自行提供，其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证，并不承担任何法律责任。