令人震撼的图片展示效果-JS特效-爱易网页

令人震撼的图片展示效果

日期：2014-05-18　浏览次数：20113 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
 html {
  overflow: hidden;
 }
 body {
  background: #222;
  width: 100%;
  height: 100%;
  cursor: crosshair;
 }
 .spanSlide {
  position: absolute;
  background: #000;
  font-size: 1px;
  overflow: hidden;
 }
 .imgSlide {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  overflow: hidden;
 }
 .txtSlide {
  position: absolute;
  top: 5%;
  left: 50px;
  width:100%;
  color:#FFF;
  font-family: arial, helvetica, verdana, sans-serif;
  font-weight: bold;
  font-size:96px;
  letter-spacing:12px;
  filter: alpha(opacity=70);
  -moz-opacity:0.7;
  opacity:0.7;
 }
</style>
<script type="text/javascript">
var ym=0;
var ny=0;
createElement = function(container, type, param){
 o=document.createElement(type);
 for(var i in param)o[i]=param[i];
 container.appendChild(o);
 return o;
}
mooz = {
 O:[],
 /////////
 mult:6,
 nbI:5,
 /////////
 rwh:0,
 imgsrc:0,
 W:0,
 H:0,
 Xoom:function(N){
  this.o = createElement(document.getElementById("screen"), "span", {
   'className':'spanSlide'
  });
  img = createElement(this.o, "img", {
   'className':"imgSlide",
   'src':mooz.imgsrc[N%mooz.imgsrc.length].src
  });
  spa = createElement(this.o, "span", {
   'className':"imgSlide"
  });
  txt = createElement(spa, "span", {
   'className':"txtSlide",
   'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
  });
  this.N = 10000+N;
 },
 mainloop:function(){
  with(this){
   for(i=0; i<mooz.nbI; i++) {
    O[i].N += (ym-ny)/8000;
    N = O[i].N%nbI;
    ti = Math.pow(mult,N);
    with(O[i].o.style){
     left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
     top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
     zIndex = Math.round(10000-ti*.1);
     width  = Math.round(ti*rwh)+"px";
     height = Math.round(ti)+"px";
    }
   }
  }
  setTimeout("mooz.mainloop();", 16);
 },
 oigres:function(){
  with(this){
   W = parseInt(document.getElementById("screen").style.width);
   H = parseInt(document.getElementById("screen").style.height);
   imgsrc = document.getElementById("images").getElementsByTagName("img");
   rwh = imgsrc[0].width/imgsrc[0].height;
   for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
   mainloop();
  }
 }
}
document.onmousemove = function(e){
 if(window.event) e=window.event;
 ym = (e.y || e.clientY);
 if(ym/2>ny)ny=ym/2;
}
window.onload = function(){
 ym = ny+50;
 mooz.oigres();
}
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
 <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>
 <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>
 <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
</div>
<div id="images" style="visibility:hidden">
 <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg">
 <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg">
 <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg">
 <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg">
 <img title="flowers" src="http://preview.zcool.com.</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1387">下一篇：背景变暗的div可拖动提示窗口</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34431' title='刘强东向总理建言：打击有组织有规模的售假商家' target="_blank">
                        刘强东向总理建言：打击有组织有规模的售假商家</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34384' title='小米盗版有理激怒乐视：提500部盗播证据猛追打' target="_blank">
                        小米盗版有理激怒乐视：提500部盗播证据猛追打</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34312' title='京东物流"最后一公里"：颠覆阿里或者被阿里干掉' target="_blank">
                        京东物流"最后一公里"：颠覆阿里或者被阿里干掉</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34363' title='阿里物流搭上邮政：京东，我们在终点等你！' target="_blank">
                        阿里物流搭上邮政：京东，我们在终点等你！</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34277' title='阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账' target="_blank">
                        阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34196' title='OPPO创始人陈明永：我们是怎么做营销的 ' target="_blank">
                        OPPO创始人陈明永：我们是怎么做营销的 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34083' title='火一把就死： 百度魔图验证社交游戏衰亡宿命' target="_blank">
                        火一把就死： 百度魔图验证社交游戏衰亡宿命</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10804' title='联发科享用价钱战 专利难以摆脱高通 ' target="_blank">
                        联发科享用价钱战 专利难以摆脱高通 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34197' title='苹果已经允许开发者提交64位应用程序' target="_blank">
                        苹果已经允许开发者提交64位应用程序</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2024 爱易网页 当前在线：356人　
        网站在22时49分7秒内访问总人数：235137人
    当前 12.21%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

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