微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数_javascript技巧

php中文网
发布： 2016-05-16 17:56:55
原创
896人浏览过

首先这个元素position为fixed
top为(clientHeight-elem.offsetHeight)/2(即元素在浏览器的中间,这个是固定的)
left为(clientWidht-主体宽度)/2+主体宽度+左边距，左边距可以设为正数，也可以为负数，如果为负数时的绝对值 等于 主体宽度+elem.offsetWidht,那么元素就刚好浮动在页面主体的左边，设置为0时，刚好浮动在页面主体的右边
但是万恶的ie6不支持css中fixed属性，好在ie6可以通过expresion表达式来解决,万事大吉
具体看代码：

ChatsNow
ChatsNow

ChatsNow是一款免费的AI写作类浏览器插件，提供智能聊天机器人、智能翻译、智能搜索等工具

ChatsNow 253
查看详情 ChatsNow
复制代码 代码如下:





宸

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：深入理解JavaScript系列(13) This? Yes,this!_javascript技巧 下一篇：JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
理解JavaScript中的空值合并运算符(??)_javascript es2020 空值合并运算符（??）在JavaScript中用于精确处理null和undefined的默认值赋值，与逻辑或（||）不同，它仅当左侧为null或undefined时返回右侧值，保留0、""等假值；典型应用场景包括配置项设置和API数据处理，如config.timeout??5000；注意不可与&&或||直接混用，需加括号避免语法错误。
2025-11-23 18:35:02
182
Tizen TV应用开发：正确处理遥控器按键与实现应用退出 TizenTV应用开发中，tizenhwkey不适用于遥控器按键事件，因为其设计用于移动和可穿戴设备的硬件按键。本文详细介绍了如何在TizenTV应用中通过监听keydown事件来正确处理遥控器输入，并提供了JavaScript代码示例，特别指出keyCode10009用于实现应用的正常退出，确保开发者能构建响应式且符合平台规范的TV应用。
2025-11-23 18:19:02
355
JavaScriptSvelte编译_运行时优化与代码分割技术 Svelte通过编译时优化减少运行时开销，结合代码分割提升性能：1.编译阶段生成高效原生JS，实现静态提升、无虚拟DOM、Tree-shaking友好；2.运行时合理使用store、懒加载组件、内存管理及{#key}控制重用；3.利用Vite动态import()和路由级分割实现按需加载；4.构建配置中手动分块、启用压缩，最终降低初始体积，提升首屏速度与运行效率。
2025-11-23 18:17:02
268
避免React UI不更新：正确处理状态不可变性的实践 本文深入探讨React应用中UI不更新的常见原因，特别是由于直接修改（mutation）状态而非创建新状态引用导致的渲染问题。我们将通过一个实际的待办事项列表删除案例，详细解析Array.prototype.splice()等方法对状态的影响，并提供正确的不可变状态更新策略，确保组件能够按预期重新渲染，从而避免因状态引用未改变而引起的UI不同步问题。
2025-11-23 18:13:01
846
JavaScript构建优化_分包策略与缓存 分包与缓存优化可显著提升前端性能。通过入口分包、动态导入、第三方库分离和公共模块提取，实现按需加载；结合内容哈希命名、运行时分离、长期缓存及缓存失效控制，最大化资源复用。避免过度拆分，关键资源优先加载，配合压缩与HTTP/2优化，持续迭代以减少下载、提升复用。
2025-11-23 18:03:06
735
Tizen TV应用开发：深入理解遥控器事件处理与应用退出 本教程深入探讨TizenTV应用中遥控器事件的处理机制及安全退出策略。我们将解析tizenhwkey在TV平台上的适用性，并提供基于JavaScript的keydown事件监听方案，特别是针对遥控器按键（如返回键）的响应，确保应用能够正确、优雅地退出，提升用户体验。
2025-11-23 17:54:22
432
JavaScript模块化_命名空间模式 命名空间模式是通过唯一全局对象作为容器来组织代码，避免全局变量污染和命名冲突，例如将函数挂载到MyApp.user.getUser()而非直接定义getUser，常用对象字面量、嵌套结构或自动化函数实现深层命名空间。
2025-11-23 17:53:02
364
ECharts数据项高亮：实现悬停效果与emphasis配置详解 本文详细介绍了如何在ECharts中为数据项（如散点图符号）配置悬停高亮效果。通过利用emphasis配置项，可以轻松定义鼠标悬停时的样式变化。文章特别强调了silent选项对交互行为的关键影响，并指导读者如何正确设置以确保emphasis效果正常生效，避免常见的配置陷阱。
2025-11-23 17:40:01
918
JavaScript函数式编程_惰性求值实现 惰性求值是一种延迟计算策略，JavaScript虽为严格求值语言，但可通过生成器实现惰性求值，利用yield暂停执行，按需生成值，适合处理无限序列与性能优化。
2025-11-23 17:37:11
606
Tizen TV 应用的按键事件处理与退出机制指南 本文详细阐述了TizenTV应用中的按键事件处理机制，区别于移动/穿戴设备的tizenhwkey，TizenTV采用标准的keydown事件监听器来响应遥控器输入。文章提供了默认的事件处理代码示例，并重点讲解了如何通过捕获RETURN键（keyCode10009）来实现应用的正常退出。
2025-11-23 17:36:02
937
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部