以下实现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固定在页面的某个位置,而不随着滚动条的滚动而移动,可以通过使用CSS的position属性或JavaScript来实现。然而,在IE浏览器中,我们可能需要使用JavaScript来解决fixed值不生效的问题。
在页面中,经常会遇到这样的效果,一个图层总是在某一个位置,无论滚动条滚动与否,这个Div始终都在这个位置显示。刚开始以为是用js实现的,确实,可以利用js去实现,但是在css中有更好的方法。利用position属性...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2 图片符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的...
3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置...
javascript+div+css滚动条实例
45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47.jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48.jQuery电子...
运用div+css做了首页面index.html的整体布局,细节部分使用表格进行布局 共四个页面图,主页面,注册页面,登录页面,功能页面;核心代码有搜索框,滚动新闻条,二级下拉菜单。 (本网站设计有完整的实验报告,可...
在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是:自定义滚动条,隐藏原始滚动条。 scrollbar.js ...
31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用...
主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 ...
而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜...
45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜...
设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章(源代码\第10章) 示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....
标签上下层滑动替换特效代码,超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,...
解决 ReportViewer 的双竖滚动条的问题 解决 ReportViewer 的双竖滚动条的问题是一...通过添加一个名为 "hiddenY" 的 CSS 样式和使用 JavaScript 来隐藏竖滚动条,我们可以成功地解决 ReportViewer 的双竖滚动条问题。
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜...