使用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自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JS highcharts实现动态曲线代码示例
Oct 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
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
探讨如何把session存入数据库
2013/06/07 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
django框架如何集成celery进行开发
2017/05/24 Python
Python协程的用法和例子详解
2017/09/09 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python异步Web框架sanic的实现
2020/04/27 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
财产公证书格式
2014/04/10 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
工地食品安全责任书
2015/05/09 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers