好库网 好库网首页 | 我的好库
大虾米的专栏

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

发布者:dengxm
发布日期:2011/3/17 0:07:17   更新日期:2011/3/17 0:07:17
阅读次数:3338
评分: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,就检查一次滚动条的位置,并修改透明图的高度。


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

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