<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现图片轮播</title>
<style type="text/css">
#main{width:1024px; margin:20px auto;text-align:center;}
#adv{width:200px;height:400px;position:absolute;top:10px;left:20px;}
a {border:1px solid gray;background-color:green; position:absolute;top:0px;left:150px;color:grap;}
</style>
<script type="text/javascript">
var localX;
var localY;
//预加载 js的执行顺序是自上而下的，所以要用预加载
onload = function()
{
var adv = $("#adv");
//adv.style.top adv.style.left 只能取到行内的样式
localX = document.defaultView.getComputedStyle(adv,null).left; //可以取到所有的样式
localY = document.defaultView.getComputedStyle(adv,null).top;
}
//添加滚动事件
onscroll = function()
{
//取到滚动距顶部的距离 采用容错处理 ，2中方法
var scrollX = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:
document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop ? document.documentElement.scrollTop:
document.body.scrollTop;
//要浮动的图片的距离
$("#adv").style.left = scrollX +parseInt(localX)+"px";
$("#adv").style.top = scrollY +parseInt(localY)+"px";
}
//关闭浮动广告的函数
function colseAdv()
{
document.body.removeChild($("#adv"));
return false;
}
//通过getElement对象的方法进行封装
//要求：id使用#前缀 class使用.前缀 标签不用
function $(name)
{
if(name.charAt(0) == '#')
{
return document.getElementById(name.substring(1));
}
else if(name.charAt(0) == '.')
{
return document.getElementsByClassName(name.substring(1));
}
else
{
return document.getElementsByTagName(name);
}
}
</script>
</head>
<body>
<div id = 'main'>
<img src= '../images/top.jpg' />
<img src= '../images/content1.jpg' />
<img src= '../images/content2.jpg' />
<img src ='../images/foot.jpg' />
</div>
<div id = 'adv'>
<!-- 要浮动的图片 -->
<img src="../images/left.jpg"/>
<a href = "#" onclick = "return colseAdv()">关闭</a>
</div>
</body>
</html>
3835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
