现在很多社区或者其他网页的相册中的图片都有从模糊变清楚的效果,例如QQ空间的相册、人人相册之类的
其实实现这种效果非常简单,加载过程用不着任何的Javascript技术。
一般相册都会有小的预览图片,我们所看到的不清楚的图片其实就是这些小的预览图片被拉大的效果,当我们点击小图片时,开始加载大图片,大的图片覆盖在小图片上(使用绝对定位)就出现了慢慢变清晰的效果。
<div style="width:500px;height:300px;position:relative">
<div style="width:500px;height:300px;"><img src="小图片地址" width="500" height="300" /></div>
<!--小图片的大小被定义为大图片的大小值-->
<div style="width:500px;height:281px;position:absolute;top:0;"><img src="清晰图片的地址" width="500" height="300" /></div>
</div>
如此而已
至于怎么样点击小图片开始加载大图片就要用到AJAX了
分享到:
相关推荐
android从相册加载图片并把图片保存到另外一个文件夹下
利用Galler利用Gallery和ImageSwitcher实现在线相册图片预览功能(异步加载图片)y和ImageSwitcher实现在线相册图片预览功能(异步加载图片)
一款Flash相册特效,图片由高亮模糊变清淅,十分漂亮的效果,用在Flash相册中肯定是很不错的动画效果。
JS实现图片加载模糊到清晰
将系统相册中的图片加载到GridView中
简单js图片加载从模糊到清晰代码是一款运用了图片预加载特性,先放一张小图占位,然后判断大图是否加载完毕,加载完毕后就用大图的src替换占位图的src,注:测试时请将网速设置低一些。
Android利用Gallery和ImageSwitcher实现在线相册图片预览功能(异步加载图片)
动态加载图片相册点击图片后可以弹框展现图片,支持鼠标键盘方向键翻页。
一个利用picturebox做预览的电子相册.实现动态加载
CSS3相册图片加载进度条效果,加载图片过程中在页面顶部出现蓝色的进度条,右上角有不停转动的loading效果,可以点击按钮加载更多图片,兼容主流浏览器.rar
修改了原先图片加载的方式,原先加载图片的方式会在手机系统图库图片过多时会出现卡顿等待现象,用户体验极度不佳,现改成不用等待立马显现图片,具体原理跟系统图库的图片加载显示原理一样,基本不用任何等待时间
3D相册加载本地制定路径下的图片
仿QQ相册从模糊到清晰 ...其实可以理解为:两张图片起位置一样,一张用100X75的缩略图显示...在这个图片的旁边还有一个图片是完整图片,因为是浮动的在缩略图上面的,所以完整图片的加载从上而下时 就会形成由模糊到清晰的效果
jqueryCSS3实现的相册图片加载进度条特效源码.zip
仿 [Tidy相册] 背景模糊效果 [注意:本资源来自网络,如有侵权,请联系我删除,谢谢。]
xml加载图片 相册 as3的相关代码111111111111111111111
自己封装的一个类似于相册的图片加载库 点击后放大缩小,仿微信相册
翻页相册源码 手动翻页,动态加载图片,手动翻页,动态加载图片
JS交互式3D相册切换模糊特效是一款可以设置图片数量和模糊度的3d图片相册代码。