使用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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
javascript读取xml
2006/11/04 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
Vue程序调试的方法
2019/06/17 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python进行TCP端口扫描的实现
2018/12/21 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
SQL面试题
2013/04/30 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
求职自荐信怎么写
2015/03/04 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技