如何实现滚动条滚动图片位置不变?

发布时间:2020-02-21编辑:脚本学堂
我们最常的就是广告图片,无论滚动条怎么变动图片始终停在一个位置,这种效果是怎么实现的呢?本文举一实例给大家来说明这个问题,需要的参考一下。

例子如下:
 

复制代码 代码示例:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<title>始终固定在右下角的图片广告丨芯晴网页特效丨CsrCode.Cn</title>
5.<meta http-equiv="content-type" content="text/html;charset=gb2312">
6.<!--把下面代码加到<head>与</head>之间-->
7.<style type="text/css">
8.body{height:1000px;}
9.img{border:0px;}
10.#haoetv{
11.        position:fixed!important;
12.        position:relative;
13.        left:50px;
14.        bottom:10px;
15.        top:expression(offsetParent.scrollTop+offsetParent.clientHeight-150);
16.        z-index:99;
17.        text-align:left
18.}
19.#close{
20.        position:fixed!important;
21.        position:absolute;
22.        right:0;
23.        bottom:0;
24.        top:expression(offsetParent.scrollTop+offsetParent.clientHeight-149);
25.        cursor:pointer;
26.}
27.</style>
28.</head>
29.<body>
30.<!--把下面代码加到<body>与</body>之间-->
31.<div id="haoetv">
32.    <div>
33.        <a href="#" target="_blank">
34.            <img src="http://www.CsrCode.cn/html/txdm_2/images/20100831/tc250x150.jpg" alt="海西最美笑脸征集活动">
35.        </a>
36.    </div>
37.     <div id="close" style="z-index:999;float:right;margin:10px 10px 0 0;height:140px;">
38.            <img src="http://www.CsrCode.cn/html/txdm_2/images/20100831/btn_close.gif" onClick="this.parentNode.parentNode.style.display='none';">
39.     </div>
40.</div>
41.</body>
42.</html>