使用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 相关文章推荐
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
jQuery选择器全集详解
Nov 24 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
Vue渲染函数详解
Sep 15 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
JavaScript实现图片放大镜效果
Jun 27 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 学习资料零碎东西
2010/12/04 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
python2.7实现爬虫网页数据
2018/05/25 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python之pymysql的使用小结
2019/07/01 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
类和结构的区别
2012/08/15 面试题
GWT的应用有哪两种部署模式
2012/12/21 面试题
汉语专业应届生求职信
2013/10/01 职场文书
给领导的检讨书
2014/02/16 职场文书
《童年》教学反思
2014/02/18 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript