JavaScript - 浮动广告窗口实例
来源:互联网 发布:oracle sql developer 编辑:程序博客网 时间:2024/06/09 06:38
<!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>
<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>
0 0
- JavaScript - 浮动广告窗口实例
- JavaScript - 浮动广告窗口实例
- JavaScript浮动广告窗口实例(未测试)
- javascript浮动广告
- javaScript实现浮动广告
- JavaScript-浮动广告
- JavaScript-浮动广告-兼容
- JavaScript对联式浮动广告
- JavaScript浮动广告
- Android浮动窗口实例
- 浮动窗口-javascript
- javascript实现浮动窗口
- javascript 浮动广告 代码 类
- javascript浮动广告的实现
- Javascript window 对象 + 浮动广告
- JavaScript特效实例004-自动关闭的广告窗口
- 桌面浮动窗口(类恶意广告)
- javascript 弹出浮动窗口二
- 用python连接oracle(11g)数据库
- OC各种数据类型之间的转换方法
- android touch事件的分发和消费机制
- iOS 检测版本更新
- 把文件夹下的文件按修改时间先后顺序排序
- JavaScript - 浮动广告窗口实例
- Android对话框总结
- Android之Looper-Handler机制
- C语言函数手册 分类用途
- Groovy学习第一篇:什么是Groovy?
- liunx下C语言进行增添查删处理数据库MySQL
- 终于实现了!!用RF遍历子节点
- K-means算法
- C语言使用技巧