使用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中null与undefined分析
Jul 25 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
js实现计算器功能
Aug 10 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/01 无线电
php单例模式实现方法分析
2015/03/14 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python日志模块logging简介
2015/04/13 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Python二分查找详解
2015/09/13 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
2014年医院科室工作总结
2014/12/20 职场文书
新店开张宣传语
2015/07/13 职场文书
公司岗位说明书
2015/10/08 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js