使用jQuery判断Div是否在可视区域的方法 判断div是否可见


Posted in Javascript onFebruary 17, 2016
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>js</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var a = document.getElementById("eq").offsetTop;
if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
alert("div在可视范围");
}
});
});
</script>
</head>
<body>
<div style="width:1px;height:2000px;"></div>
<div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
<div style="width:1px;height:2000px;"></div>
</body>
</html>

以上代码是小编给大家介绍的使用jQuery判断Div是否在可视区域的方法,希望对大家有所帮助。接下来一段代码给大家介绍jquery如何判断div是否隐藏,具体代码如下所示:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jquery 如何判断div是否隐藏|
jquery判断div是否隐藏
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8" />
<title>绑定函数</title>
<script
src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
var
temp=
$("#test").is(":hidden");//是否隐藏
var
temp1=
$("#test").is(":visible");//是否可见
alert(temp) ;
alert(temp1) ;
});
</script>
</head>
<body>
<p
onclick='test()'>刷新测试</p>
<div
id="test" style="display:none"></div>
</body>
</html>
Javascript 相关文章推荐
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 #Javascript
深入php面向对象、模式与实践
Feb 16 #Javascript
三个js循环的关键字示例(for与while)
Feb 16 #Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 #Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 #Javascript
深入浅析AngularJS和DataModel
Feb 16 #Javascript
Javascript中的Prototype到底是什么
Feb 16 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
深入理解PHP内核(一)
2015/11/10 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
将HTML自动转为JS代码
2006/06/26 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
基于Python实现文件大小输出
2016/01/11 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python正则捕获操作示例
2017/08/19 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python使用folium excel绘制point
2019/01/03 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
办公设备采购方案
2014/03/16 职场文书
贷款担保书范文
2014/05/13 职场文书
文明寝室标语
2014/06/13 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
gateway网关接口请求的校验方式
2021/07/15 Java/Android
浅谈JavaScript作用域
2021/12/06 Javascript
python 单机五子棋对战游戏
2022/04/28 Python