- 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) &&
$(window).scrollTop() <= ($node.offset().top + $node.height())) {
console.log('在可视窗口中');
return;
}
}
- 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll', function(){
isVisible($node);
});
function isVisible($node){
if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) &&
$(window).scrollTop() <= ($node.offset().top + $node.height())) {
console.log('true');
return;
}
}
- 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
$(window).on('scroll', function(){
if (!$box.data('data-show')) {
isVisible($node);
}
});
function isVisible($node){
if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) &&
$(window).scrollTop() <= ($node.offset().top + $node.height())) {
console.log('true');
$node.data('data-show', true);
return;
}
}
- 图片懒加载的原理是什么？
- 图片的懒加载(动态加载)就是通过读取img元素，然后获得img元素的data-src属性的值赋予动态创建的图片的src，从而实现了图片的创建。
<img src="" data-src="url" alt="">
实现如下回到顶部效果（难度: ***）当页面滚动到一定距离时，窗口右下角会出现回到顶部
按钮，点击按钮页面会滚动到顶部。效果预览
实现效果实现如下无限滚动效果(难度：****)。当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色提示
：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。效果预览ps：自己实现效果后，可参考 demo 里的注释
实现效果
本博客版权归 本人和饥人谷所有，转载需说明来源
