使用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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
js null undefined 空区别说明
Jun 13 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
webpack入门+react环境配置
Feb 08 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
vue配置多页面的实现方法
May 22 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
JS鼠标滚动分页效果示例
2017/07/05 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
旅游安全协议书
2014/04/21 职场文书
党员演讲稿
2014/09/04 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫