使用JavaScript实现HTML页面上下浮动的窗口

于 2023-11-26 18:57:02 发布
阅读量481 收藏 4
点赞数 7
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LT0109/article/details/134631293
版权

首先去除浏览器自带的边距 ，否则影响广告牌移动的距离的误差

设置广告图片大小

BUG:当浏览器的窗口大小发生改变: 则 失去理想的效果   原因 var maxHight = window.innerHeight - 100;随时获取浏览器目前大小；


 当浏览器的窗口发生改变  maxHight 也要随之改变.

设置一个变量为zb，表示纵向坐标，定时器每运行一次，zb++，实现图片向下浮动

fx表示图片向下或向上浮动，当zb==maxHight时，fx=1;使图片向上浮动；

案例：顺时针移动广告牌：

 

“用户昵称已存在”用户昵称已存在
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页页面浮动窗口示例代码（JavaScript Code）
::: 移动互联网时代开发者 :::
01-16 3万+
      这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：            具体使用方法，看下面的这个完整的页面代码应该就知道了。//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=orange,
html向上浮动的方式,JS 实现Div向上浮动的实现代码
weixin_42347699的博客
06-03 1258
Html 及 JS 代码如下：复制代码 代码如下:style="position: absolute; width: 100px;">我们var newsOne = document.getElementById("newsOne");newsOne.style.bottom = 0;newsOne.style.left = window.screen.availWidth - 100;va...
html盒子向上浮动bootstrap,当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录...
weixin_42306699的博客
06-09 335
今天要说的是文章详情页右侧的目录栏，当页面下滑的时候，它也会固定到页面顶部，之前是用js去监听scroll事件，然后根据位置进行判断，togglefixed的方案，出于一些原因，决定对它用sticky去重写。几下就写完了，去掉滚动事件监听，然后将菜单元素.post-nav加上position:sticky;top:0样式，但是，不起效！wtf!百思不得其解，我开始搜索原因。在so搜到了这个，说到可...
html 5向上浮动,html5 css练习浮动布局
weixin_42509815的博客
06-03 556
浮动布局头部内容侧栏导航主体内容底部/*浮动布局*/*{ margin: 0; padding: 0;}body{ width: 100%; height: 960px;}header{ height: 5%; background: rgba(25,25,25,0.25); }aside{ width: 30%; height: 90%;...
html——浮动
Jennifering的博客
05-31 7762
一.浮动有两种浮动情况：先判断设置浮动部分的前面是否是标准流1、float的三个属性:left元素向左浮动 right 元素向右浮动 none（默认值）所设元素不浮动2、所设的部分浮动，下面的元素垂直向上平移，紧跟在所设浮动部分前面的元素下面，即浮动部分与下面的元素叠加起来。3、float只有横向浮动，没有纵向浮动，当元素被设置float属性后，将会脱离标准流，并使得该元素的display属性变更...
html盒模型向上浮动,HTML 学习笔记 May 8，2017 盒子模型3练习、浮动、清楚浮动、css定位详解、仿搜... - 简书...
weixin_42303282的博客
06-03 603
HTML 学习笔记 May 8，2017 盒子模型3练习、浮动、清楚浮动、css定位详解、仿搜狐网站首页面布局、js基本介绍控制显示区域的高度和宽度div 控制显示的位置float: left; /左浮动/定义边框：p {border-style: solid; /* 实线 */}border-style: dotted solid double dashed;/* 上边框是点状 // 右边框是实...
纯CSS3幽灵上下浮动动画特效.zip
11-25
在本文中，我们将深入探讨如何使用纯CSS3实现幽灵般的上下浮动动画特效。这个特效在前端开发中常用于创建引人注目的视觉效果，比如网站背景或动态装饰元素。结合HTML5、jQuery和JavaScript的知识，我们可以构建出...
Javascript实现带关闭按钮的网页漂浮广告代码
10-26
在网页设计中，有时需要创建一种浮动广告效果，即广告图片会在页面中随着滚动条上下移动，同时提供一个关闭按钮以便用户随时将其隐藏。本文将详细介绍如何使用JavaScript实现这样一个带关闭按钮的网页漂浮广告代码。...
jQuery实现的浮动层跟随页面上下滚动效果源码.zip
11-07
本资源“jQuery实现的浮动层跟随页面上下滚动效果源码.zip”提供了一个利用jQuery来创建浮动层（也称为固定定位元素）的示例，这种效果常见于网站的侧边栏广告、导航菜单或通知栏，它们会随着用户滚动页面而始终保持...
JavaScript 浮动的图片广告.rar
12-11
JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在实现动态和交互性功能方面具有显著优势。在这个"JavaScript 浮动的图片广告.rar"压缩包中，我们可以预见到它包含了一个实现浮动图片广告的JavaScript...
html 浮动窗口
06-10
日常老师留的html作业，不知道是否对大家有用，可用于html作业借鉴，学习。=供参考啊。嘻嘻(●'◡'●)
网页浮动广告窗口
06-15
1. 右栏浮动广告 QUOTE: <script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 180px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='border-left:1px solid #2E6287;border-top:1px solid #2E6287;border-right:1px solid #2E6287;font-size:12px;color:#ffffff; border-bottom-color:#2E6287; border-bottom-width:1px'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE><table border='1' width='150' id='table1' height='500' bordercolor='#2E6287'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat0()",1);</script>.........
jquery上下翻动导航.zip
11-21
标题中的“jquery上下翻动导航”指的是一个使用jQuery库实现的网页导航栏，它具有上下滚动或翻动的效果。在前端开发中，这样的导航栏设计能够增加网站的交互性和用户体验，使得用户在浏览页面时更加方便。这个压缩包...
html让矩形块向上浮动,CSS的浮动
weixin_30914751的博客
06-04 1451
CSS的浮动1. 标准流(普通流/文档流)标准流：标签按照规定好的默认方式排列。块级元素独占一行，从上到下顺序排列行内元素按照顺序从左到右排列，碰到父元素边缘则自动换行标准流是最基本的布局方式。2. 为什么需要浮动？有很多的布局效果，标准流没有办法完成，此时需要利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型的应用——可以让多个块级元素一行内排列显示。网页布局第一准则：多个块级...
网站html漂浮代码大全,网页漂浮窗口代码
weixin_32147807的博客
06-07 5207
漂浮窗口代码var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("ad")function floatAD() {var L=T=0var R= document.body.clientWidth-obj.offsetWidthvar B = doc...
html 5向上浮动,HTML5 驱除浮动
weixin_32792909的博客
06-03 489
1、给父盒子设置高度2、给父盒子设置overflow:hidden;3、给父盒子的最后面加一个div，这个div有个属性：clear:both;4、使用伪元素清除浮动.clearfix {zoom: 1;/*IE/7/6*/ /*兼容IE6下的写法*/}.clearfix:after {content: "";line-height: 0;width: 0;height: 0;display: ...
html float 浮动
Mr_gxj的博客
11-05 994
head> meta charset="UTF-8"> title>浮动title> style> .d1{ background-color: #c0ff29; width: 200px; height: 200px; float: left;
css浮动简介及特点
最新发布
zk18054037280的博客
11-26 295
浮动的简介以及浮动的一些特点
『HTML&CSS』浮动
叄拾叄画生
10-12 434
文档流。元素在文档流中的特点。浮动。元素浮动的特点。元素脱离文档流的特点。简单布局。
javascript实现全屏页面滚动效果.docx
01-13
javascript实现全屏页面滚动效果.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值