`
ayaya
  • 浏览: 453831 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

DIV+CSS+javascript实现DIV对象显示在页面任何位置,并随滚动条移动

阅读更多
以下实现DIV对象随滚动条移动,始终显示在页面右下位置!

一:首先在head区域加入如下代码:

<SCRIPT LANGUAGE="JavaScript">
<!--
function scall()
{
   ShowBottoms();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>

二:在HEAD区域加入如下CSS代码:

<style type="text/css">
<!--

/* CSS Document */
#ShowBottom {
    font:Arial, Helvetica, sans-serif;
    font-size:14px;       
    width: 60px;
height:50px;
background:#FFFFFF;
    border-right-color:#377CA6;
    border-right-width:1px;
    border-right-style:solid;
    border-left-color:#377CA6;
    border-left-width:1px;
    border-left-style:solid;
border-top-color:#377CA6;
    border-top-width:1px;
    border-top-style:solid;
border-bottom-color:#377CA6;
    border-bottom-width:1px;
    border-bottom-style:solid;
position:absolute; bottom:0px; right:0px;
}
-->

</style>

三:在页面中的BODY任何地方加入如下代码

<div id=“ShowBottom“>初来乍到<br/>我想了解<br /><a HREF="www.51qqdm.cn" target="_blank">网站宗旨</a></div>

//下面这段代码必须跟在以上的DIV下面,否则就出错误!
<SCRIPT LANGUAGE="JavaScript">
<!--
function ShowBottoms()
{
document.getElementById("ShowBottom").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("ShowBottom").offsetHeight)+"px";
document.getElementById("ShowBottom").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("ShowBottom").offsetWidth)+"px";
}
</SCRIPT>

分享到:
评论

相关推荐

    DIV+CSS+JS版可展开滚动客服特效

    3. 当页面滚动时,使用JavaScript检测滚动位置,如果需要,将客服窗口固定在屏幕底部。 4. 创建客服窗口的HTML结构,使用CSS定义其样式和滚动效果,例如,设置滚动条样式、聊天记录容器的高度等。 5. 实现聊天功能,...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    在网页设计中,滚动条是不可或缺的元素,尤其是在内容超过屏幕显示范围时。HTML和CSS是构建网页的基础,其中HTML负责结构,CSS负责样式。本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    "让DIV固定在页面的某个...让DIV固定在页面的某个位置,而不随着滚动条的滚动而移动,可以通过使用CSS的position属性或JavaScript来实现。然而,在IE浏览器中,我们可能需要使用JavaScript来解决fixed值不生效的问题。

    随滚动条移动的DIV层

    ### 随滚动条移动的DIV层:实现与解析 #### 一、概述 在网页设计与开发过程中,为了提高用户体验以及页面的交互性,常常会遇到需要制作一个随滚动条移动的元素(如提示框、广告栏等)。本文将通过分析一段具体的...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    静态网站,DIV+CSS布局

    “最新消息”栏可能是一个列表,展示最近更新的新闻或文章,使用CSS实现动态效果,如滚动条或动画。 在创建这样的静态网站时,开发者需要考虑以下几点: 1. **响应式设计**:确保网站在不同设备(如手机、平板电脑...

    基于HTML5 div+css布局的视频网站,实现视频播放、音乐播放以及图片浏览功能.zip

    这个API允许开发者监听元素何时进入视口,从而在图片实际需要显示时才加载,提高页面性能和用户体验。 6. **响应式设计**: 为了确保网站在不同设备上都能良好展示,项目可能采用了响应式设计。HTML5的`...

    div随滚动条上下滚动

    `,并指定`top`和`left`属性,该`div`就会固定在屏幕的相应位置,不随页面内容的滚动而移动。 2. **jQuery实现** jQuery提供了方便的DOM操作和事件处理,使得实现这个效果更简洁。可以监听窗口的滚动事件`$(window...

    Dreamweaver之DIV+CSS的使用技巧

    此设置可以在内容超出容器高度时自动显示滚动条,同时隐藏溢出的部分,保持页面整洁。 #### 四、小窗口弹出的问题 **问题描述**:实现一个弹出窗口的功能,该窗口出现时,背景变为灰色不可操作状态。 **解决方案*...

    使用html+css+javascript实现聊天室的展示界面,并给出源码

    在 `addMessage` 函数中,我们创建了一个新的 `&lt;div&gt;` 元素,用于显示消息,并将其添加到聊天记录中。我们还设置了聊天记录的滚动条,自动滚动到底部。 小结 使用 HTML、CSS 和 JavaScript,我们可以轻松地实现一...

    纯css控制内容随滚动条滚动,可放任意位置

    标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...

    不随滚动条滚动而滚动的浮动效果

    不随滚动条滚动而滚动的浮动效果 ...不随滚动条滚动而滚动的浮动效果可以通过使用CSS中的position属性和JavaScript来实现。本篇文章为读者提供了一个基本的示例代码,读者可以根据需要进行修改和扩展。

    左侧导航(js+div+css)

    例如,可以使用`position: fixed`让导航始终在屏幕左侧显示,无论用户滚动到页面的哪个位置。 其次,HTML中的`&lt;div&gt;`元素是一个通用的容器,可以用来组合其他HTML元素,为它们提供样式或行为。在创建左侧导航时,`...

    利用div+jquery自定义滚动条

    例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container { overflow-x: auto; } ``` 如果要显示竖向滚动条,只需将`overflow-x`改为`overflow-y`。同时,如果希望同时...

    CSS+DIV+JS导航显示

    在网页设计领域,CSS(Cascading Style Sheets)与DIV元素是构建页面布局的重要工具,而JavaScript(JS)则用于实现交互性和动态效果。"CSS+DIV+JS导航显示"这个主题聚焦于如何利用这些技术来创建高效且用户体验良好...

    几个经典的导航条,css+div+js写的,个人收集

    2. **滚动监听**:通过`window.scrollY`和`window.innerHeight`等属性,当用户滚动到特定位置时,可以固定导航条在顶部,实现“粘性”效果。 3. **动态加载**:结合Ajax,可以实现导航条链接不刷新页面的情况下加载...

    Div+Css实现图层固定,吊窗

    在页面中,经常会遇到这样的效果,一个图层总是在某一个位置,无论滚动条滚动与否,这个Div始终都在这个位置显示。刚开始以为是用js实现的,确实,可以利用js去实现,但是在css中有更好的方法。利用position属性...

    浮动div,页面两边滚随滚动条滚动的DIV

    综上所述,"浮动div,页面两边滚随滚动条滚动的DIV"是一种通过CSS和JavaScript实现的动态布局效果,它可以使页面上的特定内容始终保持在用户视线范围内,提供更好的用户体验。在实际应用中,可能还需要考虑不同设备...

    《精通CSS+DIV网页样式与布局》光盘源码

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜...

Global site tag (gtag.js) - Google Analytics