-1

我已经搜索了几个小时来寻找当用户到达其位置时会在图像上创建淡入效果的代码，但我的代码继续部分工作或根本不工作。我认为这可能是我的 css 定位将它扔掉但我可能是错的。如果有人能指出我的错误，这肯定会帮助我，并为其他有类似问题的人澄清这个问题。

这是我试图模仿的小提琴（仅使用图像而不是 div）：http: //jsfiddle.net/tcloninger/e5qaD/

当我将上面的小提琴代码合并到我的网站中时，所有带有“隐藏我”类的图像都会立即消失，而不是在我到达它们时一次一个。所以我找到了这个小提琴，看看它是否能更好地检测元素位置。 http://jsfiddle.net/moagrius/wN7ah/

这导致根本没有图像淡入。这是我试图一起使用的代码片段：

检测 .hideme 类的位置并使其在窗口中时不透明的代码：

$(document).ready(function() {

$.fn.isOnScreen = function(){

var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

$(window).scroll(function () {
    if($('.hideme').isOnScreen()){
        $('.hideme').animate({'opacity':'1'},500);
});

如何设置我的 html 以及 .hideme 类在哪里的示例 div：

<div id="two" class="page">
<img src="img/splithead.png" alt="divided attention" class="icons vandhcenter"/>
<div class="abs">
<img src="text/div2.png" alt="section two text" class="text hideme"/>     
</div>
</div>

如果问题是定位，这里是我的css的摘录：

div.page
{
display:block;
height:100%;
position:relative;
width:100%;
}

img.icons
{
height:600px;
width:800px;
}

.vandhcenter 
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

img.text
{
float:left;
position:relative;
width:800px;
}

.hideme 
{
opacity:0;
}

如果所有这些在这样的列表中看起来令人困惑，这里有一个 jsfiddle 链接，这样你就可以看到我的所有代码。没有真正的输出，因为我没有上传我所有的图像文件，但可能更容易看到代码。jsfiddle,net/uxB4D/

4

1 回答 1

0

你所描述的听起来像“延迟加载”。已经有很多插件可以做到这一点；例如： http: //www.appelsiini.net/projects/lazyload

于 2014-01-30T17:48:26.180 回答