`
ayaya
  • 浏览: 450075 次
  • 性别: 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固定在页面的某个位置而不随着滚动条随意滚动

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

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

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

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

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

    精通CSS+DIV网页样式与布局视频教材

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

    js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框

    3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置...

    javascript 滚动条实例

    javascript+div+css滚动条实例

    JQuery&CSS;&CSS;+DIV实例大全.rar

    45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47.jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48.jQuery电子...

    网站设计 期末大作业 HTML+CSS+JavaScript 蛋糕店网站(附完整实验报告)

    运用div+css做了首页面index.html的整体布局,细节部分使用表格进行布局 共四个页面图,主页面,注册页面,登录页面,功能页面;核心代码有搜索框,滚动新闻条,二级下拉菜单。 (本网站设计有完整的实验报告,可...

    【JavaScript源代码】javascript实现自定义滚动条效果.docx

     在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是:自定义滚动条,隐藏原始滚动条。 scrollbar.js ...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用...

    JS控制div跳转到指定的位置的几种解决方案总结

    主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。

    精通CSS.DIV.网页样式与布局 源码

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

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...

    精通CSS+DIV网页样式与布局

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

    JavaScript_JQuery_CSS_DIV漂亮的实例

    45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子...

    精通CSS+DIV网页样式与布局Part1

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

    零基础学HTML CSS源代码

    设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章(源代码\第10章) 示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....

    html+JS+CSS特效(居家旅行必备之良品)

    标签上下层滑动替换特效代码,超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,...

    解决ReportViewer的双竖滚动条的问题

    解决 ReportViewer 的双竖滚动条的问题 解决 ReportViewer 的双竖滚动条的问题是一...通过添加一个名为 "hiddenY" 的 CSS 样式和使用 JavaScript 来隐藏竖滚动条,我们可以成功地解决 ReportViewer 的双竖滚动条问题。

    精通CSS.DIV网页样式与布局视频01

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

Global site tag (gtag.js) - Google Analytics