所以,我正在为一个客户制作摄影作品集网站,她非常希望她的照片在浏览器窗口中出现时能够淡入。因此,我进行了一些研究,似乎jquery插件lazyload
非常完美。问题是,她还非常希望她的照片能够水平滚动,而lazyload
似乎只适用于垂直滚动的网页。我搜索了一下,发现lazyload
应该可以在侧向滚动的div中工作,使用以下脚本:
$("img").lazyload({
container: $("#container")
});
但似乎什么也没发生。
目前我的代码如下:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script>
$(function() {
$("#content img.fadeload").lazyload({
container: $("#content"),
placeholder : "images/white.jpg",
effect : "fadeIn",
effectspeed: 1000
});
});
</script>
<style>
#content {
font-size: 100%;
position: absolute;
height: 574px;
width: 750px;
margin-top: -277px;
margin-bottom: 0px;
padding-left: 240px;
padding-top: 0px;
padding-bottom: 0px;
top: 50%;
overflow-x: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="content">
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo01.jpg" alt="photo01"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo02.jpg" alt="photo02"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo03.jpg" alt="photo03"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo04.jpg" alt="photo04"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo05.jpg" alt="photo05"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo06.jpg" alt="photo06"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo07.jpg" alt="photo07"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo08.jpg" alt="photo08"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo09.jpg" alt="photo09"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo10.jpg" alt="photo10"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo11.jpg" alt="photo11"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo12.jpg" alt="photo12"/>
</div>
</body>
这里有一个临时链接,如果你想看到
lazyload
插件在当前状态下的功能(或缺乏功能),请点击链接。如果您对让lazyload按照您的意愿运行或者推荐其他图像淡入效果方法有任何建议,都非常感谢。非常感谢!