当你向下滚动时候，图片才会渐变显示出来，如何做到的？

于娜 2011-04-23 12:33:16

当你向下滚动条时候，图片才会渐变显示出来，如何做到的？

类似下面网页的效果

http://www.ekoooo.com/html/tubiao/

...全文

649 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

a34020249 2011-04-26

打赏
举报

支持一楼，一楼好样儿的。

tang3567 2011-04-26

打赏
举报

异毛

我用监控看了下楼主提供的页面的请求，根本就不存在异步。

jayan611 2011-04-26

打赏
举报

1楼的很不错

shichao102471077 2011-04-25

打赏
举报

传说中的异步加载。支持一楼！！！！

hepeng_8 2011-04-24

打赏
举报

this._elems = $$A.filter(
opt.images || container.getElementsByTagName("img"), filter
);

tang3567 2011-04-24

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script src="jquery-1.6b1.js"></script>

<script>

	function b(){

		$("#divT").fadeIn("2500");

	}

	

	window.onscroll=b;

</script>

</head>



<body>

<br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div style="display:none;opacity:0.1" id="divT">

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" id="img1" alt=""/>

</div>

</body>

</html>

jQuery的
JS还没研究出来

tang3567 2011-04-24

打赏
举报

至于这个渐现

我估计他是全部加载完了之后，隐藏起来，然后滚动的时候调整div的透明度，这个div包含了一张图片

tang3567 2011-04-24

打赏
举报

没有做过，但是我想思路大概是这样

页面打开的时候不直接给img标签的src一个真实的图片地址，而是把地址保存起来

比如
<img alt="image/test1.gif" src="image/load.gif"/>
<img alt="image/test2.gif" src="image/load.gif"/>
<img alt="image/test3.gif" src="image/load.gif"/>
<img alt="image/test4.gif" src="image/load.gif"/>
<img alt="image/test5.gif" src="image/load.gif"/>
image/load.gif是一个小图片

浏览器滚动的时候就取滚动变化的数值

变化的数值超过多少就表示某一组图片已经出现在浏览器的可视范围之内了

JS脚本就读取这一组图片遍历将它们的src修改成alt属性对应的值

另外如果img标签src为空的或者是个取不到的图片会显示alt的内容，这个要注意。

sssschenyi 2011-04-24