使用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 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
javascript中的delete使用详解
Apr 11 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
JavaScript 基本概念
Jan 20 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
async/await优雅的错误处理方法总结
Jan 30 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
php date()日期时间函数详解
2010/05/16 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
深入理解python多进程编程
2016/06/12 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python列表推导式入门学习解析
2019/12/02 Python
如何使用repr调试python程序
2020/02/28 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
放飞梦想演讲稿200字
2014/08/26 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
信仰纪录片观后感
2015/06/08 职场文书
运动会通讯稿50字
2015/07/20 职场文书
小学中队委竞选稿
2015/11/20 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python