JavaScript浮动广告窗口实例
2018-07-20 来源：open-open
浮动广告窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浮动广告窗口</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background:#f00;
}
#content{
text-align:center;
}
#adv{
position:absolute;
top:80px;
left:60px;
}
#close{
position:absolute;
top:80px;
left:164px;
}
</style>
<script type="text/javascript">
var advObj;
var advTop;
var advLeft;
var closeObj;
var closeTop;
var closeLeft;
//获取广告的初始位置
function place(){
advObj=$("adv");
closeObj=$("close");
if(advObj.currentStyle){
advTop=advObj.currentStyle.top;
advLeft=advObj.currentStyle.left;
closeTop=closeObj.currentStyle.top;
closeLeft=closeObj.currentStyle.left;
}else{
advTop=parseInt(document.defaultView.getComputedStyle(advObj,null).top);
advLeft=parseInt(document.defaultView.getComputedStyle(advObj,null).left);
closeTop=parseInt(document.defaultView.getComputedStyle(closeObj,null).top);
closeLeft=parseInt(document.defaultView.getComputedStyle(closeObj,null).left);
}
}
window.onload=function(){
//var width=$("mydiv").style.width;
//获取使用内嵌样式修饰的属性
/* if($("mydiv").currentStyle){//判断客户端使得的浏览器
var width=$("mydiv").currentStyle.width;
}else{
var width=document.defaultView.getComputedStyle($("mydiv"),null).width; //第二个参数表示伪元素，一般都设置为Null
}
alert(width);*/
place();
$("close").onclick=function(){
$("close").style.display="none";
$("adv").style.display="none";
};
};
function scroll(){
advObj.style.top=parseInt(advTop)+parseInt(document.documentElement.scrollTop)+"px";
advObj.style.left=parseInt(advLeft)+parseInt(document.documentElement.scrollLeft)+"px";
closeObj.style.top=parseInt(closeTop)+parseInt(document.documentElement.scrollTop)+"px";
closeObj.style.left=parseInt(closeLeft)+parseInt(document.documentElement.scrollLeft)+"px";
}
window.onscroll=function(){
scroll();
};
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<!--<div id="mydiv">呵呵</div>-->
<div id="content"><img src="images/contentpic.jpg" /></div>
<div id="adv"><img src="images/advpic.jpg" /></div>
<div id="close"><img src="images/close.jpg" /></div>
</body>
</html>
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐