使用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 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
javascript实现微信分享
Dec 23 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
浅谈实现在线预览PDF的几种解决办法
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
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python GUI编程完整示例
2019/04/04 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
铁路工务反思材料
2014/02/07 职场文书
2014年清明节寄语
2014/04/03 职场文书
购房协议书
2014/04/11 职场文书
学习十八大的心得体会
2014/09/01 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
高考升学宴主持词
2019/06/21 职场文书