<!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=utf-8" />
<title>仿谷歌图片分块加载的JS代码</title>
<style type="text/css">
*{padding:0;margin:0;border:none;font-size:12px;}
body{background:url(images/bg.jpg);cursor:url(images/Pen.CUR),auto}
#view{position:relative;top:0px;width:100%;overflow:hidden;height:630px}
#drag{width:20160px;position:absolute;left:0px;top:0px;}
#maps li,#maps img{width:210px;height:210px;display:block;vertical-align:bottom;font-size:0;background:black;}
#maps img{filter:alpha(opacity=0);opacity:0}
#maps li{float:left;font-size:30px;color:black;text-align:center;vertical-align:200px}
</style>
<script type="text/javascript" src="js/D.js"></script>
<script type="text/javascript" src="js/Tw.js"></script>
<script type="text/javascript">
function drag(){
var T=tool,html="",i=null;
var maps=T.$("#maps");
var drag=T.$("#drag");
var W=T.broswerXY("clientWidth");
var H=T.broswerXY("clientHeight");
var back=-(20186-W);
for(i=1;i<291;i++){
html += "<li><img src='images/load.gif' loadsrc='images/qmsht_" + i + ".jpg' /></li>";
}
function fd(element, start, end, speed, callback){
clearInterval(element.fd);
var speed = speed || 2;
element.fd = setInterval(function() {
start = start < end ? Math.min(start + speed, end) : Math.max(start - speed, end);
element.style.opacity = start / 100;
element.style.filter = "alpha(opacity=" + start + ")";
if (start == end) {
clearInterval(element.fd);
if (callback) {callback.call(element)}
}
},
15)
}
maps.innerHTML=html;
imgs=T.$("#maps","img");
var lis=T.$("#maps","li");
function show(){
for(var x=0;x<i-1;x++){
if(T.rect(lis[x]).left<W+T.scrollXY("scrollLeft") && imgs[x].ed==null){
imgs[x].src=imgs[x].getAttribute("loadsrc");
imgs[x].ed=1
fd(imgs[x],0,100)
}
}
};
show();
function dis(e,mv,sw){
clearInterval(drag.move)
drag.t=0;
drag.d=30;
drag.b=parseInt(drag.style.left) || 0;
//drag.c=e-drag.b;
drag.c=(sw ? e:e-drag.b)
drag.move=setInterval(function(){
if(drag.t++<drag.d){drag.style.left=mv(drag.t,drag.b,drag.c,drag.d)+"px"}else{
clearInterval(drag.move);
if(sw){show()}
}
},20)
}
drag.onmousedown=function(e){
T.cancelClick(e);
clearInterval(drag.move);
this.here1=parseInt(drag.style.left)||0;
this.here2=parseInt(drag.style.top)||0;
this.x=T.mouse.x(e)
drag.onmousemove=function(e){
T.cancelClick(e);
drag.style.left=this.here1+T.mouse.x(e)-this.x+"px";
}
drag.onmouseup=function(e){
clearInterval(drag.move);
this.onmousemove=null;
if(parseInt(drag.style.left)>0 ) {
dis(0,Tween.Back.easeOut);
}//if
if(parseInt(drag.style.left)<back ) {
dis(-(20160-T.broswerXY("clientWidth")),Tween.Back.easeOut)
}//if
if(T.mouse.x(e)-this.x<0 && parseInt(drag.style.left)>back) {
dis(-T.mouse.x(e),Tween.Quad.easeOut,1)
}
if(T.mouse.x(e)-this.x>0 && parseInt(drag.style.left)<0) {
dis(T.mouse.x(e),Tween.Quad.easeOut,1)
}
}//up
}
}
</script>
</head>
<body>
<style type="text/css">
.tp,.bp{height:20px;width:100%;position:absolute;}
.tp{background:url(images/edge_top_black.gif) repeat-x;z-index:111;left:0;top:0}
.bp{background:url(images/edge_bottom_black.gif) repeat-x;left:0;bottom:0;}
.lt{height:100%;position:absolute;left:0;top:0;background:url(images/edge_left_black.gif);width:20px;z-index:111}
.rt{height:100%;position:absolute;right:0;top:0;background:url(images/edge_right_black.gif);width:20px;z-index:111}
#maps{float:left;}
</style>
<div id="view" style="cursor:url(images/Pen.CUR)),auto">
<div class="tp"></div>
<div class="lt"></div>
<div id="drag" style="position:absolute;left:0;">
<ul id="maps"></ul>
</div>
<div class="rt"></div>
<div class="bp"></div>
</div>
<script type="text/javascript">
drag()
</script>
</body>
</html>
清明上河图.zip
需积分: 9 42 浏览量
2022-11-15
09:57:00
上传
评论
收藏 3.65MB ZIP 举报
清明上河图.zip （296个子文件） 
Pen.CUR 4KB Thumbs.db 1.3MB
load.gif 3KB edge_top_black.gif 310B
index.html 4KB
bg.jpg 155KB qmsht_131.jpg 13KB qmsht_276.jpg 13KB qmsht_118.jpg 12KB qmsht_159.jpg 12KB qmsht_134.jpg 12KB qmsht_120.jpg 12KB qmsht_117.jpg 12KB qmsht_133.jpg 12KB qmsht_132.jpg 12KB qmsht_140.jpg 12KB qmsht_274.jpg 12KB qmsht_227.jpg 12KB qmsht_255.jpg 12KB qmsht_162.jpg 12KB qmsht_142.jpg 12KB qmsht_81.jpg 12KB qmsht_163.jpg 11KB qmsht_161.jpg 11KB qmsht_275.jpg 11KB qmsht_138.jpg 11KB qmsht_119.jpg 11KB qmsht_282.jpg 11KB qmsht_277.jpg 11KB qmsht_145.jpg 11KB qmsht_181.jpg 11KB qmsht_254.jpg 11KB qmsht_141.jpg 11KB qmsht_136.jpg 11KB qmsht_179.jpg 11KB qmsht_122.jpg 11KB qmsht_135.jpg 11KB qmsht_137.jpg 11KB qmsht_180.jpg 11KB qmsht_271.jpg 11KB qmsht_144.jpg 11KB qmsht_283.jpg 11KB qmsht_185.jpg 11KB qmsht_130.jpg 11KB qmsht_182.jpg 11KB qmsht_121.jpg 11KB qmsht_281.jpg 11KB qmsht_177.jpg 11KB qmsht_236.jpg 11KB qmsht_216.jpg 11KB qmsht_192.jpg 11KB qmsht_229.jpg 11KB qmsht_228.jpg 11KB qmsht_22.jpg 11KB qmsht_224.jpg 11KB qmsht_225.jpg 11KB qmsht_248.jpg 10KB qmsht_116.jpg 10KB qmsht_184.jpg 10KB qmsht_160.jpg 10KB qmsht_196.jpg 10KB qmsht_178.jpg 10KB qmsht_123.jpg 10KB qmsht_238.jpg 10KB qmsht_258.jpg 10KB qmsht_226.jpg 10KB qmsht_99.jpg 10KB qmsht_237.jpg 10KB qmsht_210.jpg 10KB qmsht_66.jpg 10KB qmsht_124.jpg 10KB qmsht_107.jpg 10KB qmsht_246.jpg 10KB qmsht_186.jpg 10KB qmsht_143.jpg 10KB qmsht_241.jpg 10KB qmsht_128.jpg 10KB qmsht_139.jpg 10KB qmsht_287.jpg 10KB qmsht_183.jpg 10KB qmsht_127.jpg 10KB qmsht_239.jpg 10KB qmsht_230.jpg 10KB qmsht_164.jpg 10KB qmsht_234.jpg 10KB qmsht_150.jpg 10KB qmsht_83.jpg 10KB qmsht_187.jpg 10KB qmsht_245.jpg 10KB qmsht_108.jpg 10KB qmsht_44.jpg 10KB qmsht_256.jpg 10KB qmsht_146.jpg 10KB qmsht_38.jpg 10KB qmsht_23.jpg 10KB qmsht_46.jpg 10KB qmsht_129.jpg 10KB qmsht_286.jpg 10KB qmsht_259.jpg 10KB qmsht_208.jpg 10KB共 296 条
- 1
- 2
- 3
资源评论
