使用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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
js实现DIV的一些简单控制
Jun 04 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
js实现无缝轮播图插件封装
Jul 31 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
Smarty模板快速入门
2007/01/04 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Django Admin实现上传图片校验功能
2016/03/06 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
python读取LMDB中图像的方法
2018/07/02 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
自我鉴定的范文
2013/10/03 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
高中班主任评语大全
2014/04/25 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
篮球比赛口号
2014/06/10 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2019毕业论文致谢词
2019/06/24 职场文书