js实现网页漂浮广告

目前我们公司有个医盟天下的活动，需要将该活动展示在我们的网页上；然后就想到通过漂浮类似广告这种在页面首页；

css样式：就是关于漂浮广告层的样式设定

div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}

这个div是漂浮层将要显示的具体内容

<div id="roll"><a >医盟天下大比拼</a></div>

下面这个是实现漂浮的相应的js代码
<script type="text/javascript">
var ggRoll = {
roll: document.getElementById("roll"),
speed: 20,
statusX: 1,
statusY: 1,
x: 100,
y: 300,
winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
Go: function () {
this.roll.style.left = this.x + 'px';
this.roll.style.top = this.y + 'px';

this.x = this.x + (this.statusX ? -1 : 1)
if (this.x < 0) { this.statusX = 0 }
if (this.x > this.winW) { this.statusX = 1 }

this.y = this.y + (this.statusY ? -1 : 1)
if (this.y < 0) { this.statusY = 0 }
if (this.y > this.winH) { this.statusY = 1 }
}
}
var interval = setInterval("ggRoll.Go()", ggRoll.speed);
ggRoll.roll.onmouseover = function () { clearInterval(interval) };
ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) };
</script>

js实现网页漂浮广告相关推荐

html漂浮图片代码关闭,js带关闭按钮的网页漂浮广告代码
html head -="-Type"=";=GBK" 带关闭按钮的网页漂浮广告代码 body divid="img"style=" ...
php中的网页漂浮代码,JavaScript_Javascript实现带关闭按钮的网页漂浮广告代码，复制代码代码如下: html - phpStudy...
Javascript实现带关闭按钮的网页漂浮广告代码带关闭按钮的网页漂浮广告代码 X ff.js代码 var xPos = 20; var yPos = document.body.clientHe ...
JS实现网页流氓广告效果
JS实现网页流氓广告效果大家在浏览网页的时候,是不是经常遇到各种各样的垃圾弹窗,当你把它关闭之后,过一段时间他又弹出来,非常的让人心烦. 这种流氓弹窗我们是可以通过JavaScript的 s ...
html 飘浮移动广告层,JS全屏漂浮广告、移入光标停止移动
本节内容: JS全屏漂浮广告例子: 复制代码代码示例: JS全屏漂浮广告-www.jquerycn.cn div#roll{width:100px;height:100px; background ...
js 让鼠标右下角有一排小字_JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码...
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮 ...
【JS】网页悬浮广告及联系QQ客服侧边栏
网页悬浮广告及联系QQ客服侧边栏,广告跳动效果,及QQ客服隐藏效果 <script language="javascript" type="text/javascr ...
用js实现网页中小广告弹出
1.首先先规定一个盒子:将广告内容放入盒子中. 2.在css样式中修改盒子大小,规格等: 3.在js中设小广告出现.
JS上下自动漂浮广告，可关闭
<%--Keymo,漂浮广告--%> <SCRIPT type="text/javascript">// 这是关闭飘浮广告的宽度,请根据你的广告内容而定va ...
html网页漂浮广告原理js,js实现广告漂浮效果的小例子
div{ position:absolute; } /* 利用window对象,实现浮动效果 1.有一个div,就是我们要控制的,它的起始点坐标(0,0) 2.设定横向和纵向的速度 3.控制div移动 ...

js实现网页漂浮广告

js实现网页漂浮广告相关推荐

最新文章

热门文章