- 浏览: 169946 次
- 性别:
- 来自: 天津
文章分类
最新评论
项目中某页面需要固定某个div内容,实际需求是这样的,有个评分用的表格,页面下面有实时计算总分的小表格,由于评分用的表格很长,导致总分只要拉到最下面才能看见,现在想把总分的小表格固定在底部,不随滚动条的滚动改变位置,当时在考虑问题解决方案时,总是想着怎样获取页面的高度以及滚动条的高度,然后通过加加减减之类的实现,实在太复杂,而且根本取不到所需要的页面高度,后来搜索发现,其实仅仅用css就可以实现这个功能
#Main { position:absolute; bottom:0px; left:0px; width:100%; height:100%; overflow:auto; z-index:1; } #ToolBar { position:absolute; bottom:0px; right:16px; width:100%; height:20px; text-align:center; background:#ccc; z-index:2; overflow:hidden; }
技巧就在于z-index上,z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。使用层概念,再使用绝对位置就很容易实现了,但是有一点要注意,页面中使用不同层的div不能嵌套,必须是并列放置
发表评论
-
ajax下载文档 ClientAbortException: java.net.SocketException: Connection reset by pee
2013-08-28 13:58 2295众所周知ajax是使用了浏览器内部的XmlHttpRequ ... -
在js里引用另一个js文件
2013-08-28 10:58 822new_element=document.createE ... -
<转> js替换字符正则表达式
2013-08-16 14:28 806function replace() { var str ... -
<转> JQuery选择器
2013-08-16 10:24 856<html> <head> &l ... -
jQuery获取Select选择的Text和 Value(转)
2013-08-13 09:47 580jQuery获取Select选择的Text和Valu ... -
<转>javascript获取地址栏参数
2013-08-12 10:03 703function GetQueryString(name){v ... -
iframe子页面内刷新同页面中另一个iframe
2013-08-09 15:25 10556框架页面如下: <div id="a ... -
jquery动态修改链接的onclick方法
2013-08-07 11:29 2326用jquery动态修改链接的onclick方法的传递参数,在 ... -
《转》JS怎么刷新当前页面
2013-04-15 13:17 843reload 方法,该方法强迫 ... -
<转>iframe去掉横向滚动条
2012-05-15 14:45 1240如题,就是在网页中, ... -
ie onmouseup和onclick事件执行顺序
2012-05-14 17:21 1158今天项目要做个类似网 ... -
iframe同步刷新时好时坏问题
2012-04-19 17:04 1235页面由左右两个iframe组成,要求右面内容更新时(内容跟左面 ... -
js判断页面关闭 仅支持IE6
2012-02-08 16:38 1654关闭页面时同时执行onbeforeunload和onunloa ... -
onpropertychange与输入法有关
2012-02-03 14:56 1196页面输入框经常有只允许输入数字的限制,一般都用onproper ... -
<转>name和function名字不能相同
2012-01-05 16:40 0今天突然碰到form表单的名字与js方法的名字相同导致找不到j ... -
onmousedown、onmouseup和onclick的奇怪问题
2011-07-08 10:04 2249将setTimeout的时间设置为0,告诉浏览器当它为当前任何 ... -
超链接<a>中属性href与target相冲突的地方
2011-03-25 11:47 1920今天在项目中写了两行代码,出现不同的效果: ①<a h ... -
<转>键盘回车事件导致页面刷新的问题
2011-03-24 11:18 873我最近在做一个 Ajax 查询的功能,代码如下: ... -
使用prototype的有用小方法
2010-09-13 15:33 938今天刚刚接触js中对象 ... -
JS 字符串连接性能
2010-09-12 17:18 2164在W3SCHOOL中有讨论js字符串连接方法性能对比的篇章如下 ...
相关推荐
在本主题“js文字浮动效果”中,我们主要探讨如何利用JavaScript来实现文字在网页上的动画效果,使其看起来像是在浮动或者滚动。 首先,要实现文字浮动效果,我们需要一个HTML文档作为基础结构。`index.html`文件...
JavaScript中的浮动层(Floating Layer)技术是网页动态效果和交互设计中的重要概念,它允许创建在用户鼠标移动时跟随或响应的元素。这种技术在学习JavaScript时尤其有用,因为它可以帮助理解DOM操作、事件处理和CSS...
本话题聚焦于如何结合CSS和JS来实现一个框的浮动效果,这在网页中常见于通知提示、广告横幅或动态图标等元素。 首先,我们从CSS开始。CSS动画是通过`@keyframes`规则定义的,它允许我们指定一个元素在特定时间点上...
"基于jQuery精美浮动层效果(JS+CSS)"是一个小巧但高效的解决方案,它利用JavaScript和CSS技术,为网页添加了平滑且显眼的浮动层效果,为用户带来友好的互动体验。 jQuery是一个广泛使用的JavaScript库,它简化了...
总的来说,页面图片随机浮动效果是通过CSS3动画或JavaScript实现的,它能为网页增加互动性,吸引用户的注意力。开发者可以根据项目需求和自身技能选择合适的技术方案,同时注意优化性能,避免过度的CPU占用。在实践...
JS浮动图片的动态效果 在本文中,我们将介绍JS浮动图片的动态效果实例,该效果可以在网页上实现图片的浮动和移动。该实例可以在网页上添加丰富的视觉效果,提高用户体验。 首先,让我们来了解一下JS浮动图片的动态...
在这个场景中,"js浮动广告代码"指的是使用JavaScript实现的一种广告展示方式,这种广告会悬浮在网页的四周,无论用户滚动页面,它都会保持在屏幕的特定位置,从而提高广告的可见性和点击率。 浮动广告的实现原理...
【标题】"广告浮动效果源码"涉及到的IT知识点主要包括HTML、JavaScript(简称js)以及CSS这三种核心技术。这些技术都是构建网页动态效果的基础,尤其是对于网页广告的设计和实现至关重要。 1. HTML(HyperText ...
js滚动浮动,焦点图浮动js滚动浮动,焦点图浮动
总的来说,"js浮动框示例"是一个展示如何使用JavaScript、HTML和CSS实现交互式浮动信息窗口的例子。通过理解和实践这个示例,开发者可以掌握创建动态、可交互网页元素的技能,提升网站的用户体验。
本资源提供的"JS文字打散随机浮动效果代码.zip"是一个利用JS实现的独特视觉特效,能够让文字在用户点击按钮后分散并随机浮动,再次点击时恢复到原来的位置,为网页增添互动性和趣味性。 首先,我们要理解这个效果的...
这种效果主要通过JavaScript(JS)脚本实现,因为HTML和CSS本身虽然能实现基本的布局和定位,但无法实现动态的浮动效果。 JavaScript是一种强大的客户端脚本语言,它可以对网页内容进行实时更新和动态操作。在实现...
JavaScript 浮动客服系统是一种常见的网站交互功能,它允许用户在浏览网页时随时与客服人员进行沟通,提高用户体验和客户服务效率。在这个“js浮动客服.zip”压缩包中,我们可以找到实现这种功能的相关代码和资源。...
**JS 多种浮动广告效果** 在网页设计中,浮动广告是一种常见的互动元素,用于吸引用户的注意力并提供信息或服务。这些广告通常以图片、文本或动态元素的形式出现在页面的侧边、角落或者跟随用户滚动。本文将详细...
在网页设计中,"左浮动"是一...通过理解这些基本概念,你可以创建出具有左浮动效果的网页元素,如浮动广告或菜单,以提升用户体验。在实际项目中,可能还需要考虑响应式设计,确保在不同设备和屏幕尺寸上都能正常工作。
- 对于更复杂的浮动效果,可以使用现有的JS库,如jQuery的`scroll`方法,或者更现代化的库如React、Vue或Angular,它们提供了更高级的生命周期钩子和事件处理机制。 - 例如,在React中,可以使用`useEffect`或`...
2. **CSS样式控制**:Js可以动态修改元素的CSS样式,如位置、大小、透明度等,以实现广告的浮动效果。可能使用`style`属性直接修改,或者通过`getComputedStyle`和`setStyle`方法进行操作。 3. **事件监听**:为了...
在下面的代码中,我们使用了JavaScript来动态地设置浮动元素的top和left属性,以便实现浮动效果。 JavaScript代码会在滚动条滚动时执行,从而使得浮动元素固定在浏览器窗口的某个位置不变。 HTML代码: ```html ...
本资源提供的"基于jQuery精美浮动层效果(JS+CSS)"是一个完整的源码示例,可以帮助开发者理解和实现这种效果。以下是关于这个主题的详细知识点: 1. **jQuery基础**:jQuery是一个流行的JavaScript库,它简化了DOM...