如果获取Div的scrollTop值

更新时间：2016年9月20日 19:06 点击：1914

<div style="width:100%; overflow-x:hidden;overflow-y:scroll;height:100px;" id="nono" onClick="go()">
<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院
</div>
<script>
function go(){
alert(document.getElementById('nono').scrollTop);
}
</script>

第一 Iframe 代码：<iframe src="class.html" scrolling="no" frameborder="0" id="classpage" style="height:expression(1); aho:expression(autoResize())" ></iframe>

第二被嵌入的页面的body标签： <body onload=parent.document.all.classpage.height=document.body.scrollHeight>

第三 Iframe 的使用页里增加 js 控制代码

function autoResize()
{
try
{
document.all["classpage"].style.height=classpage.document.body.scrollHeight
}
catch(e){}
}

有时候在浏览网页的时候会发现：有的网站用html来传值，根据传值的不同显示不同的内容。其代码
  <script language="JavaScript" type="text/javascript">
  
  </script>

效果：使用Windows系统的用户在关机的时候，出现的界面只允许用户选择关机、注销或取消动作，而桌面上的程序都不能使用，并且屏幕呈现灰色状态。Windows关机效果如图22.1所示。

网页中使用此效果好处：在网页上运用这种关机效果有什么好处呢？首先，由于单击某一链接后，将用户此时不可用的操作隐藏在后台，将可用的操作放在屏幕最上层，并高亮显示，可以避免用户的误操作。其次，将信息高亮显示，也可以提醒用户应该注意的事项。

原理：在网页中实现这种效果的原理很简单。创建两个图层，一个为遮盖层，覆盖整个页面，并且显示为灰色；另一个图层作为高亮显示的部分，在遮盖层的上方，这可通过设置图层的z-index属性来设置。当取消关机效果后，只需将这两个图层元素在页面中删除即可。

代码：
<html>
<head>
<title>ajax关机效果</title>
<style type="text/css">
#lightbox {/*该层为高亮显示层*/
       BORDER-RIGHT: #fff 1px solid;
       BORDER-TOP: #fff 1px solid;
       DISPLAY: block;
       Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
       BACKGROUND: #fdfce9; /*设置背景色*/
       LEFT: 50%;
       MARGIN: -220px 0px 0px -250px;
       BORDER-LEFT: #fff 1px solid;
       WIDTH: 500px;
       BORDER-BOTTOM: #fff 1px solid;
       POSITION: absolute;
       TOP: 50%;
       HEIGHT: 400px;
       TEXT-ALIGN: left
}
#overlay {/*该层为覆盖层*/
      DISPLAY: block;
      Z-INDEX: 9998; /*设置高亮层的下方*/
      FILTER: alpha(opacity=20); /*设置成透明*/
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #000;
      moz-opacity: 0.8;
      opacity: .80
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>

<div id="overlay"></div>

<div id="lightbox"><a href="#" onclick="javascript:f()">关闭</a> <a href="#" onclick="javascript:f1()">打开</a></div>
</body>
</html>
<script>
function f()
{
  document.getElementById("overlay").style.display="none";
}
function f1()
{
document.getElementById("overlay").style.display="block";
}
</script>

注意：在IE浏览器中如果有<select>标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。图22.3所示的是IE浏览器中<select>标记的效果，图22.4所示的是Mozzila Firefox中<select>标记的效果。

图22.3  IE浏览器中<select>标记

图22.4  Mozzila Firefox浏览器中<select> 标记
所以在使用IE浏览器时，要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
       selects[i].style.visibility = visibility;
}

<DIV id=demo onmouseover=ii=1 style="OVERFLOW: hidden; HEIGHT: 500px" onmouseout=ii=0>
<DIV id=demo1>
<div align="center">
<a href='#' target='_blank'><img src='images/k.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片1</a><br>
<a href='#' target='_blank'><img src='images/j.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片2</a><br>
<a href='#' target='_blank'><img src='images/I.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片3</a><br>
<a href='#' target='_blank'><img src='images/h.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片4</a><br>
<a href='#' target='_blank'><img src='images/g.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片5</a><br>
</div>
</DIV>
<DIV id=demo2></DIV>
<SCRIPT>
var ii=0;t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function qswhMarquee(){
if (ii==1)return
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
setInterval(qswhMarquee,20)
</SCRIPT>

[!--infotagslink--]

上一篇: 让层位置固定不随滚动条拖动

下一篇: window.open实现网页对话框

PHP成员变量获取对比(类成员变量)
下面本文章来给大家介绍在php中成员变量的一些对比了，文章举了四个例子在这例子中分别对不同成员变量进行测试与获取操作，下面一起来看看。有如下4个代码示例，你认...2016-11-25
php 获取用户IP与IE信息程序
php 获取用户IP与IE信息程序 function onlineip() { global $_SERVER; if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('HTTP_CLIENT_IP');...2016-11-25
php获取一个文件夹的mtime的程序
php获取一个文件夹的mtime的程序了，这个就是时间问题了，对于这个问题我们来看小编整理的几个例子，具体的操作例子如下所示。 php很容易获取到一个文件夹的mtime，可以...2016-11-25
如何获取网站icon有哪些可行的方法
获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。更好的办法是通过google提供的服务来实现：http://www.google.com/s2/favi...2014-06-07
详解redis desktop manager安装及连接方式
这篇文章主要介绍了redis desktop manager安装及连接方式，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-15
jquery如何获取元素的滚动条高度等实现代码
主要功能：获取浏览器显示区域（可视区域）的高度： $(window).height(); 获取浏览器显示区域（可视区域）的宽度：$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度：$(document).width();...2015-10-21
jquery获取div距离窗口和父级dv的距离示例
jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。（1）先介绍jquery.offset().top / left css：复制代码代码如下: *{ mar...2013-10-13
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03
Jquery 获取指定标签的对象及属性的设置与移除
1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31
C#获取字符串后几位数的方法
这篇文章主要介绍了C#获取字符串后几位数的方法,实例分析了C#操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
jquery获取tagName再进行判断
如果是为了取到tagName后再进行判断，那直接用下面的代码会更方便： $(element).is('input') 如果是要取到标签用作到别的地方，可以使用一下代码： $(element)[0].tagName 或： $(element).get(0).tagName...2014-05-31
DOM XPATH获取img src值的query
复制代码代码如下:$nodes = @$xpath->query("//*[@id='main_pr']/img/@src");$prurl = $nodes->item(0)->nodeValue;...2013-10-04
PHP 如何获取二维数组中某个key的集合
本文为代码分享，也是在工作中看到一些“大牛”的代码，做做分享。具体是这样的，如下一个二维数组，是从库中读取出来的。代码清单：复制代码代码如下: $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'ema...2014-06-07
php获取汉字拼音首字母的方法
现实中我们经常看到这样的说明，排名不分先后，按姓名首字母进行排序。这是中国人大多数使用的排序方法。那么在php程序中该如何操作呢？下面就分享一下在php程序中获取汉字拼音的首字母的方法，在网上搜到的大多数是有问题的...2015-10-23
iscroll.js 用法介绍
最新版下载： http://www.csdn123.com/uploadfile/2015/0428/20150428062734485.zip 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生...2016-05-19
使用C#获取系统特殊文件夹路径的解决方法
本篇文章是对使用C#获取系统特殊文件夹路径的解决方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25
php如何获取文件的扩展名
网上也有很多类似的方法，不过都存在这样那样的不严谨的问题，本文就不一一分析了，这里只给出最正确的利用php 获取文件扩展名（文件后缀名）的方法。 function get_extension($filename){ return pathinfo($filename,PATHIN...2015-10-30
基于JavaScript获取鼠标位置的各种方法
这篇文章主要介绍了基于JavaScript获取鼠标位置的各种方法 ,需要的朋友可以参考下...2015-12-18
C#获取变更过的DataTable记录的实现方法
这篇文章主要介绍了C#获取变更过的DataTable记录的实现方法,对初学者很有学习借鉴价值,需要的朋友可以参考下...2020-06-25
如何获取百度搜索结果页中解密之后的真实链接
大家用百度搜索的时候，可能会发现，结果链接用的还是百度的链接，点击之后才会跳转到另外一个页面，另外一个页面的真实链接如何获取到呢？？通过分析发现：可以看出，返回...2016-05-19

如果获取Div的scrollTop值

相关文章

阁下可能感兴趣的内容

推荐阅读