您的位置：首页 > Web前端 > JavaScript

js实现图片浮动

2015-08-12 16:04 736 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航