使用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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
vue数字类型过滤器的示例代码
2017/09/07 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python中的列表知识点汇总
2015/04/14 Python
Python实现的计数排序算法示例
2017/11/29 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
django Serializer序列化使用方法详解
2018/10/16 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
django正续或者倒序查库实例
2020/05/19 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
经典安踏广告词
2014/03/21 职场文书
骨干教师考核方案
2014/05/09 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android