<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址--><a href="/" target="_blank">
<!--图片地址--><img src="/default/logo.gif" border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("codefans_net")
function float() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)}
</script>
</body>
</html>
</body>
</html>
去掉第一行就没有问题了,但是去掉第一行放在其他网页里版面就乱了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址--><a href="/" target="_blank">
<!--图片地址--><img src="/default/logo.gif" border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("codefans_net")
function float() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)}
</script>
</body>
</html>
</body>
</html>
去掉第一行就没有问题了,但是去掉第一行放在其他网页里版面就乱了
解决方案 »
- JavaScript能调用 framework 2.0
- DOM4J怎么导入包
- 请教下Eclipse写JS建立新项目,想有一个wizard直接生成默认的目录结构、通用库以及基础页面之类的,应该怎么写?
- 急!代码调不出来了
- 一个多选下拉框,选中其中某一下,我想通过一个按钮,可以把选中的项移动到最顶部。
- ActiveXObject("Scripting.FileSystemObject")提示automation 服务器不能创建对象
- 如何用Javascript判断输入是否是日期格式
- 请问JAVASCRIPT能访问客户端的文件吗?
- 如何在javascript的函数中,调用另外一个联接
- 端口号冲突,修改端口号后,导致资源找不到,报404错误
- js中如何将本站自动添加到可信任站点?
- 有誰能解釋這段代碼的運行結果嗎?
要加单位的obj.style.left = x + document.body.scrollLeft + "px"
http://blog.csdn.net/net_lover/archive/2006/12/29/1467390.aspx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>漂浮广告</title>
<script>
var x = 50,y = 60;
var xin = true, yin = true;
var step = 1;
var delay = 10;
var obj;
function float() {
var L=T=0;
var R= document.body.clientWidth-obj.offsetWidth;
var B = document.body.clientHeight-obj.offsetHeight;
obj.style.left = x + document.body.scrollLeft + "px";
obj.style.top = y + document.body.scrollTop + "px";
x = x + step*(xin?1:-1);
if (x < L) { xin = true; x = L;}
if (x > R){ xin = false; x = R;}
y = y + step*(yin?1:-1);
if (y < T) { yin = true; y = T; }
if (y > B) { yin = false; y = B; }
}
window.onload = function () {
obj = document.getElementById("codefans_net");
var itl= setInterval("float()", delay);
obj.onmouseover = function(){clearInterval(itl);}
obj.onmouseout = function(){itl=setInterval("float()", delay);}
};
</script>
</head>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址-->
<a href="/" target="_blank">
<!--图片地址--><img src="/default/logo.gif" border="0">
</a>
</div>
</body>
</html>
不同的DOCTYPE会影响到你的css和js的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
才能正常显示,所以不能去掉这一句,在不去掉这一句的基础上漂浮广告是直接飘到网页下面了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
<p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
<p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
<div id="codefans_net" style="position:absolute;left:0;top:0;border:1px solid red;height:50px;width:50px">
测试
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 1var obj=document.getElementById("codefans_net")
function float() {
L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
if (window.console) window.console.log("R = " + R + " B = " + B)
obj.style.left = x + document.body.scrollLeft + "px"
obj.style.top = y + document.body.scrollTop + "px"
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)} </script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="codefans_net" style="position:absolute;left:0;top:0;border:1px solid red;height:50px;width:50px">
测试
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 1
var obj=document.getElementById("codefans_net")
function w()
{
var width=0;
if(document.documentElement && document.documentElement.clientWidth){
width=document.documentElement.clientWidth;}
else if(document.body && document.body.clientWidth){
width=document.body.clientWidth;}
else if(window.innerWidth){
width=window.innerWidth-18;}
return width;
}function h()
{
var height=0;
if(window.innerHeight){
height=window.innerHeight-18;}
else if(document.documentElement&&document.documentElement.clientHeight){
height=document.documentElement.clientHeight;}
else if(document.body&&document.body.clientHeight){
height=document.body.clientHeight;}
return height;
}function float() {
L=T=0
var R= w()-obj.offsetWidth
var B = h()-obj.offsetHeight
if (window.console) window.console.log("R = " + R + " B = " + B)
obj.style.left = x + document.body.scrollLeft + "px"
obj.style.top = y + document.body.scrollTop + "px"
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)} </script>
</body>
</html>
你要判断它的方向
你定义个全局变量
var curLef = "left";
var curTop ="top";
然后在你的自定义函数中
判断
如果当前位置pixelLeft小于0,
curLef = "right";
否则,大于等于document.body.scrolLeft
curLef = "left";向上同理
如果使用W3C标准,把document.body替换为document.documentElement就ok了!
也谢谢各位的帮助!