目前需要时时检验一个广告div始终展示在网页中,但是,即使这个div满足以下条件:
#ad_wrapper{
display:block;
visibility:visible;
z-index:999999;
opacity:1;
font-size:14px;
position:absolute;
}
但是,如果#adWrapper的margin-left:-9999999999px;或者text-indent:99999999px;或者color:#fff或者top:-999999px或者一个div覆盖在#ad_wrapper上面等等都能使其不可见,只有电脑知道,而用户的眼睛看不到,请问有没有好的方法检验一定真实可见?
jQuery本身不直接提供这样的方法,本身只有visible去判断元素是否可见,但对漂移到屏幕外或行高设的非常小无能为力。一些sticky插件是通过计算offset去确定元素位置/是否在屏幕里。
你需要自己写函数或者直接增强jQuery的选择器,我最近几个月没写Javascript,没办法马上给你代码。但从网上摘抄了一段,原理都一样。
//增强jQuery选择器中筛选器的部分、增加一个名为cheat的筛选项
//jQuery选择器中的$('#id:first'), :后面的部分就这么实现的
$.expr.filters.cheat = function(element) {
return (
//如果元素不在屏幕可见区域返回true
(element.offsetLeft + element.offsetWidth) < 0
|| (element.offsetTop + element.offsetHeight) < 0
|| (element.offsetLeft > window.innerWidth || element.offsetTop > window.innerHeight)
);
};
上面的仅仅判断了是否元素在可见区域中,如果滚动出去或CSS改变margin负数很大(移出去)就会返回true,只是很简单的判断,你可以根据需求继续加条件,例如检查CSS中的某一项是否小于某个数值(Number(element.css('font-size').replace(/px$/, '')) < 2)。
上面的增强,可以用以下几种方式使用,假设元素#cool位置在屏幕可见位置内。
$('#cool:cheat'); //选不到到该元素
$('#cool').is(':cheat'); //false
$('#cool').not(':cheat'); //true
需要有点Javascript基础,抱歉上次回答太过情绪化,做学文的研究精神应该与其他无关。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。