文档章节

图片预加载

newSpring中国梦
 newSpring中国梦
发布于 2016/09/04 20:30
字数 1148
阅读 3
收藏 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="你们真懒" />
    <meta name="description" content="真的很懒" />
    <title>站长特效 根据下拉滚动条而加载图片效果 站长特效网</title>
    <script src="http://www.zzjs.net/img/jquery_zzjs.js" type="text/javascript" language="javascript"></script>
    <script type="text/javascript">
        $(function(){
            var $winH = $(window).height();
            var $img = $("#show_zzjs_net img");
            var $imgH = parseInt($img.height()/2);
            var $srcDef = "http://www.zzjs.net/img/1018_20110128wwwzzjsnet.gif";
            runing();
            $(window).scroll(function(){
                runing();
            })
            function runing(){
                $img.each(function(i){
                    var $src = $img.eq(i).attr("original");
                    var $scroTop = $img.eq(i).offset();
                    if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
                    {
                        if($img.eq(i).attr("src") == $srcDef){
                            $img.eq(i).hide();
                        }
                        $img.eq(i).attr("src",function(){return $src}).fadeIn(300);
                    }
                })
            }
        })
    </script>
    <style type="text/css">
        *{ border:0;}
        a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}
    </style>
</head>
<body>
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<div id="show_zzjs_net">
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>
    <a href="#"><img src="http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif" width="160" height="160" original="http://img3.imgtn.bdimg.com/it/u=1839795860,2099779963&fm=21&gp=0.jpg" /></a>

</div>
</body>
</html>

© 著作权归作者所有

上一篇: 寻找徐峥小游戏
下一篇: 城市三级联动
newSpring中国梦
粉丝 0
博文 6
码字总数 3196
作品 0
海淀
程序员
私信 提问

暂无文章

关于ThinkPHP5.1+的Log无法记录SQL调试记录的小经历

项目开发阶段,除了基本编码外,性能也需要实时关注与优化。之前我的大部分项目都是使用ThinkPHP5.0以及ThinkPHP3.2,对于框架提供的日志记录和日志配置都差不多,然后使用ThinkPHP5.1的时候...

北桥苏
20分钟前
0
0
TiDB Binlog 源码阅读系列文章(四)Pump server 介绍

作者: satoru 在 上篇文章 中,我们介绍了 TiDB 如何通过 Pump client 将 binlog 发往 Pump,本文将继续介绍 Pump server 的实现,对应的源码主要集中在 TiDB Binlog 仓库的 pump/server.go...

TiDB
23分钟前
0
0
OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.4K
18
Windows下学习C语言有哪些集成开发软件?

前言 初学者学习C语言遇到的最大困难想必就是搭建环境了,相当多的初学者就是被搭建环境导致放弃了学习编程,就我自己的经验而言,初学编程不应该受限于环境,使用成熟好用的环境就可以了,之...

Allen5G
昨天
2
0
Hello,Servlet!

Servlet来源 上文说过了servlet是什么,我们从servlet是什么中也可以了解到servlet的来源:servlet是Java的一个类,并且能够运行在web容器上,所以servlet是按照web容器的规范和Java的规范写...

蒙尘
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部