超炫的图片展示代码  

来自: 分享 作者: 水煮鱼 时间: 2010-11-12 11:41 查看: 8915 回复: 3

截图:
demo5.png

源代码:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>2</title>
  5. <meta http-equiv="imagetoolbar" content="no">
  6. <style type="text/css">
  7. html {
  8.   overflow: hidden;
  9. }
  10. body {
  11.   background: #222;
  12.   width: 100%;
  13.   height: 100%;
  14.   cursor: crosshair;
  15. }
  16. .spanSlide {
  17.   position: absolute;
  18.   background: #000;
  19.   font-size: 1px;
  20.   overflow: hidden;
  21. }
  22. .imgSlide {
  23.   position: absolute;
  24.   left: 5%;
  25.   top: 5%;
  26.   width: 90%;
  27.   height: 90%;
  28.   overflow: hidden;
  29. }
  30. .txtSlide {
  31.   position: absolute;
  32.   top: 5%;
  33.   left: 50px;
  34.   width:100%;
  35.   color:#FFF;
  36.   font-family: arial, helvetica, verdana, sans-serif;
  37.   font-weight: bold;
  38.   font-size:96px;
  39.   letter-spacing:12px;
  40.   filter: alpha(opacity=70);
  41.   -moz-opacity:0.7;
  42.   opacity:0.7;
  43. }
  44. </style>
  45. <script type="text/javascript">
  46. var ym=0;
  47. var ny=0;
  48. createElement = function(container, type, param){
  49. o=document.createElement(type);
  50. for(var i in param)o[i]=param[i];
  51. container.appendChild(o);
  52. return o;
  53. }
  54. mooz = {
  55. O:[],
  56. /////////
  57. mult:6,
  58. nbI:5,
  59. /////////
  60. rwh:0,
  61. imgsrc:0,
  62. W:0,
  63. H:0,
  64. Xoom:function(N){
  65.   this.o = createElement(document.getElementById("screen"), "span", {
  66.    'className':'spanSlide'
  67.   });
  68.   img = createElement(this.o, "img", {
  69.    'className':"imgSlide",
  70.    'src':mooz.imgsrc[N%mooz.imgsrc.length].src
  71.   });
  72.   spa = createElement(this.o, "span", {
  73.    'className':"imgSlide"
  74.   });
  75.   txt = createElement(spa, "span", {
  76.    'className':"txtSlide",
  77.    'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
  78.   });
  79.   this.N = 10000+N;
  80. },
  81. mainloop:function(){
  82.   with(this){
  83.    for(i=0; i<mooz.nbI; i++) {
  84.     O[i].N += (ym-ny)/8000;
  85.     N = O[i].N%nbI;
  86.     ti = Math.pow(mult,N);
  87.     with(O[i].o.style){
  88.      left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
  89.      top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
  90.      zIndex = Math.round(10000-ti*.1);
  91.      width  = Math.round(ti*rwh)+"px";
  92.      height = Math.round(ti)+"px";
  93.     }
  94.    }
  95.   }
  96.   setTimeout("mooz.mainloop();", 16);
  97. },
  98. oigres:function(){
  99.   with(this){
  100.    W = parseInt(document.getElementById("screen").style.width);
  101.    H = parseInt(document.getElementById("screen").style.height);
  102.    imgsrc = document.getElementById("images").getElementsByTagName("img");
  103.    rwh = imgsrc[0].width/imgsrc[0].height;
  104.    for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
  105.    mainloop();
  106.   }
  107. }
  108. }
  109. document.onmousemove = function(e){
  110. if(window.event) e=window.event;
  111. ym = (e.y || e.clientY);
  112. if(ym/2>ny)ny=ym/2;
  113. }
  114. window.onload = function(){
  115. ym = ny+50;
  116. mooz.oigres();
  117. }
  118. </script>
  119. </head>
  120. <body>
  121. <div style="position:absolute;left:50%;top:50%">
  122. <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>
  123. <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>
  124. <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
  125. </div>
  126. <div id="images" style="visibility:hidden">
  127. <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg">
  128. <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg">
  129. <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg">
  130. <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg">
  131. <img title="flowers" src="http://preview.zcool.com.cn/code/js/04/2/flo.jpg">
  132. </div>
  133. </body>
  134. </html>
复制代码
最新回复 3 条  
鸿雁2011-1-23 08:39:34
我喜欢这个
xueling2011-4-6 21:44:36
回复 2# 鸿雁


    感谢分享
robinhuang2011-11-30 17:14:59
嗯 不错  借用走拉  谢谢
您需要登录后才可以回帖 登录 | 注册
Smilies Code
高级模式