1顶

简单的图片延时显示输出js特效

稿源：互联网 2022-04-02 21:40:06 点击： 13305 撤稿纠错

imgLoad("imgLoad"); imgLoad("windowImg","li",1); /* 参数1为图片所在模块参数2为图片所在循环元素；不写默认为“li” 参数3为window滚动触发事件，这个参数存在时必须填写参数2；不写默认为模块滚动触发事件 */

以下讨论的是和延时显示相关的简单的图片延时显示输出js特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="不！" />
<meta name="keywords" content="要！" />
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon">
<style type="text/css">
* {margin:0; padding:0; vertical-align:top;}
div{width: 116px;height: 500px;overflow:auto;}
ul{display:block;}
li{width: 60px;height: 60px; float:left; display:inline; overflow:hidden; padding:10px; margin:10px; }
img{width: 60px;height: 60px;display:block; border:none;background:url("http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_loading.gif") no-repeat center; }
.clear{ zoom:1;clear:both}
.clear:after{ display:block;content:"�020";overflow:hidden;height:0; clear:both}
</style>
</head>
<body>
<div id="aa" style="width:500px;height:50px"></div>
<div class="" id="imgLoad" style="height:500px;width:116px">
<ul class="clear" >
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
</ul>
</div>
<div class="" id="windowImg" style="height:auto">
<ul class="clear" >
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img1.yimk.com/docin_52944724_40x50.jpg" alt="我不知道我不知道" /></li>
 <li ><img docsrc="http://img2.yimk.com/docin_57236237_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img2.yimk.com/docin_52170045_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_52086494_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_52932803_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img3.yimk.com/docin_51149246_40x50.jpg" alt="我不知道我不知道"/></li>
  <li ><img docsrc="http://img3.yimk.com/docin_51900282_40x50.jpg" alt="我不知道我不知道"/></li>
 <li ><img docsrc="http://img4.yimk.com/docin_57207179_40x50.jpg" alt="我不知道我不知道"/></li>
</ul>
</div>
<script type="text/javascript">
function getStyle(o,n){
 return o.currentStyle?o.currentStyle[n]:(document.defaultView.getComputedStyle(o,"").getPropertyValue(n))
}
function   getXYWH(o){
var   nLt=0;
var   nTp=0;
  var   offsetParent   =   o;
  while   (offsetParent!=null   &&   offsetParent!=document.body)   {
  nLt+=offsetParent.offsetLeft;
  nTp+=offsetParent.offsetTop;
  offsetParent=offsetParent.offsetParent;
  }
  this.showL=nLt;
  this.showT=nTp;
  this.showW=this.offsetWidth;
  this.showH=this.offsetHeight;
}
function imgLoad(o,tags,f){
 var d=document,
 doc = d[d.compatMode == "CSS1Compat"?'documentElement':'body'],
 o=d.getElementById(o),
 tags=tags?tags:"li";
 if(!o){return false}
  var j,s=o.getElementsByTagName("img"),
  e=o.getElementsByTagName(tags),
  topnum = (navigator.userAgent.indexOf("WebKit")==-1)?d.documentElement:d.body,
  autoLength = o.getElementsByTagName(tags)[0].getElementsByTagName("img").length,
  autoMarL = (!-[1,])?(parseInt(getStyle(e[0],"marginLeft"))):(parseInt(getStyle(e[0],"margin-left"))),
  autoMarR = (!-[1,])?(parseInt(getStyle(e[0],"marginRight"))):(parseInt(getStyle(e[0],"margin-right"))),
  autoMarT = (!-[1,])?(parseInt(getStyle(e[0],"marginTop"))):(parseInt(getStyle(e[0],"margin-top"))),
  autoMarB = (!-[1,])?(parseInt(getStyle(e[0],"marginBottom"))):(parseInt(getStyle(e[0],"margin-bottom"))),
  autoHeight = e[0].offsetHeight + autoMarT + autoMarB,
  autoWidth = e[0].offsetWidth + autoMarL + autoMarR,
  maxHeight = o.offsetHeight -16,
  maxWidth = o.offsetWidth - 16;
 var autoLoad = function(){
  var maxWindow = doc.clientHeight,
  sObj=new getXYWH(o);
  j = f?Math.ceil((maxWindow - sObj.showT)/autoHeight)*Math.ceil(maxWidth/autoWidth)*autoLength:Math.ceil(maxHeight/autoHeight)*Math.ceil(maxWidth/autoWidth)*autoLength;
  j = (j < 0) ? 0 : j;
  j = (j < s.length) ? j : s.length;
  //默认显示图片
  for(var i=0;i<j;i++){
  s[i].src = s[i].getAttribute("docsrc");
  }
 };
 //滚动显示
 var scrollLoad = function(){
  var activeHeight = f?topnum.scrollTop:o.scrollTop,
  activeWidth = f?topnum.scrollLeft:o.scrollLeft,
  m= (Math.ceil(activeHeight/autoHeight)*Math.ceil(maxWidth/autoWidth) + Math.ceil(activeWidth/autoWidth)*Math.ceil(maxHeight/autoHeight))*autoLength,
  n=((m+j)>e.length)?e.length:(m+j);
  for(var i = j;i<n;i++){
   s[i].src = s[i].getAttribute("docsrc");
   if(s[(e.length-1)].src!==""){
    break;
   }
  }
 };
 (f?window:o).onscroll = function(){
  scrollLoad();
 };
 //重新计算
 window.onresize = function(){
  autoLoad();
  scrollLoad();
 };
 autoLoad();
}
imgLoad("imgLoad");
imgLoad("windowImg","li",1);
/*
参数1为图片所在模块
参数2为图片所在循环元素；不写默认为“li”
参数3为window滚动触发事件，这个参数存在时必须填写参数2；不写默认为模块滚动触发事件
*/
</script>
</body>
</html>

关于简单的图片延时显示输出js特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011060271027.shtml方便下次再访问哦。

·上一篇： jquery实现链接文字飘浮渐变提示特效代码
·下一篇： 上下滚动页面展示的特效演示新手级参考

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

简单的图片延时显示输出js特效

文章分类LIST >>返回首页

最新游戏

最新新闻