实现浮动广告的代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var initTop=0;
function init(){
initTop=document.getElementById("picLayer").style.pixelTop;
}
function move(){
document.getElementById("picLayer").style.pixelTop=initTop+document.body.scrollTop;
document.getElementById("closeLayer").style.pixelTop=initTop+document.body.scrollTop;
}
function closeaa(){
document.getElementById("picLayer").style.display="none";
document.getElementById("closeLayer").style.display="none";
}
window.onscroll=move;
</script>
</head>
<body onLoad="init()">
<img src="Moon flower.jpg" />
<div id="closeLayer" style="position:absolute;width:5px;height:14px;z-index:2;left: 266px;top: 51px;">
<img src="close.jpg" width="13" height="13" onClick="closeaa()" ></div>
<div id="picLayer" style="position:absolute;width:200px;height:115px;z-index:1;left: 40px;top: 47px;">
<img src="so.gif" alt="杜宾" width="240" height="320" />
</div>
</body>
</html>
注意:
1 如果是用的dreamweaver的话必须把<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句话删除了,不然无法实现这个浮动的效果呀!
2 window.onscroll 中的s必须小写,但是标签中的onScroll中的S必须大写!
3 z-index :1; z-index:2; 这表示层的堆又叠次序,1在下面,2在上面.即先显示2再显示1/
更多相关文章
- PySide-QtWebKit: CSS font-family没有效果
- Android自定义View底部连续圆环效果
- Android 5.X Activity过渡动画，以及漂亮的共享元素效果
- Android Scroll分析（一）——滑动效果是如何产生的
- Android之仿美拍主要菜单滑动反弹效果
- 默认墨迹天气 下雪效果
- Android使用SVG矢量图打造酷炫动画效果
- Button点击缩放动画效果
- Android 实现多页界面左右滑动切换效果之进阶