html+javascript实现广告窗自由浮动

首先介绍一种设置div初始位置的定位方法：

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<title>层的移动</title>
<style type="text/css">
#ad{width:120px;height:120px;background:url(images/default.gif);position:relative;}
</style>
<script type="text/javascript">var obj = null;function init(){obj = document.getElementById("ad");obj.style.left="10px";//设置初始位置obj.style.top="10px";alert(obj.style.posLeft);//获得方式一alert(parseInt(obj.style.left));//获得方式二}function move(){}</script></head>
<body οnlοad="init()" ><div id="ad"  ></div>
</body>
</html>

实现广告窗口在可视范围内浮动代码如下：

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<title>层的移动</title>
<style type="text/css">
#ad{width:120px;height:120px;background:url(images/default.gif);position:relative;}
</style>
<script type="text/javascript">var id;var directionX=true,directionY=true;var x=10,y=10;var obj = null;function init(){obj = document.getElementById("ad");//获得对象obj.style.posLeft = x;//对象属性设置obj.style.posTop = y;id = setInterval(move,100);//100ms重复执行move方法}function move(){var width=document.documentElement.clientWidth-obj.offsetWidth;var height= document.documentElement.clientHeight-obj.offsetHeight;if(x>=width ){//说明移动到最右边directionX = false;}if(x==0){//移动到最左边directionX = true;}if(y >= height){directionY = false;}if(y==0){directionY = true;}if(directionX) x += 10;else x -= 10;if(directionY) y += 10;else y -= 10;obj.style.posLeft = x;obj.style.posTop = y;}</script></head>
<body οnlοad="init()" ><div id="ad"></div>
</body>
</html>

html+javascript实现广告窗自由浮动相关推荐

html自动广告业代码,html+javascript实现广告窗自由浮动
首先介绍一种设置div初始位置的定位方法: .html代码如下: 层的移动 #ad{width:120px;height:120px;background:url(images/default.gif ...
javascript经典广告代码.rar
javascript经典广告代码.rar 转载于:https://www.cnblogs.com/hayden/archive/2009/07/31/1535749.html
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
一连上网就弹出广告窗，记录删除一些顽固文件
事件起源于在网上下软件的时候,带了个垃圾文件,一连上网就弹出广告窗,首先打开任务管理器,查看到它的文件所在位置. 要关闭它,点击计算机管理,找到它关闭,再设为将自动设为禁用 del去删除它,一般没用, ...
杨校老师课堂之JavaScript右下角广告弹框教程
案例制作思路: 1.先制作界面添加一个盒子包含一个按钮,使盒子绝对定位在右上角添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子顶端盒子因为是属于大盒子内部的存在,所以宽 ...
使用Javascript实现广告鱼的效果
实现代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
JavaScript浮动广告
js的浮动广告代码,复制就能用自己修改图片的地址 <html> <head><meta charset="utf-8"><title&g ...
百度联盟广告代码php,Javascript 实现广告后加载可加载百度谷歌联盟广告[原创]_javascript技巧...
本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告.百度联盟广告和谷歌联盟广告.这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好. 我们在网站上放置广告,最简单的方法就是把JS ...
php页面浮动窗口代码,JavaScript浮动广告窗口实例
浮动广告窗口浮动广告窗口 #mydiv{ width:100px; height:100px; background:#f00; } #content{ text-align:center; } # ...

html+javascript实现广告窗自由浮动

html+javascript实现广告窗自由浮动相关推荐

最新文章

热门文章