[关闭]
@fantaghiro 2015-02-03T10:43:49.000000Z 字数 43776 阅读 2894

妙味课堂 - 实例

学习笔记 js 前端 妙味课堂

JS分页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js分页</title>
  6.     <style>
  7.     a {margin: 5px;}
  8.     </style>
  9.     <script>
  10.     window.onload = function(){
  11.         page({
  12.             id : 'div1',
  13.             nowNum : 7,
  14.             allNum : 10,
  15.             callBack : function(now, all){
  16.                 alert('当前页：' + now + '，总共页：' + all);
  17.             }
  18.         });
  19.     }
  21.     function page(opt){
  22.         if(!opt.id){return false};
  23.         var obj = document.getElementById(opt.id);
  24.         var nowNum = opt.nowNum || 1;
  25.         var allNum = opt.allNum || 5;
  26.         var callBack = opt.callBack || function(){};
  28.         if(nowNum >= 4 && allNum >=6){
  29.             var oA = document.createElement('a');
  30.             oA.href = '#1';
  31.             oA.innerHTML = '首页';
  32.             obj.appendChild(oA);
  33.         }
  35.         if(nowNum >=2){
  36.             var oA = document.createElement('a');
  37.             oA.href = '#' + (nowNum -1);
  38.             oA.innerHTML = '上一页';
  39.             obj.appendChild(oA);
  40.         }
  42.         if(allNum <= 5){
  43.             for(var i=1; i<=allNum; i++){
  44.                 var oA = document.createElement('a');
  45.                 oA.href = '#' + i;
  46.                 if(nowNum == i){
  47.                     oA.innerHTML = i;
  48.                 } else {
  49.                     oA.innerHTML = '[' + i + ']';
  50.                 }
  52.                 obj.appendChild(oA);
  53.             }
  54.         } else {
  55.             for(var i=1; i<=5; i++){
  56.                 var oA = document.createElement('a');
  58.                 if(nowNum == 1 || nowNum == 2){
  59.                     oA.href = '#' + i;
  60.                     if(nowNum == i){
  61.                         oA.innerHTML = i;
  62.                     } else {
  63.                         oA.innerHTML = '[' + i + ']';
  64.                     }
  66.                 } else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
  67.                     oA.href = '#' + (allNum - 5 + i);
  68.                     if((allNum - nowNum) == 0 && i == 5){
  69.                         oA.innerHTML = (allNum - 5 + i);
  70.                     } else if ((allNum - nowNum) == 1 && i == 4){
  71.                         oA.innerHTML = (allNum - 5 + i);
  72.                     } else {
  73.                         oA.innerHTML = '[' + (allNum - 5 + i) + ']';
  74.                     }
  75.                 } else {
  76.                     oA.href = '#' + (nowNum - 3 + i);
  77.                     if(i == 3){
  78.                         oA.innerHTML = nowNum - 3 + i;
  79.                     } else {
  80.                         oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
  81.                     }
  82.                 }
  84.                 obj.appendChild(oA);
  85.             }
  86.         }
  88.         if((allNum - nowNum) >= 1){
  89.             var oA = document.createElement('a');
  90.             oA.href = '#' + (nowNum + 1);
  91.             oA.innerHTML = '下一页';
  92.             obj.appendChild(oA);
  93.         }
  95.         if((allNum - nowNum) >= 3 && allNum >= 6){
  96.             var oA = document.createElement('a');
  97.             oA.href = '#' + allNum;
  98.             oA.innerHTML = '尾页';
  99.             obj.appendChild(oA); 
  100.         }
  102.         callBack(nowNum, allNum);
  104.         var aA = obj.getElementsByTagName('a');
  106.         for(var i=0; i<aA.length; i++){
  107.             aA[i].onclick = function(){
  108.                 var nowNum = parseInt(this.getAttribute('href').substring(1));
  109.                 obj.innerHTML = '';
  110.                 page({
  111.                     id : opt.id,
  112.                     nowNum : nowNum,
  113.                     allNum : allNum,
  114.                     callBack : callBack
  115.                 })
  116.                 return false; //阻止默认事件，避免#数字添到地址栏
  117.             }
  118.         }
  119.     }
  120.     </script>
  121. </head>
  122. <body>
  123. <div id="div1">
  124.     <!-- <a href="#1">首页</a>
  125.         <a href="#3">上一页</a>
  126.         <a href="#2">[2]</a>
  127.         <a href="#3">[3]</a>
  128.         <a href="#4">4</a>
  129.         <a href="#5">[5]</a>
  130.         <a href="#6">[6]</a>
  131.         <a href="#5">下一页</a>
  132.         <a href="#10">尾页</a> -->    
  133. </div>
  134. </body>
  135. </html>

选中文字分享

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选中分享</title>
  6.     <style>
  7.     #p1 {width: 300px; margin: 50px;}
  8.     #div1 {position: absolute; display: none;}
  9.     </style>
  10.     <script>
  11.     window.onload = function(){
  13.         function selectText(){
  14.             if(document.selection){ //针对ie
  15.                 return document.selection.createRange().text; //返回选中的文字 
  16.             } else { //标准
  17.                 return window.getSelection().toString();
  18.             }
  19.         }
  21.         var oP = document.getElementById('p1');
  22.         var oDiv = document.getElementById('div1');
  24.         oP.onmouseup = function(ev){
  25.             var ev = ev || window.event;
  26.             var left = ev.clientX;
  27.             var top = ev.clientY;
  28.             if(selectText().length > 10){
  29.                 setTimeout(function(){
  30.                     oDiv.style.display = 'block';
  31.                     oDiv.style.left = left + 'px';
  32.                     oDiv.style.top = top + 'px';
  33.                 }, 100);
  35.             } else {
  36.                 oDiv.style.display = 'none';
  37.             }
  38.         }
  40.         oP.onclick = function(ev){
  41.             var ev = ev || window.event;
  42.             ev.cancelBubble = true;
  43.         }
  45.         document.onclick = function(){
  46.             oDiv.style.display = 'none';
  47.         }
  49.         oDiv.onclick = function(){
  50.             window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectText() + '&url=http://www.baidu.com';
  51.         }
  52.     }
  53.     </script>
  54. </head>
  55. <body>
  56. <p id="p1">
  57.     关于腾讯企业邮，你不知道的那些事:一、无需登录邮箱，可用微信直接收发邮件二、邮箱绑定微信，可及时获取新邮件通知三、微信动态密码，可确保邮箱安全不被盗超过40万家公司已经在使用腾讯企业邮，每天超过800家企业正在加入。为了节省您的时间，请您 在线登记，腾讯企业邮团队将为您提供详尽的咨询服务。要了解更多信息，您还可以登录腾讯企业邮官网
  58. </p>
  59. <div id="div1"><img src="img/share.gif" alt=""></div>
  60. </body>
  61. </html>

无缝切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>无缝切换</title>
  6.     <style>
  7.     * {margin: 0; padding: 0;}
  8.     li {list-style: none;}
  9.     #div1 {width: 350px; height: 60px; border: 1px #000 solid; position: relative; margin: 0 auto; overflow: hidden;}
  10.     #div1 ul {position: absolute; left: 0;}
  11.     #div1 ul li {width: 80px; height: 60px; margin-right: 10px; float: left;}
  12.     img {width: 80px; height: 60px;}
  13.     </style>
  14.     <script src="move.js"></script>
  15.     <script>
  16.     window.onload = function(){
  17.         var oInput = document.getElementById('input1');
  18.         var oUl = document.getElementById('ul1');
  19.         var aLi = oUl.getElementsByTagName('li');
  20.         var oneSize = aLi[0].offsetWidth + 10; //10是margin
  21.         var iNum = 4;
  22.         var bBtn = true;
  24.         function getWidth(){
  25.             oUl.style.width = oneSize * aLi.length + 'px';
  26.         }
  28.         getWidth(); 
  30.         // 复制节点的方法: cloneNode(boolean) : 如果参数为true，就是一起复制里面的子节点；如果参数为false，就只复制当前节点，不复制里面的子节点。
  31.         oInput.onclick = function(){
  33.             if(bBtn){
  34.                 bBtn = false;
  36.                 for(var i=0; i<iNum; i++){
  37.                     var oLi = aLi[i].cloneNode(true);
  38.                     oUl.appendChild(oLi);
  39.                     getWidth();
  40.                 }
  42.                 startMove(oUl, {
  43.                     left : - iNum * oneSize
  44.                 }, function(){
  45.                     for(var i=0; i<iNum; i++){
  46.                         oUl.removeChild(aLi[0]);
  47.                         oUl.style.left = 0;
  48.                     }
  49.                     bBtn = true;
  50.                 })  
  51.             }           
  52.         }
  53.     }
  54.     </script>
  55. </head>
  56. <body>
  57. <input type="button" value="切换" id="input1">
  58. <div id="div1">
  59.     <ul id="ul1">
  60.         <li><img src="photo/1.jpg"></li>
  61.         <li><img src="photo/2.jpg"></li>
  62.         <li><img src="photo/3.jpg"></li>
  63.         <li><img src="photo/4.jpg"></li>
  64.         <li><img src="photo/5.jpg"></li>
  65.     </ul>
  66. </div>
  67. </body>
  68. </html>

百叶窗效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>百叶窗效果</title>
  6.     <style>
  7.     * {margin: 0; padding: 0;}
  8.     li {list-style: none;}
  9.     #ul1, #ul2 {width: 300px; height: auto; float: left; border-top: 1px #000 solid; margin: 20px;}
  10.     li {width: 100%; height: 30px; overflow: hidden; position: relative; border-bottom: 1px dashed #333; line-height: 30px;}
  11.     li div {position: absolute; top: -30px;}
  12.     li div p {height: 30px;}
  13.     </style>
  14.     <script src="move.js"></script>
  15.     <script>
  16.     window.onload = function(){
  17.         var oUl = document.getElementById('ul1');
  18.         var oUl2 = document.getElementById('ul2');
  20.         toShow(oUl);
  21.         setTimeout(function(){
  22.             toShow(oUl2);
  23.         }, 2000);
  25.         function toShow(obj){   
  26.             var iNow = 0;
  27.             var timer = null;
  28.             var target = -30;
  29.             var aDiv = obj.getElementsByTagName('div');
  31.             setInterval(function(){
  32.                 toChange();
  33.             }, 4000);
  35.             function toChange(){
  36.                 target = target == 0 ? -30 : 0;
  37.                 timer = setInterval(function(){
  38.                     if(iNow == aDiv.length){
  39.                         clearInterval(timer);
  40.                         iNow = 0;
  41.                     } else {
  42.                         startMove(aDiv[iNow], {top: target})
  43.                         iNow++;
  44.                     }
  46.                 }, 100);
  47.             }
  48.         }
  49.     }
  50.     </script>
  51. </head>
  52. <body>
  53.     <ul id="ul1">
  54.         <li>
  55.             <div>
  56.                 <p>11111111</p>
  57.                 <p>22222222</p>
  58.             </div>
  59.         </li>
  60.         <li>
  61.             <div>
  62.                 <p>33333333</p>
  63.                 <p>44444444</p>
  64.             </div>
  65.         </li>
  66.         <li>
  67.             <div>
  68.                 <p>55555555</p>
  69.                 <p>66666666</p>
  70.             </div>
  71.         </li>
  72.         <li>
  73.             <div>
  74.                 <p>7777777</p>
  75.                 <p>8888888</p>
  76.             </div>
  77.         </li>
  78.         <li>
  79.             <div>
  80.                 <p>9999999</p>
  81.                 <p>8888888</p>
  82.             </div>
  83.         </li>
  84.         <li>
  85.             <div>
  86.                 <p>7777777</p>
  87.                 <p>6666666</p>
  88.             </div>
  89.         </li>
  90.     </ul>
  91.     <ul id="ul2">
  92.         <li>
  93.             <div>
  94.                 <p>11111111</p>
  95.                 <p>22222222</p>
  96.             </div>
  97.         </li>
  98.         <li>
  99.             <div>
  100.                 <p>33333333</p>
  101.                 <p>44444444</p>
  102.             </div>
  103.         </li>
  104.         <li>
  105.             <div>
  106.                 <p>55555555</p>
  107.                 <p>66666666</p>
  108.             </div>
  109.         </li>
  110.         <li>
  111.             <div>
  112.                 <p>7777777</p>
  113.                 <p>8888888</p>
  114.             </div>
  115.         </li>
  116.         <li>
  117.             <div>
  118.                 <p>9999999</p>
  119.                 <p>8888888</p>
  120.             </div>
  121.         </li>
  122.         <li>
  123.             <div>
  124.                 <p>7777777</p>
  125.                 <p>6666666</p>
  126.             </div>
  127.         </li>
  128.     </ul>
  129. </body>
  130. </html>

微博发布框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>微博发布框</title>
  6.     <style>
  7.     body {font-size: 12px;}
  8.     #div1 {width: 400px; margin: 20px auto;}
  9.     #div1 p {float: right; margin: 0;}
  10.     #div1 textarea {width: 400px; height: 100px;}
  11.     #div1 a {width: 50px; height: 30px; font-size: 16px; line-height: 30px; text-align: center; float: right; background: #00ff00; color: #fff;}
  12.     #div1 a.dis {background: #cccccc; color; #666}
  13.     </style>
  14.     <script>
  15.     //onchange: 当光标消失的时候，只能触发一次
  16.     // ie : onpropertychange : 输入连续触发
  17.     // 标准:oninput : 也是连续触发
  18.     window.onload = function(){
  19.         var oDiv = document.getElementById('div1');
  20.         var oP = oDiv.getElementsByTagName('p')[0];
  21.         var oT = oDiv.getElementsByTagName('textarea')[0];
  22.         var oA = oDiv.getElementsByTagName('a')[0];
  24.         var ie = !-[1,];
  25.         var bBtn = true;
  26.         var timer = null;
  27.         var iNum = 0;
  29.         oT.onfocus = function(){
  30.             if(bBtn){
  31.                 oP.innerHTML = '打击虚假消息，建设文明微博，还可以输入<span>140</span>字';
  32.                 bBtn = false;
  33.             }
  34.         }
  36.         oT.onblur = function(){
  37.             if(oT.value == ''){
  38.                 oP.innerHTML = '《新浪微博社区公约（征求意见稿）》意见征求';
  39.                 bBtn = true;
  40.             }
  41.         }
  43.         /*oT.onchange = function(){
  44.             console.log(1);
  45.         }*/
  47.         if(ie){
  48.             oT.onpropertychange = toChange;
  49.         } else {
  50.             oT.oninput = toChange;
  51.         }
  53.         function toChange(){
  54.             //英文字母算半个字；一个中文算一个字
  56.             var num = Math.ceil(getLength(oT.value)/2);
  57.             var oSpan = oDiv.getElementsByTagName('span')[0];
  59.             if(num <= 140){
  60.                 oSpan.innerHTML = 140 - num;
  61.                 oSpan.style.color = '';
  62.             } else {
  63.                 oSpan.innerHTML = num - 140;
  64.                 oSpan.style.color = 'red';
  65.             }
  67.             if(oT.value == '' || num > 140){
  68.                 oA.className = 'dis';
  69.             } else {
  70.                 oA.className = '';
  71.             }
  72.         }
  74.         oA.onclick = function(){
  75.             if(this.className == 'dis'){
  76.                 clearInterval(timer);
  77.                 timer = setInterval(function(){
  78.                     if(iNum == 5){
  79.                         clearInterval(timer);
  80.                         iNum = 0;
  81.                     } else {
  82.                         iNum++;
  83.                     }
  85.                     if(iNum%2){
  86.                         oT.style.background = 'red';
  87.                     } else {
  88.                         oT.style.background = '';
  89.                     }
  90.                 }, 100);
  91.             } else {
  92.                 alert('发布成功！');
  93.             }
  94.         }
  96.         function getLength(str){
  97.             return String(str).replace(/[^\x00-\xff]/g, 'aa').length; 
  98.             //用正则去匹配中文字符，找到一个中文字符，就用两个字母（比如aa）来替换，这样一个中文汉字就对应了两个字母的长度
  99.             //String(str) 不管传进来的参数str是什么，都转成字符串格式
  100.         }
  101.     }
  102.     </script>
  103. </head>
  104. <body>
  105.     <div id="div1">
  106.         <p>《新浪微博社区公约（征求意见稿）》意见征求</p>
  107.         <textarea></textarea>
  108.         <a class="dis" href="javascript:">发布</a>
  109.     </div>
  110. </body>
  111. </html>

微博登陆

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>微博登陆</title>
  6.     <style>
  7.     * {margin: 0; padding: 0;}
  8.     body {font: 12px/1.125 Arial, Helvetica, sans-serif;}
  9.     li {list-style: none;}
  10.     #login {width: 252px; height: 385px; background: #BFFFFF; margin: 20px auto; position: relative;}
  11.     .detail {margin: 0 0 5px 30px; position: relative; top: 110px;}
  12.     .detail input {color: #999; border: 1px solid #74c8e5; border-radius: 3px 3px 3px 3px; height: 15px; line-height: 14px; padding: 8px 5px 7px; width: 184px;}
  13.     #suggest {background: none repeat scroll 0 0 #fff; border: 1px solid #ccc; left: 30px; margin: 0; overflow: hidden; padding: 0; position: absolute; text-align: left; top: 142px; visibility: visible; width: 194px; z-index: 1; display: none;}
  14.     .note, .item {clear: both; color: #999; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0 1px; padding: 0 5px; white-space: nowrap;}
  15.     .active {white-space: nowrap; clear: both; color: rgb(153, 153, 153); cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0pt 1px; padding: 0pt 5px; background: none repeat scroll 0% 0% rgb(232, 244, 252);}
  16.     </style>
  17.     <script>
  18.     window.onload = function(){
  19.         var s1 = new Suggest();
  20.         s1.init(); //初始化程序
  21.     }
  23.     function Suggest(){
  24.         this.oInput = document.getElementById('input1');
  25.         this.oUl = document.getElementById('suggest');
  26.         this.aLi = this.oUl.getElementsByTagName('li');
  27.     }
  29.     Suggest.prototype = {
  30.         init : function(){
  31.             this.toChange();
  32.             this.toBlur();
  33.         },
  35.         toChange : function(){
  36.             //ie : onpropertychange
  37.             //标准: oninput
  39.             var ie = !-[1,];
  40.             var This = this;
  42.             if(ie){
  43.                 this.oInput.onpropertychange = function(){
  44.                     //this.showUl(); this指向不对
  45.                     if(This.oInput.value == ''){
  46.                         This.tips(); 
  47.                         return;
  48.                     }
  49.                     This.showUl();
  50.                     This.tips();
  51.                     This.sel(1);
  52.                 }
  53.             } else {
  54.                 this.oInput.oninput = function(){
  55.                     This.showUl();
  56.                     This.tips();
  57.                     This.sel(1);
  58.                 }
  59.             }
  60.         },
  62.         showUl : function(){
  63.             this.oUl.style.display = 'block';
  64.         },
  66.         toBlur : function(){
  67.             var This = this;
  68.             this.oInput.onblur = function(){
  69.                 This.oUl.style.display = 'none';
  70.             }
  71.         },
  73.         tips : function(){
  74.             var value = this.oInput.value;
  75.             var re = new RegExp('@' + value.substring(value.indexOf('@')+1) + '');
  77.             for(var i=1; i<this.aLi.length; i++){
  78.                 this.aLi[i].style.display = 'block';
  79.             }
  81.             if(re.test(value)){
  82.                 for(var i=1; i<this.aLi.length; i++){
  83.                     var oEmail = this.aLi[i].getAttribute('email');
  84.                     if(i==1){
  85.                         this.aLi[i].innerHTML = value;
  86.                     } else {
  87.                         if(re.test(oEmail)){
  88.                             this.aLi[i].style.display = 'block;'
  89.                         } else {
  90.                             this.aLi[i].style.display = 'none';
  91.                         }
  92.                     }
  93.                 }
  94.             } else {
  95.                 for(var i=1; i<this.aLi.length; i++){
  96.                     var oEmail = this.aLi[i].getAttribute('email');
  97.                     if(!oEmail){
  98.                         this.aLi[i].innerHTML = value;
  99.                     } else {
  100.                         this.aLi[i].innerHTML = value + oEmail;
  101.                     }
  102.                 }
  103.             }       
  104.         },
  106.         sel : function(iNow){
  107.             var This = this;
  109.             for(var i=1; i<this.aLi.length; i++){
  110.                 this.aLi[i].className = 'item';
  111.             }
  113.             if(this.oInput.value == ''){
  114.                 this.aLi[iNow].className = 'item';
  115.             } else {
  116.                 this.aLi[iNow].className = 'active';
  117.             }
  119.             for(var i=1; i<this.aLi.length; i++){
  120.                 this.aLi[i].index = i;
  121.                 this.aLi[i].onmouseover = function(){
  122.                     for(var i=1; i<This.aLi.length; i++){
  123.                         This.aLi[i].className = 'item';
  124.                     }
  125.                     this.className = 'active';
  126.                     iNow = this.index;
  127.                 }
  129.                 this.aLi[i].onmousedown = function(){
  130.                     This.oInput.value = this.innerHTML;
  131.                 }
  132.             }
  134.             this.oInput.onkeydown = function(ev){
  135.                 var ev = ev || window.event;
  137.                 if(ev.keyCode == 38){ //上
  138.                     if(iNow == 1){
  139.                         iNow = This.aLi.length-1;
  140.                     } else {
  141.                         iNow--;
  142.                     }
  144.                     for(var i=1; i<This.aLi.length; i++){
  145.                         This.aLi[i].className = 'item';
  146.                     }
  147.                     This.aLi[iNow].className = 'active';
  148.                 } else if(ev.keyCode == 40){ //下
  149.                     if(iNow == This.aLi.length-1){
  150.                         iNow = 1;
  151.                     } else {
  152.                         iNow++;
  153.                     }
  155.                     for(var i=1; i<This.aLi.length; i++){
  156.                         This.aLi[i].className = 'item';
  157.                     }
  158.                     This.aLi[iNow].className = 'active';
  159.                 } else if(ev.keyCode == 13){ //回车
  160.                     This.oInput.value = This.aLi[iNow].innerHTML;
  161.                     This.oInput.blur();
  162.                 }
  163.             }
  164.         }
  165.     }
  166.     </script>
  167. </head>
  168. <body>
  169.     <div id="login">
  170.         <div class="detail">
  171.             <input type="text" id="input1" maxlength="128" placeholder="邮箱/会员账号/手机号" autocomplete="off" node-type="loginname" class="name" tabindex="1" name="loginname">
  172.         </div>
  173.         <div class="detail">
  174.             <input type="password" maxlength="24" placeholder="请输入密码" node-type="password" class="pass" tabindex="2" name="password">
  175.         </div>
  176.         <ul id="suggest">
  177.             <li class="note">请选择邮箱类型</li>
  178.             <li email="" class="item"></li>
  179.             <li email="@sina.com" class="item">@sina.com</li>
  180.             <li email="@163.com" class="item">@163.com</li>
  181.             <li email="@qq.com" class="item">@qq.com</li>
  182.             <li email="@126.com" class="item">@126.com</li>
  183.             <li email="@vip.sina.com" class="item">@vip.sina.com</li>
  184.             <li email="@sina.cn" class="item">@sina.cn</li>
  185.             <li email="@hotmail.com" class="item">@hotmail.com</li>
  186.             <li email="@gmail.com" class="item">@gmail.com</li>
  187.             <li email="@sohu.com" class="item">@sohu.com</li>
  188.             <li email="@yahoo.cn" class="item">@yahoo.cn</li>
  189.             <li email="@139.com" class="item">@139.com</li>
  190.             <li email="@wo.com.cn" class="item">@wo.com.cn</li>
  191.             <li email="@189.cn" class="item">@189.cn</li>
  192.         </ul>
  193.     </div>
  194. </body>
  195. </html>

网页进度条

基本效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网页进度条</title>
  6.     <style>
  7.     #progressBox {width: 300px; height: 40px; border: 1px solid #c8c8c8; background: white; position: relative;}
  8.     #progressBar {position: absolute; left: 0; top: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: white; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia; clip: rect(0px, 0, 40px, 0px); background: #00A1F5;}
  9.     #progressText {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: black; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia;}
  10.     </style>
  11.     <script>
  12.     window.onload = function(){
  14.         var iNow = 0;
  15.         var timer = setInterval(function(){
  16.             if(iNow == 100){
  17.                 clearInterval(timer);
  18.             } else {
  19.                 iNow += 2;
  20.                 progressFn(iNow);
  21.             }   
  22.         }, 30);
  24.         function progressFn(cent){
  25.             var oDiv1 = document.getElementById('progressBox');
  26.             var oDiv2 = document.getElementById('progressBar');
  27.             var oDiv3 = document.getElementById('progressText');
  29.             var allWidth = parseInt(getStyle(oDiv1, 'width'));
  30.             oDiv2.innerHTML = cent + '%';
  31.             oDiv3.innerHTML = cent + '%';
  32.             oDiv2.style.clip = 'rect(0px, ' + cent/100 * allWidth + 'px, 40px, 0px)';
  34.             function getStyle(obj, attr){
  35.                 if(obj.currentStyle){
  36.                     return obj.currentStyle[attr];
  37.                 } else {
  38.                     return getComputedStyle(obj, false)[attr];
  39.                 }
  40.             }
  41.         }
  42.     }
  43.     </script>
  44. </head>
  45. <body>
  46.     <div id="progressBox">
  47.         <div id="progressBar">0%</div>
  48.         <div id="progressText">0%</div>
  49.     </div>
  50. </body>
  51. </html>

反映真实数据的进度条
- 硬编码 : 写死的数据
- 跟flash配合 : as3
- html5 : xhr 2: onprogress事件 onload事件
- 跟后台的配合 : ajax的实时返回数据

硬编码的进度条效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     * {margin: 0; padding: 0;}
  8.     #progressBox {width: 300px; height: 40px; border: 1px solid #c8c8c8; background: white; position: relative;}
  9.     #progressBar {position: absolute; left: 0; top: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: white; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia; clip: rect(0px, 0, 40px, 0px); background: #00A1F5;}
  10.     #progressText {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: black; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="progressBox">
  15.         <div id="progressBar">0%</div>
  16.         <div id="progressText">0%</div>
  17.     </div>
  18.     <div id="div2" style="display: none;">
  19.         <img src="http://images.wisegeek.com/young-calico-cat.jpg" >
  20.         <img src="http://images.wisegeek.com/lint-roller-against-green-shirt.jpg">
  21.         <img src="http://images.wisegeek.com/girl-holding-cat-in-hand-while-blowing-nose.jpg">
  22.         <img src="http://images.wisegeek.com/woman-vacuuming.jpg">
  23.         <img src="http://images.wisegeek.com/cat-shedding.jpg">
  24.         <img src="http://images.wisegeek.com/pet-comb.jpg">
  25.         <img src="http://images.wisegeek.com/young-goat-on-a-grass-field.jpg">
  26.     </div>
  27.     <script>
  28.     //硬编码：写死的数据。加载一幅图片就前进1/7的进度
  29.     var oDiv2 = document.getElementById('div2');
  30.     var aImg = oDiv2.getElementsByTagName('img');
  31.     var oDiv1 = document.getElementById('progressBox');
  32.     var iNow = 0;
  34.     for(var i=0; i<aImg.length; i++){
  35.         (function(i){
  36.             var yImg = new Image();
  38.             yImg.onload = function(){
  39.                 iNow++;
  41.                 progressFn(parseInt(iNow/aImg.length * 100));
  43.                 if(iNow == aImg.length){
  44.                     oDiv2.style.display = 'block';
  45.                     oDiv1.style.display = 'none';
  46.                 }
  47.             }
  49.             yImg.src = aImg[i].src;
  51.         })(i);
  52.     }
  54.     function progressFn(cent){
  55.             var oDiv1 = document.getElementById('progressBox');
  56.             var oDiv2 = document.getElementById('progressBar');
  57.             var oDiv3 = document.getElementById('progressText');
  59.             var allWidth = parseInt(getStyle(oDiv1, 'width'));
  60.             oDiv2.innerHTML = cent + '%';
  61.             oDiv3.innerHTML = cent + '%';
  62.             oDiv2.style.clip = 'rect(0px, ' + cent/100 * allWidth + 'px, 40px, 0px)';
  64.             function getStyle(obj, attr){
  65.                 if(obj.currentStyle){
  66.                     return obj.currentStyle[attr];
  67.                 } else {
  68.                     return getComputedStyle(obj, false)[attr];
  69.                 }
  70.             }
  71.         }
  72.     </script>
  73. </body>
  74. </html>

数码时钟

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数码时钟</title>
  6.     <style>
  7.     body {background: #eee; color: white; font-size: 30px;}
  8.     #div1 {width: 300px; height: 36px; border: 1px #fff solid;}
  9.     #div1 img {width: 25px; height: 36px; position: relative;}
  10.     </style>
  11.     <script>
  12.     window.onload = function(){
  13.         var aImg = document.getElementsByTagName('img');
  14.         var oDate = new Date();
  15.         var prevStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + toZero(oDate.getSeconds());
  16.         var nextStr = '';
  17.         var arr = [];
  18.         var timer = null;
  20.         for(var i=0; i<aImg.length; i++){
  21.             aImg[i].src = 'img/' + prevStr.charAt(i) + '.png';
  22.         }
  24.         setInterval(toChange, 1000);
  26.         function toChange(){
  27.             var oDate = new Date();
  28.             nextStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + toZero(oDate.getSeconds());
  29.             /*console.log(prevStr);
  30.             console.log(nextStr);*/
  31.             toCom(prevStr, nextStr);
  32.             prevStr = nextStr;
  33.         }
  35.         function toCom(str1, str2){
  36.             arr = [];
  37.             for(var i=0; i<str1.length; i++){
  38.                 if(str1.charAt(i) != str2.charAt(i)){
  39.                     arr.push(i);
  40.                 }
  41.             }
  43.             startMove();
  44.         }
  46.         function startMove(){
  47.             var iSpeed = -4;
  48.             timer = setInterval(function(){
  49.                 for(var i=0; i<arr.length; i++){
  51.                     if(aImg[arr[i]].offsetHeight == 0){
  52.                         iSpeed = 4;
  54.                         aImg[arr[i]].src = 'img/' + nextStr.charAt(arr[i]) + '.png';
  55.                     }
  57.                     aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
  58.                     aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight/2 - 18 + 'px';
  60.                     if(aImg[arr[i]].offsetHeight == 36){
  61.                         clearInterval(timer);
  62.                     }
  63.                 }
  64.             }, 10)
  65.         }
  67.         function toZero(num){
  68.             if(num < 10){
  69.                 return '0' + num;
  70.             } else {
  71.                 return '' + num;
  72.             }
  73.         }
  74.     }
  75.     </script>
  76. </head>
  77. <body>
  78.     <div id="div1">
  79.         <img src="img/0.png">
  80.         <img src="img/0.png">:
  81.         <img src="img/0.png">
  82.         <img src="img/0.png">:
  83.         <img src="img/0.png">
  84.         <img src="img/0.png">
  85.     </div>
  86. </body>
  87. </html>

老版官网分页特效

请参照JS分页实例来看

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js分页</title>
  6.     <style>
  7.     * {margin: 0; padding: 0;}
  8.     li {list-style: none;}
  10.     #ul1 {width: 600px; height: 250px;}
  11.     #ul1 li {width: 100px; height: 100px; background: red; float: left; overflow: hidden; margin: 10px;}
  12.     a {margin: 5px;}
  13.     </style>
  14.     <script src="move.js"></script>
  15.     <script>
  16.     window.onload = function(){
  17.         var json = {
  18.             title: [    
  19.                 '效果1',
  20.                 '效果2',
  21.                 '效果3',
  22.                 '效果4',
  23.                 '效果5',
  24.                 '效果6',
  25.                 '效果7',
  26.                 '效果8',
  27.                 '效果9',
  28.                 '效果10',
  29.                 '效果11',
  30.                 '效果12',
  31.                 '效果13',
  32.                 '效果14',
  33.                 '效果15',
  34.                 '效果16',
  35.                 '效果17',
  36.                 '效果18',
  37.                 '效果19',
  38.                 '效果20',
  39.                 '效果21',
  40.                 '效果22',
  41.                 '效果23',
  42.                 '效果24',
  43.                 '效果25',
  44.                 '效果26',
  45.                 '效果27',
  46.                 '效果28',
  47.                 '效果29',
  48.                 '效果30',
  49.                 '效果31',
  50.                 '效果32',
  51.                 '效果33',
  52.                 '效果34'
  53.             ]
  54.         }
  56.         var arr = [];
  57.         var iNow = 9;
  59.         page({
  60.             id : 'div1',
  61.             nowNum : 1,
  62.             allNum : Math.ceil(json.title.length/10),
  63.             callBack : function(now, all){
  64.                 var num = now * 10 < json.title.length ? 10 : json.title.length - (now-1)*10;
  65.                 var oUl = document.getElementById('ul1');
  66.                 var aLi = oUl.getElementsByTagName('li');
  68.                 if(oUl.innerHTML == ''){
  69.                     for(var i=0; i<num; i++){
  70.                         var oLi = document.createElement('li');
  71.                         oLi.innerHTML = json.title[(now-1)*10 + i];
  72.                         oUl.appendChild(oLi);
  73.                     }
  75.                     for(var i=0; i<aLi.length; i++){
  76.                         arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
  77.                     }
  79.                     for(var i=0; i<aLi.length; i++){
  80.                         aLi[i].style.position = 'absolute';
  81.                         aLi[i].style.left = arr[i][0] + 'px';
  82.                         aLi[i].style.top = arr[i][1] + 'px';
  83.                         aLi[i].style.margin = '0'
  84.                     }
  85.                 } else {
  86.                     var timer = setInterval(function(){
  87.                         startMove(aLi[iNow], {left: 200, top: 250, opacity: 0});
  88.                         if(iNow == 0){
  89.                             clearInterval(timer);
  90.                             iNow = num - 1;
  91.                             for(var i=0; i<num; i++){
  92.                                 aLi[i].innerHTML = json.title[(now-1)*10 + i];
  93.                             }
  94.                             var timer2 = setInterval(function(){
  95.                                 startMove(aLi[iNow], {left: arr[iNow][0], top: arr[iNow][1], opacity: 100});
  96.                                 if(iNow == 0){
  97.                                     clearInterval(timer2);
  98.                                     iNow = num - 1;
  99.                                 } else {
  100.                                     iNow--;
  101.                                 }
  103.                             }, 100);
  105.                         } else {
  106.                             iNow--;
  107.                         }
  108.                     }, 100);
  109.                 }
  110.             }
  111.         });
  112.     }
  113.     function page(opt){
  114.         if(!opt.id){return false};
  115.         var obj = document.getElementById(opt.id);
  116.         var nowNum = opt.nowNum || 1;
  117.         var allNum = opt.allNum || 5;
  118.         var callBack = opt.callBack || function(){};
  119.         if(nowNum >= 4 && allNum >=6){
  120.             var oA = document.createElement('a');
  121.             oA.href = '#1';
  122.             oA.innerHTML = '首页';
  123.             obj.appendChild(oA);
  124.         }
  125.         if(nowNum >=2){
  126.             var oA = document.createElement('a');
  127.             oA.href = '#' + (nowNum -1);
  128.             oA.innerHTML = '上一页';
  129.             obj.appendChild(oA);
  130.         }
  131.         if(allNum <= 5){
  132.             for(var i=1; i<=allNum; i++){
  133.                 var oA = document.createElement('a');
  134.                 oA.href = '#' + i;
  135.                 if(nowNum == i){
  136.                     oA.innerHTML = i;
  137.                 } else {
  138.                     oA.innerHTML = '[' + i + ']';
  139.                 }
  140.                 obj.appendChild(oA);
  141.             }
  142.         } else {
  143.             for(var i=1; i<=5; i++){
  144.                 var oA = document.createElement('a');
  145.                 if(nowNum == 1 || nowNum == 2){
  146.                     oA.href = '#' + i;
  147.                     if(nowNum == i){
  148.                         oA.innerHTML = i;
  149.                     } else {
  150.                         oA.innerHTML = '[' + i + ']';
  151.                     }
  152.                 } else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
  153.                     oA.href = '#' + (allNum - 5 + i);
  154.                     if((allNum - nowNum) == 0 && i == 5){
  155.                         oA.innerHTML = (allNum - 5 + i);
  156.                     } else if ((allNum - nowNum) == 1 && i == 4){
  157.                         oA.innerHTML = (allNum - 5 + i);
  158.                     } else {
  159.                         oA.innerHTML = '[' + (allNum - 5 + i) + ']';
  160.                     }
  161.                 } else {
  162.                     oA.href = '#' + (nowNum - 3 + i);
  163.                     if(i == 3){
  164.                         oA.innerHTML = nowNum - 3 + i;
  165.                     } else {
  166.                         oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
  167.                     }
  168.                 }
  169.                 obj.appendChild(oA);
  170.             }
  171.         }
  172.         if((allNum - nowNum) >= 1){
  173.             var oA = document.createElement('a');
  174.             oA.href = '#' + (nowNum + 1);
  175.             oA.innerHTML = '下一页';
  176.             obj.appendChild(oA);
  177.         }
  178.         if((allNum - nowNum) >= 3 && allNum >= 6){
  179.             var oA = document.createElement('a');
  180.             oA.href = '#' + allNum;
  181.             oA.innerHTML = '尾页';
  182.             obj.appendChild(oA); 
  183.         }
  184.         callBack(nowNum, allNum);
  185.         var aA = obj.getElementsByTagName('a');
  186.         for(var i=0; i<aA.length; i++){
  187.             aA[i].onclick = function(){
  188.                 var nowNum = parseInt(this.getAttribute('href').substring(1));
  189.                 obj.innerHTML = '';
  190.                 page({
  191.                     id : opt.id,
  192.                     nowNum : nowNum,
  193.                     allNum : allNum,
  194.                     callBack : callBack
  195.                 })
  196.                 return false; //阻止默认事件，避免#数字添到地址栏
  197.             }
  198.         }
  199.     }
  200.     </script>
  201. </head>
  202. <body>
  203. <ul id="ul1"></ul>
  204. <div id="div1">
  205.     <!-- <a href="#1">首页</a>
  206.         <a href="#3">上一页</a>
  207.         <a href="#2">[2]</a>
  208.         <a href="#3">[3]</a>
  209.         <a href="#4">4</a>
  210.         <a href="#5">[5]</a>
  211.         <a href="#6">[6]</a>
  212.         <a href="#5">下一页</a>
  213.         <a href="#10">尾页</a> -->    
  214. </div>
  215. </body>
  216. </html>

基于对象的联动菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>联动下拉菜单</title>
  6.     <script>
  7.     window.onload = function(){
  8.         var s1 = new Sel('div1');
  9.         s1.add('0', ['1', '2', '3']);
  11.         s1.add('0_0', ['1_1', '1_2', '1_3']);
  13.         s1.add('0_0_0', ['1_1_1', '1_1_2', '1_1_3']);
  14.         s1.add('0_0_1', ['1_2_1', '1_2_2', '1_2_3']);
  15.         s1.add('0_0_2', ['1_3_1', '1_3_2', '1_3_3']);
  17.         s1.add('0_1', ['2_1', '2_2', '2_3']);
  19.         s1.add('0_1_0', ['2_1_1', '2_1_2', '2_1_3']);
  20.         s1.add('0_1_1', ['2_2_1', '2_2_2', '2_2_3']);
  21.         s1.add('0_1_2', ['2_3_1', '2_3_2', '2_3_3']);
  23.         s1.add('0_2', ['3_1', '3_2', '3_3']);
  25.         s1.add('0_2_0', ['3_1_1', '3_1_2', '3_1_3']);
  26.         s1.add('0_2_1', ['3_2_1', '3_2_2', '3_2_3']);
  27.         s1.add('0_2_2', ['3_3_1', '3_3_2', '3_3_3']);
  29.         s1.init(3);
  31.     }
  33.     function Sel(id){
  34.         this.oParent = document.getElementById(id);
  35.         this.data = {};
  36.         this.aSel = this.oParent.getElementsByTagName('select');
  37.     }
  39.     Sel.prototype = {
  40.         init: function(num){
  41.             var This = this;
  42.             for(var i=1; i<=num; i++){
  43.                 var oSel = document.createElement('select');
  44.                 var oPt = document.createElement('option');
  45.                 oPt.innerHTML = '默认';
  46.                 oSel.appendChild(oPt);
  47.                 oSel.index = i;
  48.                 this.oParent.appendChild(oSel);
  49.                 oSel.onchange = function(){
  50.                     This.change(this.index);
  51.                 }
  52.             }
  53.             this.first();
  54.         },
  55.         add: function(key, value){
  56.             this.data[key] = value;
  57.         },
  58.         first: function(){
  59.             var arr = this.data['0'];
  60.             for(var i=0; i<arr.length; i++){
  61.                 var oPt = document.createElement('option');
  62.                 oPt.innerHTML = arr[i];
  63.                 this.aSel[0].appendChild(oPt);
  64.             }
  65.         },
  66.         change: function(iNow){
  67.             var str = '0';
  69.             for(var i=0; i<iNow; i++){
  70.                 str += '_' + (this.aSel[i].selectedIndex - 1);
  71.             }
  73.             if(this.data[str]){
  74.                 var arr = this.data[str];
  75.                 this.aSel[iNow].options.length = 1;
  76.                 for(var i=0; i<arr.length; i++){
  77.                     var oPt = document.createElement('option');
  78.                     oPt.innerHTML = arr[i];
  79.                     this.aSel[iNow].appendChild(oPt);
  80.                 }
  81.                 this.aSel[iNow].options[1].selected = true;
  83.                 //以下是个递归
  84.                 iNow++;
  85.                 if(iNow < this.aSel.length){
  86.                     this.change(iNow);
  87.                 }
  88.             } else {
  89.                 if(iNow < this.aSel.length){
  90.                     this.aSel[iNow].options.length = 1;
  91.                 }
  92.             }
  93.         }
  94.     }
  95.     </script>
  96. </head>
  97. <body>
  98.     <div id="div1"></div>
  99. </body>
  100. </html>

韩雪冬轮播图

简单的数字切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>韩雪冬轮播图</title>
  6.     <script>
  7.     window.onload = function(){
  8.         var oDiv = document.getElementById('div1');
  9.         var oInput = document.getElementById('input1');
  11.         oInput.onclick = function(){
  12.             var arr = oDiv.innerHTML.split(',');
  13.             arr.push(arr[0]);
  14.             arr.shift();
  15.             oDiv.innerHTML = arr;
  16.         }
  17.     }
  18.     </script>
  19. </head>
  20. <body>
  21.     <div id="div1">1,2,3,4</div>
  22.     <input type="button" value="切换" id="input1">
  23. </body>
  24. </html>

三个div进行切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>韩雪冬轮播图</title>
  6.     <style>
  7.     .box1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
  8.     .box2 {width: 100px; height: 100px; background: yellow; position: absolute; left: 250px; top: 50px;}
  9.     .box3 {width: 100px; height: 100px; background: blue; position: absolute; left: 400px; top: 100px;}
  10.     </style>
  11.     <script>
  12.     window.onload = function(){
  13.         var aInput = document.getElementsByTagName('input');
  14.         var aDiv = document.getElementsByTagName('div');
  15.         var arr = [];
  17.         for(var i=0; i<aDiv.length; i++){
  18.             arr.push([getStyle(aDiv[i], 'left'), getStyle(aDiv[i], 'top')]);
  19.         }
  20.         // console.log(arr);
  22.         aInput[0].onclick = function(){
  23.             arr.push(arr[0]);
  24.             arr.shift();
  26.             for(var i=0; i<aDiv.length; i++){
  27.                 aDiv[i].style.left = arr[i][0];
  28.                 aDiv[i].style.top = arr[i][1];
  29.             }
  30.         }
  32.         aInput[1].onclick = function(){
  33.             arr.unshift(arr[arr.length-1]);
  34.             arr.pop();
  36.             for(var i=0; i<aDiv.length; i++){
  37.                 aDiv[i].style.left = arr[i][0];
  38.                 aDiv[i].style.top = arr[i][1];
  39.             }
  40.         }
  42.         function getStyle(obj, attr){
  43.             if(obj.currentStyle){
  44.                 return obj.currentStyle[attr];
  45.             } else {
  46.                 return getComputedStyle(obj, false)[attr];
  47.             }
  48.         }
  49.     }
  50.     </script>
  51. </head>
  52. <body>
  53.     <input type="button" value="←">
  54.     <input type="button" value="→">
  55.     <div class="box1"></div>
  56.     <div class="box2"></div>
  57.     <div class="box3"></div>
  58. </body>
  59. </html>

妙味官网的演示效果

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>韩雪冬网站效果 - 妙味课堂 - www.miaov.com</title>
  6. <!--[if lte IE 6]>
  7. <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.         DD_belatedPNG.fix('span');
  10.     </script>
  11. <![endif]-->
  12. <script type="text/javascript" src="miaov.js"></script>
  13. <link href="style.css" rel="stylesheet" type="text/css" />
  14. </head>
  16. <body>
  18. <div id="automatic">
  20.     <div class="prev_div"></div>
  21.     <a class="prev" href="###">
  22.         <span class="ico1"></span>
  23.         <span class="ico"></span>
  24.         <span class="txt"></span>
  25.     </a>
  27.     <div class="next_div"></div>
  28.     <a class="next" href="###">
  29.         <span class="ico1"></span>
  30.         <span class="ico"></span>
  31.         <span class="txt"></span>
  32.     </a>
  34.     <div class="line"></div>
  36.     <ul>
  37.         <li class="pos_0"><a href="http://www.miaov.com"><img src="images/8.jpg" width="100" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  38.         <li class="pos_1"><a href="http://www.miaov.com"><img src="images/1.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  39.         <li class="pos_2"><a href="http://www.miaov.com"><img src="images/2.jpg" width="510" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  40.         <li class="pos_3"><a href="http://www.miaov.com"><img src="images/3.jpg" width="680" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  41.         <li class="pos_4"><a href="http://www.miaov.com"><img src="images/4.jpg" width="510" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  42.         <li class="pos_5"><a href="http://www.miaov.com"><img src="images/5.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  43.         <li class="pos_6"><a href="http://www.miaov.com"><img src="images/6.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  44.         <li class="pos_6"><a href="http://www.miaov.com"><img src="images/7.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
  45.     </ul>
  47. </div>
  48. <p id="footer"><a href="http://www.miaov.com">妙味课堂 - www.miaov.com</a></p>
  49. </body>
  50. </html>
  1. @charset "utf-8";
  2. /* CSS Document */
  4. * { padding: 0; margin: 0; }
  5. li { list-style: none; }
  6. img { border: none; }
  7. body { background: #ececec; padding-top: 50px; }
  9. #automatic { width: 970px; height: 344px; position: relative; margin: 0 auto; overflow: hidden; }
  11. .prev_div { width: 130px; height: 72px; position: absolute; top: 128px; left: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; }
  12. .next_div { width: 130px; height: 72px; position: absolute; top: 128px; right: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; }
  14. #automatic .prev { width: 120px; height: 72px; position: absolute; top: 108px; left: 72px; z-index: 4; }
  15. #automatic .prev .ico { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev.png); }
  16. #automatic .prev .ico1 { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev_1.png); z-index: 2; filter: alpha(opacity=0); opacity: 0; }
  17. #automatic .prev .txt { width: 106px; height: 112px; position: absolute; top: 0; left: 65px; background: url(images/prev_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; }
  19. #automatic .next { width: 120px; height: 72px; position: absolute; top: 108px; right: 72px; z-index: 4; }
  20. #automatic .next .ico { width: 76px; height: 112px; position: absolute; top: 0; right: 0; background: url(images/next.png) no-repeat; }
  21. #automatic .next .ico1 { width: 76px; height: 112px; position: absolute; top: 0; right: 0px; background: url(images/next_1.png) no-repeat; z-index: 2; filter: alpha(opacity=0); opacity: 0; }
  22. #automatic .next .txt { width: 106px; height: 112px; position: absolute; top: 0; right: 65px; background: url(images/next_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; }
  24. #automatic ul { width: 970px; height: 344px; position: absolute; top: 0; left: 0; z-index: 1; }
  25. #automatic li { position: absolute; }
  27. #automatic .line { border: 4px solid #fff; width: 672px; height: 336px; position: absolute; top: 0; left: 50%; margin-left: -340px; z-index: 3; }
  29. #automatic .pos_0 { top: -104px; left: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; }
  30. #automatic .pos_1 { top: 104px; left: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; }
  31. #automatic .pos_2 { top: 43px; left: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; }
  32. #automatic .pos_3 { top: 0; left: 145px; z-index: 4; }
  33. #automatic .pos_4 { top: 43px; right: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; }
  34. #automatic .pos_5 { top: 104px; right: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; }
  35. #automatic .pos_6 { top: -104px; right: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; }
  37. #footer { width: 970px; height: 30px; text-align: center; padding-top: 50px; margin: 0 auto; }
  38. #footer a { color: #930; font-family: arial; font-size: 15px; text-decoration: none; border-bottom: 1px dotted #930; }
  39. #footer a:hover { border-bottom: 1px solid #930; }
  1. function getElementsByClassName(oParent, sClass)
  2. {
  3.     var aTmp=oParent.getElementsByTagName('*');
  4.     var aResult=[];
  5.     var i=0;
  7.     for(i=0;i<aTmp.length;i++)
  8.     {
  9.         if(aTmp[i].className==sClass)
  10.         {
  11.             aResult.push(aTmp[i]);
  12.         }
  13.     }
  15.     return aResult;
  16. }
  18. window.onload=function ()
  19. {
  20.     var oDiv=document.getElementById('automatic');
  22.     var oPrevMask=getElementsByClassName(oDiv,'prev_div')[0];
  23.     var oNextMask=getElementsByClassName(oDiv,'next_div')[0];
  25.     var oPrevBtn=getElementsByClassName(oDiv,'prev')[0];
  26.     var oNextBtn=getElementsByClassName(oDiv,'next')[0];
  28.     var oPrevArrow=getElementsByClassName(oPrevBtn,'ico')[0];
  29.     var oPrevArrowLight=getElementsByClassName(oPrevBtn,'ico1')[0];
  30.     var oPrevTxt=getElementsByClassName(oPrevBtn,'txt')[0];
  32.     var oNextArrow=getElementsByClassName(oNextBtn,'ico')[0];
  33.     var oNextArrowLight=getElementsByClassName(oNextBtn,'ico1')[0];
  34.     var oNextTxt=getElementsByClassName(oNextBtn,'txt')[0];
  36.     oPrevArrow.alpha=100;
  37.     var iInitPrevArrow=oPrevArrow.left=oPrevArrow.offsetLeft;
  38.     oPrevArrowLight.alpha=0;
  39.     var iInitPrevArrowLight=oPrevArrowLight.left=oPrevArrowLight.offsetLeft;
  40.     oPrevTxt.alpha=0;
  41.     var iInitPrevTxt=oPrevTxt.left=oPrevTxt.offsetLeft;
  43.     oNextArrow.alpha=100;
  44.     var iInitNextArrow=oNextArrow.left=oNextArrow.offsetLeft;
  45.     oNextArrowLight.alpha=0;
  46.     var iInitNextArrowLight=oNextArrowLight.left=oNextArrowLight.offsetLeft;
  47.     oNextTxt.alpha=0;
  48.     var iInitNextTxt=oNextTxt.left=oNextTxt.offsetLeft;
  50.     var aLi=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
  52.     var aLiInit=[];
  54.     var oLine=getElementsByClassName(oDiv, 'line')[0];
  56.     var iInterval=150;
  58.     //var bIsIE=(/msie/i).test(window.navigator.userAgent);
  60.     var i=0;
  62.     for(i=0;i<aLi.length;i++)
  63.     {
  64.         aLiInit[i]={};
  65.         aLi[i].width=aLiInit[i].w=aLi[i].getElementsByTagName('img')[0].offsetWidth;
  66.         aLi[i].height=aLiInit[i].h=aLi[i].getElementsByTagName('img')[0].offsetHeight;
  67.         aLi[i].left=aLiInit[i].l=aLi[i].offsetLeft;
  68.         aLi[i].top=aLiInit[i].t=aLi[i].offsetTop;
  69.         aLi[i].alpha=aLiInit[i].alpha=0;
  70.         aLi[i].z=aLiInit[i].z=1;
  71.     }
  73.     for(i=0;i<aLi.length;i++)
  74.     {
  75.         aLi[i].style.position='absolute';
  76.         aLi[i].style.left=aLiInit[i].l+'px';
  77.         aLi[i].style.top=aLiInit[i].t+'px';
  78.     }
  80.     aLi[1].alpha=aLiInit[1].alpha=60;
  81.     aLi[2].alpha=aLiInit[2].alpha=80;
  82.     aLi[3].alpha=aLiInit[3].alpha=100;
  83.     aLi[4].alpha=aLiInit[4].alpha=80;
  84.     aLi[5].alpha=aLiInit[5].alpha=60;
  86.     aLi[1].z=aLiInit[1].z=2;
  87.     aLi[2].z=aLiInit[2].z=3;
  88.     aLi[3].z=aLiInit[3].z=4;
  89.     aLi[4].z=aLiInit[4].z=3;
  90.     aLi[5].z=aLiInit[5].z=2;
  92.     /*if(bIsIE)
  93.     {
  94.         oPrevArrowLight.style.display='none';
  95.         oPrevArrow.style.display='block';
  96.     }*/
  98.     oPrevMask.onmouseover=function ()
  99.     {
  100.         /*if(bIsIE)
  101.         {
  102.             startMove(oPrevArrow, {left: iInitPrevArrow+10}, iInterval);
  103.             startMove(oPrevTxt, {left: iInitPrevTxt-10, alpha:100}, iInterval);
  104.         }
  105.         else
  106.         {
  107.             startMove(oPrevArrow, {left: iInitPrevArrow+10}, iInterval);
  108.             startMove(oPrevArrowLight, {left: iInitPrevArrowLight+10, alpha:100}, iInterval);
  109.             startMove(oPrevTxt, {left: iInitPrevTxt-10, alpha:100}, iInterval);
  110.         }*/
  111.         startMove(oPrevArrow, {left: iInitPrevArrow+10}, iInterval);
  112.         startMove(oPrevArrowLight, {left: iInitPrevArrowLight+10, alpha:100}, iInterval);
  113.         startMove(oPrevTxt, {left: iInitPrevTxt-10, alpha:100}, iInterval);
  114.     };
  116.     oPrevMask.onmouseout=function ()
  117.     {
  118.         /*if(bIsIE)
  119.         {
  120.             startMove(oPrevArrow, {left: iInitPrevArrow}, iInterval);
  121.             startMove(oPrevTxt, {left: iInitPrevTxt, alpha:0}, iInterval);
  122.         }
  123.         else
  124.         {
  125.             startMove(oPrevArrow, {left: iInitPrevArrow}, iInterval);
  126.             startMove(oPrevArrowLight, {left: iInitPrevArrowLight, alpha:0}, iInterval);
  127.             startMove(oPrevTxt, {left: iInitPrevTxt, alpha:0}, iInterval);
  128.         }*/
  129.         startMove(oPrevArrow, {left: iInitPrevArrow}, iInterval);
  130.         startMove(oPrevArrowLight, {left: iInitPrevArrowLight, alpha:0}, iInterval);
  131.         startMove(oPrevTxt, {left: iInitPrevTxt, alpha:0}, iInterval);
  132.     };
  134.     oPrevMask.onmousedown=function ()
  135.     {
  136.         gotoImg(true);
  137.     };
  139.     oNextMask.onmouseover=function ()
  140.     {
  141.         startMove(oNextArrow, {left: iInitNextArrow-10}, iInterval);
  142.         startMove(oNextArrowLight, {left: iInitNextArrowLight-10, alpha:100}, iInterval);
  143.         startMove(oNextTxt, {left: iInitNextTxt+10, alpha:100}, iInterval);
  144.     };
  146.     oNextMask.onmouseout=function ()
  147.     {
  148.         startMove(oNextArrow, {left: iInitNextArrow}, iInterval);
  149.         startMove(oNextArrowLight, {left: iInitNextArrowLight, alpha:0}, iInterval);
  150.         startMove(oNextTxt, {left: iInitNextTxt, alpha:0}, iInterval);
  151.     };
  153.     oNextMask.onmousedown=function ()
  154.     {
  155.         gotoImg(false);
  156.     };
  158.     function gotoImg(bLeft)
  159.     {
  160.         if(bLeft)
  161.         {
  162.             aLiInit.push(aLiInit.shift());
  163.         }
  164.         else
  165.         {
  166.             aLiInit.unshift(aLiInit.pop());
  167.         }
  169.         oLine.style.display='none';
  171.         for(i=0;i<aLi.length;i++)
  172.         {
  173.             startMove(aLi[i], {left: aLiInit[i].l, top: aLiInit[i].t, width: aLiInit[i].w, height:aLiInit[i].h, alpha:aLiInit[i].alpha, zIndex:aLiInit[i].z}, 300, function (){oLine.style.display='block';});
  174.         }
  175.     };
  176. };
  178. function startMove(obj, oParams, iTime, fnCallBackEnd)
  179. {
  180.     var iInterval=45;
  181.     var iEndTime=(new Date()).getTime()+iTime;
  182.     var iTimes=Math.ceil(iTime/iInterval);
  183.     var oSpeed={};
  185.     if(typeof obj.timer=='undefined')
  186.     {
  187.         obj.timer=null;
  188.     }
  190.     for(key in oParams)
  191.     {
  192.         oSpeed[key]=(oParams[key]-obj[key])/iTimes;
  193.     }
  195.     if(obj.timer)
  196.     {
  197.         clearInterval(obj.timer);
  198.     }
  199.     obj.timer=setInterval
  200.     (
  201.         function ()
  202.         {
  203.             doMove(obj, oParams, oSpeed, iEndTime, fnCallBackEnd);
  204.         }, iInterval
  205.     );
  206. }
  208. function doMove(obj, oTarget, oSpeed, iEndTime, fnCallBackEnd)
  209. {
  210.     var iNow=(new Date()).getTime();
  212.     if(iNow>=iEndTime)
  213.     {
  214.         clearInterval(obj.timer);
  215.         obj.timer=null;
  217.         for(key in oTarget)
  218.         {
  219.             obj[key]=oTarget[key];
  220. //          alert('set '+key+'='+oTarget[key]);
  221.             switch(key)
  222.             {
  223.                 case 'alpha':
  224.                     obj.style.opacity=oTarget[key]/100;
  225.                     obj.style.filter="alpha(opacity:"+oTarget[key]+")";
  226.                     break;
  227.                 case 'zIndex':
  228.                     obj.style.zIndex=oTarget[key];
  229.                     break;
  230.                 case 'width':
  231.                 case 'height':
  232.                     obj.getElementsByTagName('img')[0].style[key]=oTarget[key]+'px';
  233.                     break;
  234.                 default:
  235.                     obj.style[key]=oTarget[key]+'px';
  236.                     break;
  237.             }
  238.         }
  240.         if(fnCallBackEnd)
  241.         {
  242.             fnCallBackEnd();
  243.         }
  244.     }
  245.     else
  246.     {
  247.         for(key in oTarget)
  248.         {
  249.             obj[key]+=oSpeed[key];
  251.             switch(key)
  252.             {
  253.                 case 'alpha':
  254.                     obj.style.opacity=obj[key]/100;
  255.                     obj.style.filter="alpha(opacity:"+obj[key]+")";
  256.                     break;
  257.                 case 'zIndex':
  258.                     //obj.style.zIndex=obj[key];
  259.                     obj.style.zIndex=oTarget[key];
  260.                     break;
  261.                 case 'width':
  262.                 case 'height':
  263.                     obj.getElementsByTagName('img')[0].style[key]=obj[key]+'px';
  264.                     break;
  265.                 default:
  266.                     obj.style[key]=obj[key]+'px';
  267.                     break;
  268.             }
  269.         }
  270.     }
  271. }

华为轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>华为全屏轮播图</title>
  6.         <style>
  7.         * {padding: 0; margin: 0;}
  8.         li {list-style: none;}
  9.         #div1 {min-width: 1000px; height: 296px; position: relative; overflow: hidden;}
  10.         #div1 ul {position: absolute; left; 0}
  11.         #div1 ul li {float: left;}
  12.         #div1 ul li img {position: relative;}
  14.         #btn {position: absolute; width: 100%; text-align: center; bottom: 0;}
  15.         #btn a {cursor: pointer; display: inline-block; width: 11px; height: 11px; background: #666;}
  16.         #btn a.active {background: white;}
  17.         #btn a:hover {background: white;}
  19.         /*min-width属性ie不支持，下面是一个hack*/
  20.         *html .ie6_out {margin-left: 1000px; zoom: 1;}
  21.         *html .ie6_in {position: relative; float: left; margin-left: -1000px;}
  22.         </style>
  23.         <script src="move.js"></script>
  24.         <script>
  25.         window.onload = function(){
  26.         var oDiv = document.getElementById('div1');
  27.         var oUl = oDiv.getElementsByTagName('ul')[0];
  28.         var aLi = oUl.getElementsByTagName('li');
  29.         var aImg = oUl.getElementsByTagName('img');
  31.         var oBtn = document.getElementById('btn');
  32.         var aA = oBtn.getElementsByTagName('a');
  34.         var imgWidth = 1680;
  35.         var iNow = 0;
  36.         var iNow2 = 0;
  38.         oUl.style.width = aImg.length * imgWidth + 'px';
  40.         function toReSize(){
  42.                 var veiwWidth = document.documentElement.clientWidth;
  44.                 if(veiwWidth>1000){
  45.                         for(var i=0;i<aImg.length;i++){
  46.                                 aImg[i].style.left = - (imgWidth - veiwWidth)/2 + 'px';
  47.                         }
  48.                 }
  50.         }
  52.         toReSize();
  54.         window.onresize = function(){
  55.                 toReSize();
  56.         };
  59.         for(var i=0;i<aA.length;i++){
  60.                 aA[i].index = i;
  61.                 aA[i].onclick = function(){
  63.                         for(var i=0;i<aA.length;i++){
  64.                                 aA[i].className = '';
  65.                         }
  66.                         this.className = 'active';
  68.                         startMove(oUl,{left : - this.index * imgWidth});
  70.                 };
  71.         }
  74.         //setInterval(toRun,3000);
  76.         var timer = null;
  77.         var bBtn = true;
  78.         window.onblur=function(){  
  79.                 if(bBtn){
  80.                         clearInterval(timer);        
  81.                         bBtn = false;
  82.                 }
  84.         };
  85.         window.onfocus=function(){
  86.                 if(!bBtn){
  87.                         timer = setInterval(toRun,3000); 
  88.                         bBtn = true;
  89.                 }
  90.         };
  92.         timer = setInterval(toRun,3000);
  95.         function toRun(){
  97.                 if(iNow == aLi.length-1){
  98.                         aLi[0].style.position = 'relative';
  99.                         aLi[0].style.left = aLi.length * imgWidth + 'px';
  100.                         iNow = 0;
  101.                 }
  102.                 else{
  103.                         iNow++;
  104.                 }
  106.                 iNow2++;
  108.                 for(var i=0;i<aA.length;i++){
  109.                         aA[i].className = '';
  110.                 }
  112.                 aA[iNow].className = 'active';
  114.                 startMove(oUl,{left : - iNow2 * imgWidth},function(){
  116.                         if(iNow==0){
  117.                                 aLi[0].style.position = 'static';
  118.                                 oUl.style.left = 0;
  119.                                 iNow2 = 0;
  120.                         }
  122.                 });
  124.         }
  126. };
  127.         </script>
  128. </head>
  129. <body>
  130.         <!--[if lte IE 6]>
  131.         <div class="ie6_out">
  132.         <div class="ie6_in">
  133.         <![endif]-->
  135.         <div id="div1">
  136.                 <ul>
  137.                         <li><img src="01.jpg"></li>
  138.                         <li><img src="02.jpg"></li>
  139.                         <li><img src="03.jpg"></li>
  140.                 </ul>
  141.                 <div id="btn">
  142.                         <a href="javascript:;" class="active"></a>
  143.                         <a href="javascript:;"></a>
  144.                         <a href="javascript:;"></a>
  145.                 </div>
  146.         </div>
  148.         <!--[if lte IE 6]>
  149.         </div>
  150.         </div>
  151.         <![endif]-->
  152. </body>
  153. </html>

苹果系统文件倒影

style.js文件

  1. function getBroswerType()
  2. {
  3.     var Sys = {};
  4.     var ua = navigator.userAgent.toLowerCase();
  5.     var s;
  6.     (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
  7.     (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
  8.     (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
  9.     (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
  10.     (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
  11.     return Sys;
  12. }
  14. function getCss(obj, attr)
  15. {
  16.         if(attr=="rotate")
  17.         {
  18.             return obj.rotate;
  19.         }
  20.         var i=parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
  21.         var val=i?i:0;
  22.         if(attr=="opacity")
  23.         {
  24.             val*=100;
  25.         }
  26.         return val;
  27. }
  28. function setCss(obj,oAttr)
  29. {
  30.     var sAttr="";
  31.     var arr=["Webkit","Moz","O","ms",""];
  32.     for(sAttr in oAttr)
  33.     {
  35.         if(sAttr.charAt(0)=="$")
  36.         {
  37.             for(var i=0;i<arr.length;i++)
  38.             {
  39.                 obj.style[arr[i]+sAttr.substring(1)]=oAttr[sAttr];
  40.             }
  41.         }
  42.         else if(sAttr=="rotate")
  43.         {
  44.             obj.rotate=oAttr[sAttr];
  45.             var a=Math.cos(obj.rotate/180*Math.PI); 
  46.             var b=Math.sin(obj.rotate/180*Math.PI);
  47.             var c=-Math.sin(obj.rotate/180*Math.PI);
  48.             var d=Math.cos(obj.rotate/180*Math.PI);
  49.             for(var i=0;i<arr.length;i++)
  50.             {
  51.                 obj.style[arr[i]+"Transform"]="matrix("+a+","+b+","+c+","+d+","+0+","+0+")";
  52.             }
  53.             obj.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11="+a+", M12="+c+", M21="+b+", M22="+d+",SizingMethod='auto expand')";
  54.         }
  55.         else
  56.         {
  57.             var value=oAttr[sAttr];
  58.             switch(sAttr)
  59.             {
  60.                 case 'width':
  61.                 case 'height':
  62.                 case 'paddingLeft':
  63.                 case 'paddingTop':
  64.                 case 'paddingRight':
  65.                 case 'paddingBottom':
  66.                     value=Math.max(value,0);
  67.                 case 'left':
  68.                 case 'top':
  69.                 case 'marginLeft':
  70.                 case 'marginTop':
  71.                 case 'marginRight':
  72.                 case 'marginBottom':
  73.                     obj.style[sAttr]=value+'px';
  74.                     break;
  75.                 case 'opacity':
  76.                     if(value<0)
  77.                     {
  78.                         value=0;
  79.                     }
  80.                     obj.style.filter="alpha(opacity:"+value+")";
  82.                     obj.style.opacity=value/100;
  83.                     break;
  84.                 default:
  85.                     obj.style[sAttr]=value;
  86.             }
  87.         }
  88.     }
  89. }

html代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>仿苹果系统文件倒影展示效果-妙味课堂-www.miaov.com</title>
  6. <style>
  7. html{height:100%;background:#000;}
  8. body{margin:0;height:100%;overflow:hidden;}
  9. #wrap{ height:500px;width:1024px; position:absolute;left:50%;top:50%;margin:-250px 0 0 -512px;}
  10. #imgList{ position:absolute;}
  11. h1,p { text-align:center; color:#f1f1f1; word-spacing:15px; position:relative; top:10px; z-index:2; }
  12. h1 a,p a { color:#f1f1f1; text-decoration:none; }
  13. h1 a:hover,p a:hover { color:#fff; border-bottom:1px dotted #fff; }
  14. </style>
  15. <script src="js/style.js"></script>
  16. <script>
  17. window.onload=function()
  18. {
  19.     var oBox=document.getElementById("wrap");
  20.     var oList=document.getElementById("imgList");
  21.     var aImg=oList.getElementsByTagName("img");
  22.     var aDiv=[];
  23.     var iImgWidth=300;
  24.     var iInterval=100;
  25.     var iStarWidth=1024;
  26.     var iStarHeight=500;
  27.     var iHeight=0;
  28.     var iLeft=-20;
  29.     var iZindex=0;
  30.     var iStarNow=0;
  31.     var iDeg=45;
  32.     var iNow=0;
  33.     var iGap=200;
  34.     var sHtml="";
  35.     var aSpan=[];
  36.     setCss(oBox,{$Perspective:"800px"});
  37.     for(var i=0; i<aImg.length;i++)
  38.     {
  39.         setCss(aImg[i],{width:iImgWidth});
  40.         sHtml+="<div style='width:"+aImg[i].offsetWidth+"px;height:"
  41.         +aImg[i].offsetHeight+"px;background:url("+aImg[i].src+") no-repeat; background-size:100% 100%;display:none; position:absolute;bottom:0;'><span style='width:"+aImg[i].offsetWidth+"px;height:"
  42.         +aImg[i].offsetHeight+"px;background:-webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)),url("+aImg[i].src+") no-repeat;background:-moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)),url("+aImg[i].src+") no-repeat;background:-o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)),url("+aImg[i].src+") no-repeat;background:linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)),url("+aImg[i].src+") no-repeat;background-size:100% 100%,100% 100%;position:absolute;'></span></div>";
  43.     }
  44.     oList.innerHTML="";
  45.     oList.innerHTML=sHtml;
  46.     aDiv=oList.getElementsByTagName("div");
  47.     aSpan=oList.getElementsByTagName("span");
  48.     for(i=0;i<aDiv.length;i++)
  49.     {
  50.         iLeft+=iInterval;
  51.         if(i<Math.floor(aDiv.length/2))
  52.         {
  53.             iZindex=i;
  54.             setCss(aDiv[i],{$Transform:"translateZ(-200px) rotateY("+iDeg+"deg)",left:iLeft,zIndex:iZindex,display:"block",$TransformStyle:"preserve-3d"});
  55.         }
  56.         else if(i>Math.floor(aDiv.length/2))
  57.         {
  58.             iZindex=aImg.length-i;
  59.             setCss(aDiv[i],{$Transform:"translateZ(-200px) rotateY("+-iDeg+"deg)",left:iLeft,zIndex:iZindex,display:"block",$TransformStyle:"preserve-3d"});
  60.         }
  61.         else
  62.         {
  63.             iZindex=i;
  64.             iLeft+=iGap;
  65.             setCss(aDiv[i],{$Transform:"translateZ(200px)",left:iLeft,zIndex:iZindex,display:"block",$TransformStyle:"preserve-3d"});
  66.             setCss(oList,{left:(oBox.offsetWidth/2-(iLeft+iImgWidth/2))});
  67.             iStarNow=iNow=i;
  68.             iLeft+=iGap;
  69.         }
  70.         setCss(aSpan[i],{$TransformOrigin:"bottom",$Transform:"rotateX(180deg)"})
  71.         iHeight=Math.max(iHeight,aDiv[i].offsetHeight);
  72.         aDiv[i].index=i;
  73.         aDiv[i].onclick=function()
  74.         {
  75.             if(this.index==iNow)
  76.             {
  77.                 return;
  78.             }
  79.             iLeft=(iStarNow-this.index)*iInterval;
  80.             iNow=this.index;
  81.             tab(aDiv,iNow,iLeft,iInterval,iGap);
  82.         }
  84.     }
  85.     setCss(oList,{height:iHeight,top:oBox.offsetHeight/2-iHeight/2,$TransformStyle:"preserve-3d"});
  86.     window.onresize=resize;
  87.     function resize()
  88.     {
  89.         var iWidth=document.documentElement.clientWidth;
  90.         var iHeight=document.documentElement.clientHeight;
  91.         setCss(oBox,{$Transform:"scale("+Math.min(iWidth/iStarWidth,iHeight/iStarHeight)+")"});
  92.     };
  93.     resize();
  94. };
  95. function tab(aImg,iNow,iLeft,iInterval,iGap)
  96. {
  97.     var iImgWidth=300;
  98.     var iInterval=100;
  99.     var iZindex=0;
  100.     var iDeg=45;
  101.     for(var i=0;i<aImg.length;i++)
  102.     {
  103.         setCss(aImg[i],{$Transition:"0.7s all ease"});
  104.         iLeft+=iInterval;
  105.         if(i<iNow)
  106.         {
  107.             iZindex=i;
  108.             setCss(aImg[i],{$Transform:"translateZ(-200px) rotateY("+iDeg+"deg)",left:iLeft,zIndex:iZindex});
  109.         }
  110.         else if(i>iNow)
  111.         {
  112.             iZindex=aImg.length-i;
  113.             setCss(aImg[i],{left:iLeft,$Transform:"translateZ(-200px) rotateY("+-iDeg+"deg)",zIndex:iZindex});
  114.         }
  115.         else
  116.         {
  117.             iZindex=i;
  118.             iLeft+=iGap;
  119.             setCss(aImg[i],{width:iImgWidth,$Transform:"translateZ(200px) rotateY(0deg)",left:iLeft,zIndex:iZindex});
  120.             iLeft+=iGap;
  121.         }
  122.     }
  123. }
  124. </script>
  125. </head>
  126. <body>
  128. <h1><a href="http://www.miaov.com/">妙味课堂</a>——苹果系统文件倒影展示效果</h1>
  129. <p><a href="http://bbs.miaov.com/forum.php?mod=viewthread&tid=6277">>>源文件下载、交流讨论</a></p>
  131. <div id="wrap">
  132.     <div id="imgList">
  133.         <img src="img/1.jpg" alt=""/>
  134.         <img src="img/2.jpg" alt=""/>
  135.         <img src="img/3.jpg" alt=""/>
  136.         <img src="img/4.jpg" alt=""/>
  137.         <img src="img/5.jpg" alt=""/>
  138.         <img src="img/6.jpg" alt=""/>
  139.         <img src="img/7.jpg" alt=""/>
  140.         <img src="img/8.jpg" alt=""/>
  141.         <img src="img/9.jpg" alt=""/>
  142.         <img src="img/10.jpg" alt=""/>
  143.         <img src="img/11.jpg" alt=""/>
  144.         <img src="img/1.jpg" alt=""/>
  145.         <img src="img/2.jpg" alt=""/>
  146.         <img src="img/3.jpg" alt=""/>
  147.         <img src="img/4.jpg" alt=""/>
  148.         <img src="img/5.jpg" alt=""/>
  149.         <img src="img/6.jpg" alt=""/>
  150.         <img src="img/7.jpg" alt=""/>
  151.         <img src="img/8.jpg" alt=""/>
  152.         <img src="img/9.jpg" alt=""/>
  153.         <img src="img/10.jpg" alt=""/>
  154.         <img src="img/11.jpg" alt=""/>
  155.     </div>
  156. </div>
  157. </body>
  158. <script>
  159. if(getBroswerType().ie || getBroswerType().opera || parseFloat(getBroswerType().chrome)<12 || parseFloat(getBroswerType().firefox)<12 || parseFloat(getBroswerType().safari)<4)
  160. {
  161.     toMiaoV();
  162. }
  164. function toMiaoV()
  165. {
  166.     document.body.innerHTML="对不起，您的浏览器版本过低请升级，建议使用chrome 12.0(或firefox 12.0 、safari 4.0)以上浏览器浏览本效果";
  167.     with(document.body.style)
  168.     {
  169.         textAlign="center";
  170.         padding="0 100px"
  171.         font="bold 50px/150px '微软雅黑'";
  172.         color="#fff";
  173.     }
  175.     setTimeout(function()
  176.     {
  177.         window.location.href="http://www.miaov.com";
  178.     },5000);
  179. }
  180. </script>
  181. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注