使用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 相关文章推荐
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
原生JavaScript实现刮刮乐
Sep 29 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
缅甸的咖啡简史
2021/03/04 咖啡文化
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
python ddt实现数据驱动
2018/03/14 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
学前教育毕业生自荐信范文
2013/12/24 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
科技工作者先进事迹
2014/08/16 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
企业法人授权委托书
2014/09/25 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
网吧员工管理制度
2015/08/05 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA