JS漂浮广告代码

最新推荐文章于 2024-03-15 11:32:13 发布
最新推荐文章于 2024-03-15 11:32:13 发布
阅读量1.5k 收藏
点赞数
文章标签： delay function div border table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexingyeyun/article/details/1605705
版权

可加在<body>中的任何处! 

<div ID="floater" style="left: 180px; top: 117px" >
<a href="http://dypg.hncj.edu.cn" target="_blank" ><img SRC="images/jzsx.gif" alt="欢迎访问讲正气树新风网站" WIDTH="200" HEIGHT="100" border="0"></a>
</div>

<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 20
var obj=document.getElementById("floater")
function floatAD() {
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("floatAD()", delay)
obj.οnmοuseοver=function(){clearInterval(itl)}
obj.οnmοuseοut=function(){itl=setInterval("floatAD()", delay)}
</script>

<! 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=gb2312" >
< title > 漂浮图片 </ title >
< style  type ="text/css"  media ="screen" >  
#floater { 
    position: absolute; 
    left: 500; 
    top: 146; 
    width: 125; 
    visibility: visible; 
    z-index: 10; 
} 
--> 
 </ style >  

 </ head >

< body  leftmargin ="0"  topmargin ="0"  marginwidth ="0"  marginheight ="0"  bgcolor ="#CCCCCC"    >
< div  align ="center" >
< table  width ="900"  height ="900"  align ="center"  bgcolor ="#FFFFFF" >
< tr >
< td  width ="900"  height ="900" >
</ td >
</ tr >
</ table >
</ div >

< div  ID ="floater"  style ="left: 180px; top: 117px"   >  
 < a  href ="http://dypg.hncj.edu.cn"  target ="_blank"   >< img  SRC ="http://fm032.img.xiaonei.com/pic001/20070405/2200/L1843448GE.jpg"  alt ="欢迎访问讲正气树新风网站"  WIDTH ="200"  HEIGHT ="100"  border ="0" ></ a >  
 </ div >
< script >  
var x = 50,y = 60 
var xin = true, yin = true 
var step = 1 
var delay = 20 
var obj=document.getElementById("floater") 
function floatAD() { 
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("floatAD()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} 
 </ script >  

    
 </ body >
</ html >
追风客之天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现弹性漂浮广告代码
A20201130的博客
01-15 2362
Js悬浮广告代码
skudhdk的博客
10-13 671
【代码】Js悬浮广告代码。
js 浮动广告代码
qiyufeifan的专栏
08-05 392
<br /><script><br />function ddd()<br />{<br />//alert("ddd");<br />document.getElementById("chip1").style.top=document.body.scrollTop +50;<br />document.getElementById("chip2").style.top=document.body.scrollTop+50;<br />}<br /></script><br /><br /><body o
js 底部浮动广告代码
03-23 1920
if(typeof document.compatMode!='undefined'&amp;&amp;document.compatMode!='BackCompat'){ cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this...
JS实现漂浮广告功能
zxh996的博客
07-11 6953
JS实现漂浮广告功能前言一、漂浮广告案例 前言 漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。 一、漂浮广告案例 我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。 代码如下（示例）： <style type="text/css"> #div1 { width: 300px;
Js广告_全屏漂浮广告
weixin_33804990的博客
10-11 249
1 &lt;!DOCTYPE HTML&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 5 &lt;title&gt;Js广告_全屏漂浮广告&lt
JS实现漂浮广告案例
最新发布
m0_46219714的博客
03-15 899
因此，每次调用时 x + speed * gox + "px" 的值都会被重新计算，并且赋给了 link.style.left，实际上是将计算后的结果赋给了 link 元素的 style.left 属性，这会导致元素的位置发生改变。同样的，如果 link 的顶部超过视口高度减去100像素（假设 link 的高度是100像素），（假设 link 的宽度是200像素），或者左侧偏移小于0，那么水平方向的移动方向将反转。这个move()函数是用来实现link元素的动画移动的。元素的垂直速度和方向。
漂浮广告的代码
10-23 669
http://www.zzlanwang.cn/cpid.aspx?id=291" target="_blank">    var x = 50,y = 60  var xin = true, yin = true  var step = 1   var delay = 10  var obj=document.getElementById("ad")   function floatAD() {
js漂浮广告
cai niaoyihao_的博客
05-12 770
js漂浮广告
js常用悬浮广告代码
12-15
常用的几种js实现悬浮框代码。右下角悬浮广告，左侧悬浮广告等等。
JS实现弹性漂浮效果的广告代码
10-23
主要介绍了JS实现弹性漂浮效果的广告代码,涉及javascript动态操作图片弹性运动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
漂浮广告的JS代码（经典）
06-22
漂浮广告的JS代码（经典）! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JS漂浮广告代码，图片飘动，响应鼠标停止
04-04
NULL 博文链接：https://zhibin07.iteye.com/blog/1490129
JS漂浮广告代码、JS漂浮广告代码
04-29
JS漂浮广告代码JS漂浮广告代码JS漂浮广告代码JS漂浮广告代码JS漂浮广告代码
js漂浮广告实现代码
10-23
js漂浮广告实现代码，本质上就是一个来回滚动的小图片，也是一种广告形式，需要的朋友可以收藏下
JS随机漂浮广告代码
Shanluan_的专栏
07-06 2698
var xPos=0,yPos=0;//x,y轴坐标     var xon=0;//图片在x轴移动方向     var yon=0;//图片在y轴移动方向     var step=1;     //移动距离     var img=document.getElementByIdx_x("float");//图片层         function floatP()     {
漂浮广告代码html,漂浮广告的JS代码(经典)
weixin_31209173的博客
06-26 1100
漂浮广告 visibility: visible;">var xPos = 300;var yPos = 200;var step = 1;var delay = 30;var height = 0;var Hoffset = 0;var Woffset = 0;var yon = 0;var xon = 0;var pause = true;var interval;img1.style....
页面浮动窗口
kevin_lovelife的专栏
06-03 545
http://blog.csdn.net/kevin_lovelife" target="_blank">   var x = 50,y = 60  var xin = true, yin = true  var step = 1  var delay = 20  var obj=document.getElementById("codefans_net")  fun
js漂浮广告代码(简洁!)
ly8261861的专栏
09-12 1748
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" > js漂浮广告代码(简洁!)       //公共脚本文件js漂浮广告代码(简洁!) main.js function addEvent(obj,evtType,func,cap){     cap=ca
完整的js漂浮广告代码
05-24
以下是一个简单的JS漂浮广告代码： ```html <div id="floating-ad"> <img src="https://example.com/image.jpg" alt="Floating Ad"> <button class="close-btn">X</button> </div> <script> var ad = document.getElementById("floating-ad"); var closeBtn = ad.querySelector(".close-btn"); // 点击关闭按钮隐藏广告 closeBtn.addEventListener("click", function() { ad.style.display = "none"; }); // 监听窗口滚动事件 window.addEventListener("scroll", function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; ad.style.top = scrollTop + "px"; }); </script> ``` 这个代码中，我们首先定义了一个带有图片和关闭按钮的广告容器，并为其设置了一个 id 属性。然后使用 JavaScript 获取该容器和关闭按钮元素，并为关闭按钮添加了一个点击事件监听器，在点击时隐藏广告容器。 接下来，我们为窗口滚动事件添加了一个监听器，以便在用户滚动页面时将广告容器“粘”在页面顶部。在监听器函数中，我们使用 `window.pageYOffset` 或 `document.documentElement.scrollTop` 来获取当前页面滚动距离，并将该值用于设置广告容器的 `top` 样式属性。 请注意，这只是一个简单的示例代码，可能需要根据您的具体需求进行适当修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值