`
a19905522
  • 浏览: 99196 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

js固定页面底部悬浮框特效代码

    博客分类：
  • JS
 
阅读更多 

<html>
<head>
<style type="text/css">
.tt {

border: 1px #F00 solid;
background-color:#0F0;
width: 80px;
height: 80px;
display:block;

position:absolute;
right:0px;
bottom: 0px;
}
</style>
<script language="javascript">
function relocate(){
var mydiv = document.getElementById("myDiv");
var height = Math.abs(document.body.clientHeight + document.body.scrollTop - 80);
window.status = document.body.clientHeight + " " + document.body.scrollTop;
mydiv.style.top = height;
}
</script>

</head>
<body style="padding:0px;margin:0px;height:100%" >
   <script language="javascript">
window.onscroll = relocate;
window.onresize = relocate;
</script>

<div id="myDiv" class="tt">
This is a test one
</div>




</body>
</html>
 
分享到：
| flash网站浏览器窗口自适应<as3> 缓动的自 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    页面右侧底部悬浮层样式代码.zip

    在网页设计中，"页面右侧底部悬浮层样式代码" 是一种常见的交互设计元素，它用于在用户浏览页面时保持固定位置，通常显示广告、联系方式或重要通知。这种设计可以提高用户体验，因为它始终可见，无论用户滚动到页面...

    移动网页悬浮框效果

    移动网页悬浮框效果是一种...在提供的压缩包文件“移动网页悬浮框效果”中，应该包含了实现这个效果的HTML、CSS和JavaScript代码示例。通过学习和理解这些代码，你可以更好地掌握如何在自己的项目中实现类似的功能。

    右侧漂浮完美代码

    在网页设计中，"右侧漂浮完美代码"通常指的是实现一个始终固定在页面右侧，即使用户滚动页面也不会消失的交互元素，例如在线客服聊天窗口。这样的设计可以方便用户随时咨询，提升用户体验。在这个主题中，我们将深入...

    网页右侧悬浮简洁版qq在线客服代码（支持返回网页顶部）.zip

    这可能包括`style.css`或其他命名的文件，它们通过CSS选择器定义了悬浮框的位置（通常固定在右侧或底部）、大小、颜色、字体等视觉效果。CSS还可能包含了浮动效果、过渡动画和响应式设计，确保在不同设备和浏览器上...

    js QQ客服悬浮效果实现代码

    - 悬浮框在页面中的位置被设置为绝对定位，固定于页面的右下角，并且可以通过CSS调整其位置。 - 当页面向下滚动时，悬浮框会跟随滚动，但会保持在页面可视区域内一定位置，实现悬浮效果。 - 悬浮框的大小和显示...

    html5 canvas网页底部圆点气泡悬浮上升动画特效.zip

    本项目中的“html5 canvas网页底部圆点气泡悬浮上升动画特效”是一个利用Canvas API创建的视觉效果，常用于网站背景或者交互元素，增加页面的趣味性和吸引力。 首先，我们来看`index.html`文件。这个文件是整个网页...

    网页底部悬停提示的工具栏特效.rar

    网页底部悬停提示的工具栏特效是网页设计中一种增强用户体验的常见手法，它通过在鼠标悬停在页面底部的工具栏图标上时显示相关的文字提示，帮助用户快速理解各个图标的含义和功能。这个“网页底部悬停提示的工具栏...

    常用JAVASCRIPT代码特效

    本资源“常用JAVASCRIPT代码特效”显然包含了各种实用的JavaScript特效实例，对于网页开发者来说是一份宝贵的参考资料。 1. **基础概念**： - JavaScript是ECMAScript规范的实现，它的核心包括变量、数据类型、...

    jQuery返回顶部跟底部浮窗代码.zip

    2. JavaScript文件：通常以.js为扩展名，包含jQuery代码以实现返回顶部和底部的功能，以及可能的留言处理逻辑。 3. CSS文件：可能以.css为扩展名，定义了浮窗及按钮的样式。 4. 图像文件：可能包括箭头图标和其他...

    js+css3全屏折角导航菜单和右下角悬浮分享按钮特效.zip

    标题中的"js+css3全屏折角导航菜单和右下角悬浮分享按钮特效.zip"指的是一款结合JavaScript（JS）和CSS3技术实现的网页交互效果，包括一个全屏的折角导航菜单和页面右下角的悬浮分享按钮。这种特效能够提升网站的...

    jQuery制作侧边悬浮折叠影藏弹窗特效

    本教程将详细讲解如何利用jQuery创建一个侧边悬浮折叠影藏弹窗特效，以提升用户体验并增加网站互动性。 首先，我们需要在HTML结构中为弹窗设置基本框架。创建一个容器元素，如`&lt;div&gt;`，并添加必要的类名以方便后续...

    jquery仿360浏览器猜你喜欢悬浮特效代码

    通常，我们可以将悬浮框设置为固定定位（`position: fixed`），并根据需求调整其顶部或底部距离。同时，设置合适的宽度和高度，以及内边距和外边距，使内容布局美观。 ```css #guess-like { position: fixed; ...

    简约的jQuery网页右侧在线客服特效

    `js`文件夹则包含JavaScript代码，如`script.js`，实现了上述的jQuery特效和功能。 总的来说，"简约的jQuery网页右侧在线客服特效"巧妙地融合了jQuery的动态效果和CSS的视觉设计，为用户提供了一种便捷且友好的在线...

    jQuery蓝色网页右侧栏悬浮在线客服代码.rar

    本资源提供的"jQuery蓝色网页右侧栏悬浮在线客服代码"，就是一种经典的JavaScript特效动画，它将客服对话框设计为悬浮在右侧栏，不干扰用户浏览主内容，同时又能随时吸引用户的注意力。 首先，我们需要了解...

    一个简约橙色风格的jQuery网页右侧在线客服特效，网站悬浮客服代码，带返回顶部按钮与二维码的qq在线客服代码

    比如，客服按钮、悬浮框、返回顶部按钮的样式，以及整个页面的橙色主题色调。 7. JavaScript交互：在`index.html`中，可能还包含了内联JavaScript或者引用了外部JS文件，用于实现页面的动态行为。例如，当用户点击...

    仿MacOS苹果系统底部菜单特效代码

    "仿MacOS苹果系统底部菜单特效代码"就是一个这样的例子，它利用JavaScript（js）和CSS3技术，实现了MacOS苹果操作系统底部菜单的动画效果。这个项目不仅能让用户感受到接近原生操作系统的交互体验，还能为网页增添一...

    jQuery网页右下角悬浮在线客服代码.zip

    `属性可以确保元素固定在页面的底部右侧。 4. **事件监听**：jQuery的`click()`函数用于监听用户的点击事件。当用户点击悬浮按钮时，触发相应的回调函数，展示或隐藏聊天窗口。 5. **动态效果**：jQuery提供了多种...

    html5手机端动画展开收缩导航菜单特效

    JavaScript可以通过修改DOM（文档对象模型）来动态更新页面内容，使得菜单根据用户的行为进行展开或收缩。可能使用了JavaScript库或框架，如jQuery，来简化事件处理和DOM操作。 在提供的文件列表中，`index.html`是...

    jQuery右下角悬浮客服代码.zip

    例如，当用户滚动页面，客服窗口可能会保持在屏幕底部固定，或者在特定条件下自动显示。这些都可以通过CSS的定位属性（如position: fixed）和jQuery的scroll事件来实现。 在压缩包文件"jiaoben7206"中，可能包含了...

    强大的javascript特效

    48. 代码高亮：让代码段更具可读性，如Prism.js或highlight.js。 49. 画布动画：利用HTML5 Canvas绘制动画，如Three.js用于3D动画。 50. 模态对话框：弹出可交互的对话框，用于确认、警告或提供详细信息，如Sweet...

Magicbox
Global site tag (gtag.js) - Google Analytics