全屏浮动

最新推荐文章于 2024-10-11 23:02:16 发布
最新推荐文章于 2024-10-11 23:02:16 发布
阅读量601 收藏
点赞数
文章标签： delay html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kafanoday/article/details/6470452
版权
Code:
  1. <HTML>  
  2. <HEAD>  
  3. <META http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <TITLE>无标题文档</TITLE>  
  5. <script>  
  6.   
  7.   var x = 50,y = 60;  //浮动广告初始位置  
  8.   
  9.   var xin = true, yin = true;  //xin为真向右运动，否则向左，yin为真向下 运动，否则向上运动  
  10.   
  11.   var step = 1;   //移动的距离  
  12.   
  13.   var delay = 10;  //移动的时间间隔  
  14.     
  15.   
  16.   function floatAD() {  
  17.   
  18.      var L=T=0;         //L左边界，T上边界  
  19.   
  20.      var R= document.body.offsetWidth-document.getElementById("fly").offsetWidth;  //层移动的右边界  
  21.   
  22.      var B = document.body.offsetHeight-document.getElementById("fly").offsetHeight; //层移动的下边界  
  23.   
  24.      document.getElementById("fly").style.left = x;  //层移动后的左边界  
  25.   
  26.      document.getElementById("fly").style.top = y;   //曾移动后上边界  
  27.   
  28.      x = x + step*(xin?1:-1);       //判断水平方向  
  29.   
  30.      if (x < L) { xin = true; x = L;}   //到达边界后的处理   
  31.   
  32.      if (x > R){ xin = false; x = R;}   
  33.   
  34.      y = y + step*(yin?1:-1);   
  35.   
  36.      if (y < T) { yin = true; y = T;}   
  37.   
  38.      if (y > B) { yin = false; y = B;}   
  39.      setTimeout("floatAD()", delay)     //隔多长时间调用一次  
  40.   
  41.   }  
  42.   
  43.      
  44.   
  45. </script>  
  46. </HEAD>  
  47.   
  48. <BODY onLoad="floatAD()">  
  49. <DIV id="fly" style="position:absolute">  
  50. <A href= target="_blank">  
  51. <IMG src="images/fish.gif" border="0">  
  52. </A></DIV>  
  53. </BODY>  
  54. </HTML>  
kafanOday
关注
全屏浮动广告和双联广告
04-25
全屏漂浮广告 原理： 当图片按路径1移动的时候top和left值是增大的当到大显示屏的值的时候开始按照路径2开始移动，top和left值开始减小，left减到0，开始 按照路径3移动left值增大top值继续减小，一直top减到0继续...
全屏浮动图片图片可透明
11-12
通过以上分析可以看出，这段代码主要实现了图片在全屏范围内自由浮动的效果，同时通过CSS设置了图片的位置，并利用JavaScript动态调整其位置，使其可以在整个屏幕内移动。尽管没有直接涉及到图片透明度的设置，但...
全屏浮动js
weixin_30932215的博客
07-19 139
查看效果： http://www.leyikao.com 源代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head&gt...
全屏漂浮广告
shixiaolan_2001的专栏
01-31 568
  var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("ad") function floatAD() { var L=T=0 var R= document.body.clientWidth-obj.offsetWidth var
js支持全屏的浮动div
lieri111的专栏
12-08 2396
document.getElementById("bg_png").style.display="none";    var body_width = document.documentElement.clientWidth;    var body_height = document.documentElement.clientHeight;    var s_width = b
学做全屏浮动广告 JS 原生代码
Yiu的博客
03-22 2444
JS全屏漂浮广告 div#roll { width: 100px; color: #fff; position: absolute; height: 100px; background-color: #000 } JS全屏漂浮广告，移入光标停止移动 我是广告 var ggRoll = { roll: document.getElementById("roll"),
display与浮动
weixin_44017414的博客
12-25 801
display：      ①none（默认，不显示不占位置）           ②block（块级元素）         ③inline（行内元素）        ④inline-block（行内块级） ------使用display会用空格，删除空格的两种方法： 一：上一行的结束标签和下一行的开始标签放在同一行 二：增加父类，给父类设置font-size为0px，如果子类有文字，记得在...
带有过渡效果的全屏浮动元素的隐藏
m0_67193261的博客
04-07 273
通过z-index和opacity属性实现浮动元素的渐变隐藏
转载JS编写随机全屏浮动窗口
weixin_30706507的博客
12-08 123
<!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> <met...
左右全屏背景幻灯片(右侧浮动登陆框)
06-09
在网页设计中，"左右全屏背景幻灯片(右侧浮动登陆框)"是一个常见的功能，它结合了视觉吸引力和用户体验的元素。这个设计通常应用于网站的首页，为用户提供动态的视觉体验，同时方便他们快速登录或注册。接下来，我们...
Pennywise一个跨平台程序用于在浮动窗口中打开任何内容
08-09
这些窗口可以设置为始终位于最上方，即使在全屏应用或多个打开窗口之间切换，它们也会保持可见。这样的设计非常适合需要频繁参考或监视特定信息的用户，如开发者查看代码片段、设计师浏览颜色代码或者销售人员查看...
QT4.6 ToolBar浮动停靠，窗口全屏显示
06-04
在QT4.6中，`QToolBar`是实现应用中工具栏功能的关键类，而`QDockWidget`则允许创建可停靠或浮动的窗口部件。这个主题主要关注如何将`QToolBar`集成到`QDockWidget`中，以及如何实现窗口的全屏显示。 首先，`...
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1234
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
Chromium html＜input＞对应c++接口定义
杰克东的专栏
10-11 219
定义和用法标签定义输入字段，用户可以在其中输入数据。元素是最重要的表单元素。元素可以以多种方式显示，具体取决于。参阅，以查看每种输入类型的实例！
QD1-P19 HTML 总结
最新发布
qq_38641599的博客
10-11 242
本节总结：《前端学习笔记1》专题前18篇文章的知识点。
QD1-P17 HTML 下拉框标签（select、option）
qq_38641599的博客
10-11 214
本节学习：HTML 下拉框标签（select、option）
Chromium HTML Tags与c++接口对应关系分析
杰克东的专栏
10-11 610
head>对应"head",},其中 == "a" 接口定义 interfaceName: "HTMLAnchorElement", 其他的也类似。查找html_tag定义只需在third_party\blink\renderer\core\html\html_tag_names.json5文件中输入对对应标签，即可找到interfaceName定义。又可以根据interfaceName定义的文件名找到blink和v8定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值