第一页 上页 4 5 6 7 8 9 10 11 12 13 下页 最后页 [ 显示模式: 摘要 | 列表 ]

TouchEvent测试

[不指定 2015/11/08 20:44 | by 刘新修 ]
XML/HTML代码
  1. <!-- HTML5 -->    
  2. <!DOCTYPE html>    
  3. <html>    
  4.     <head>    
  5.         <title>TouchEvent测试</title>    
  6.         <meta charset="utf-8">  
  7.     </head>    
  8.     <body>    
  9.         <h2>TouchEvent测试</h2>    
  10.         <br />    
  11.         <div id="version" style="border:2px solid black;background-color:yellow"></div>    
  12.         <br />    
  13.         <br />    
  14.         <br />    
  15.         <br />    
  16.         <br />    
  17.         <br />    
  18.         <div id="result" style="border:2px solid red; color:red;">未触发事件!</div>    
  19.         <div id="test" style="border:2px solid red">    
  20.             <ul>    
  21.                 <li id="li1">测试条目1</li>    
  22.                 <li id="li2">测试条目2</li>    
  23.                 <li id="li3">测试条目3</li>    
  24.                 <li id="li4">测试条目4</li>    
  25.                 <li id="li5">测试条目5</li>    
  26.                 <li id="li6">测试条目6</li>    
  27.                 <li id="li7">测试条目7</li>    
  28.                 <li id="li8">测试条目8</li>    
  29.                 <li id="li9">测试条目9</li>    
  30.                 <li id="li10">测试条目10</li>    
  31.                 <li id="li11">测试条目11</li>    
  32.                 <li id="li12">测试条目12</li>    
  33.                 <li id="li13">测试条目13</li>    
  34.                 <li id="li14">测试条目14</li>    
  35.                 <li id="li15">测试条目15</li>    
  36.                 <li id="li16">测试条目16</li>    
  37.                 <li id="li17">测试条目17</li>    
  38.                 <li id="li18">测试条目18</li>    
  39.                 <li id="li19">测试条目19</li>    
  40.                 <li id="li20">测试条目20</li>    
  41.             </ul>    
  42.         </div>    
  43.             
  44.         <script type="text/javascript">    
  45.             //全局变量,触摸开始位置    
  46.             var startX = 0startY = 0;    
  47.                 
  48.             //touchstart事件    
  49.             function touchSatrtFunc(evt) {    
  50.                 try    
  51.                 {    
  52.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等    
  53.     
  54.                     var touch = evt.touches[0]; //获取第一个触点    
  55.                     var x = Number(touch.pageX); //页面触点X坐标    
  56.                     var y = Number(touch.pageY); //页面触点Y坐标    
  57.                     //记录触点初始位置    
  58.                     startX = x;    
  59.                     startY = y;    
  60.     
  61.                     var text = 'TouchStart事件触发:(' + x + ', ' + y + ')';    
  62.                     document.getElementById("result").innerHTML = text;    
  63.                 }    
  64.                 catch (e) {    
  65.                     alert('touchSatrtFunc:' + e.message);    
  66.                 }    
  67.             }    
  68.     
  69.             //touchmove事件,这个事件无法获取坐标    
  70.             function touchMoveFunc(evt) {    
  71.                 try    
  72.                 {    
  73.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等    
  74.                     var touch = evt.touches[0]; //获取第一个触点    
  75.                     var x = Number(touch.pageX); //页面触点X坐标    
  76.                     var y = Number(touch.pageY); //页面触点Y坐标    
  77.     
  78.                     var text = 'TouchMove事件触发:(' + x + ', ' + y + ')';    
  79.     
  80.                     //判断滑动方向    
  81.                     if (x - startX != 0) {    
  82.                         text += '<br/>左右滑动';    
  83.                     }    
  84.                     if (y - startY != 0) {    
  85.                         text += '<br/>上下滑动';    
  86.                     }    
  87.     
  88.                     document.getElementById("result").innerHTML = text;    
  89.                 }    
  90.                 catch (e) {    
  91.                     alert('touchMoveFunc:' + e.message);    
  92.                 }    
  93.             }    
  94.     
  95.             //touchend事件    
  96.             function touchEndFunc(evt) {    
  97.                 try {    
  98.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等    
  99.     
  100.                     var text = 'TouchEnd事件触发';    
  101.                     document.getElementById("result").innerHTML = text;    
  102.                 }    
  103.                 catch (e) {    
  104.                     alert('touchEndFunc:' + e.message);    
  105.                 }    
  106.             }    
  107.     
  108.             //绑定事件    
  109.             function bindEvent() {    
  110.                 document.addEventListener('touchstart', touchSatrtFunc, false);    
  111.                 document.addEventListener('touchmove', touchMoveFunc, false);    
  112.                 document.addEventListener('touchend', touchEndFunc, false);    
  113.             }    
  114.     
  115.             //判断是否支持触摸事件    
  116.             function isTouchDevice() {    
  117.                 document.getElementById("version").innerHTML = navigator.appVersion;    
  118.     
  119.                 try {    
  120.                     document.createEvent("TouchEvent");    
  121.                     alert("支持TouchEvent事件!");    
  122.     
  123.                     bindEvent(); //绑定事件    
  124.                 }    
  125.                 catch (e) {    
  126.                     alert("不支持TouchEvent事件!" + e.message);    
  127.                 }    
  128.             }    
  129.     
  130.             window.onload = isTouchDevice;    
  131.     </script>    
  132.     </body>    
  133. </html>    

原生JS选择同胞节点

[不指定 2015/11/07 19:49 | by 刘新修 ]
XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Document</title>  
  6. <script type="text/javascript">  
  7. window.onload=function(){  
  8.   var oli=document.getElementById("box1");  
  9.   var obox=oli.parentNode;  
  10.   var lis=obox.children;  
  11.   for(var i=0;i<lis.length;i++){  
  12.     if(lis[i]!=oli){  
  13.       lis[i].style.color="red";  
  14.     }  
  15.   }  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. <ul id="box1">  
  21.   <li>111</li>  
  22.   <li id="antzone">222</li>  
  23.   <li>333</li>  
  24.   <li>444</li>  
  25. </ul>  
  26. <ul id="box2">  
  27.   <li>111</li>  
  28.   <li id="antzone">222</li>  
  29.   <li>333</li>  
  30.   <li>444</li>  
  31. </ul>  
  32. <ul id="box3">  
  33.   <li>111</li>  
  34.   <li id="antzone">222</li>  
  35.   <li>333</li>  
  36.   <li>444</li>  
  37. </ul>  
  38. <ul id="box4">  
  39.   <li>111</li>  
  40.   <li id="antzone">222</li>  
  41.   <li>333</li>  
  42.   <li>444</li>  
  43. </ul>  
  44. </body>  
  45. </html>  

JS字符串处理汇总

[不指定 2015/11/05 17:19 | by 刘新修 ]
JavaScript代码
  1. //1.substr  
  2. var src="images/off_1.png";  
  3. //alert(src.substr(7,3));  
  4. //输出:off  
  5. //2.substring  
  6. var src="images/off_1.png";  
  7. var yyy='data:image/png;base64,';  
  8. //alert(src.substring(7,10));  
  9. //alert(yyy.substring(11,14))  
  10. //输出:off  
  11.   
  12. //3.indexOf  
  13. var src="images/off_1.png";  
  14. //alert(src.indexOf('t'));  
  15. //alert(src.indexOf('i'));  
  16. //alert(src.indexOf('g'));  
  17.   
  18. //4.split  
  19. var yyy='data:image/png;base64,';  
  20. str=yyy.split(";");  
  21. var args=new Array();  
  22.   
  23. //alert(str)  
  24. //alert(ss.length[0])  
  25. //alert("2:3:4:5".split(":"))  
  26.   
  27. //5.Array--split 实例  
  28. /****************************************** 
  29. JS分割字符串,Array--split 实例 
  30. *********************************************/  
  31. var argy=new Array(['www'],['jb51'],['net']);  
  32. var strs='data:image/png;base64,';  
  33. var args=new Array(); //定义一数组  
  34. strs=strs.split(";"//数组=split分割后的数据  
  35. var string=strs[0].split("/")  
  36. alert(string[1]);      //读取数据,输出png  
JavaScript代码
  1. /**** 原生JS封装Ajax图片上传【加载进度条方法】 ****/  
  2. ajax({   
  3.      //url:'/xdo/marketActivity/task/uploadImage.do',  
  4.      url:'/xdo/marketActivity/common/uploadImage.do',  
  5.      type:'POST',  
  6.      data:{guid:_guid,plat:_plat,file:upload.fileSrc,isMain:upload.isMain,isFinish:upload.finish},  
  7.      dataType:'json',  
  8.      timeout:9000,  
  9.      //xhr:xhrProvider,  
  10.      beforeSend:function(){  
  11.         var bodyDom=document.getElementsByTagName("body")[0];  
  12.         var loading=document.getElementById('loading');  
  13.         loading.setAttribute("usable","true");  
  14.         loading.style.display="block";  
  15.         loading.innerHTML='loading...';  
  16.      },  
  17.      uploading:function(data){  
  18.         console.log(data);  
  19.      },  
  20.      success:function(data){  
  21.         //console.log(data);  
  22.      },  
  23.      fail:function(data){  
  24.         //console.log(data);  
  25.      }  
  26. });  
  27. /**** jquery/Ajax图片上传【加载进度条方法】 ****/  
  28. function onprogress(evt){  
  29.     // display uploading progress infomation...  
  30.     alert(evt.loaded)  
  31.     console.log((evt.loaded/evt.total)*100);  
  32. };  
  33. var xhrProvider=function(){  
  34.     var xhr=$.ajaxSettings.xhr();  
  35.     //var xhr=new XMLHttpRequest();  
  36.     //var xhr=ajaxY.xhr;  
  37.     //alert(xhr.upload)  
  38.     if(onprogress&&xhr.upload){  
  39.         xhr.upload.addEventListener('progress', onprogress, false);  
  40.     }  
  41.     return xhr;  
  42. };  
  43. $.ajax({   
  44.      //url:'/xdo/marketActivity/task/uploadImage.do',  
  45.      url:'/xdo/marketActivity/common/uploadImage.do',  
  46.      type:'POST',  
  47.      data:{guid:_guid,plat:_plat,file:upload.fileSrc,isMain:upload.isMain,isFinish:upload.finish},  
  48.      dataType:'json',  
  49.      timeout:9000,  
  50.      xhr:xhrProvider,  
  51.      success:function(data){  
  52.         //console.log(result);        
  53.      },  
  54.      error:function(data){  
  55.         //console.log(data);  
  56.      }  
  57. });  
Java代码
  1. <%@page trimDirectiveWhitespaces="true"%>  
  2. <%@page language="java" pageEncoding="utf-8"%>  
  3. <%@page import="sun.misc.*"%>  
  4. <%@page import="java.io.*"%>  
  5. <%@page import="java.util.*"%>  
  6. <%  
  7. List<String> htmltempList=new ArrayList<String>();  
  8. //String[][] students = {{'小明','1101','23','52819911'},{'夏利','1101','23','52819911'},{'小强','1102','21','52819901'}};  
  9.   
  10. //创建6行4列二位数组  
  11. String[][] book=new String [6][4];  
  12. book[0]=new String[]{"风清扬","1101","23","52819911"};  
  13. book[1]=new String[]{"许志飞","1101","23","52819911"};  
  14. book[2]=new String[]{"令狐冲","1102","21","52819901"};  
  15. book[3]=new String[]{"任我行","1103","22","52819991"};  
  16. book[4]=new String[]{"任盈盈","1104","24","52819981"};  
  17. book[5]=new String[]{"东方不败","1105","26","52819981"};  
  18.   
  19. String[][] arr1={{"11","22"},{"aaa","bbb"},{"AAA","BBB"}};  
  20. String[][] arr2=new String[3][2];  
  21. for(int i=0;i<book.length;i++){  
  22.     htmltempList.add("<ul>");  
  23.     for(int j=0;j<book[i].length;j++){  
  24.         //out.println(book[i][j]);  
  25.         htmltempList.add("<li>" +book[i][j]+"</li>");  
  26.     }  
  27.     htmltempList.add("</ul>");  
  28. }  
  29.   
  30. /*
  31. int [][]a=new int[8][8];
  32. for (int i=0;i<8;i++){
  33.    for(int j=0;j<8;j++){
  34.     a[i][j]=i+j;
  35.     out.println(a[i][j]+"---");
  36.    }
  37. }*/  
  38. //out.println("---");  
  39.   
  40. %>  
  41.   
  42. <%  
  43. for (int i=0;i<9;i++){  
  44. //htmltempList.add("<li><span>" + i+"</span></li>");  
  45. }  
  46. /*
  47. for (int i=0; i<htmltempList.size();i++){
  48. out.print(htmltempList.get(i));
  49. }
  50. out.print(testCol(htmltempList) + "====================");
  51. */  
  52. %>  
  53. <%  
  54. response.setContentType("text/json");  
  55. response.setCharacterEncoding("utf-8");  
  56. String callback=request.getParameter("Jsoncallback");  
  57. if(callback!=null&&!"".equals(callback)){  
  58.     out.print(callback+"({\"dataList\":\"" +testColCon(htmltempList) + "\"})");  
  59. }  
  60.   
  61. %>  
  62. <%!  
  63. public static int testCol(List<String> testList){  
  64. return testList.size();  
  65. }  
  66. public static String testColCon(List<String> testList){  
  67. String str="";  
  68. String html="<style>*{margin:0;padding:0;}h1{font-size:16px;text-align:center; line-height:45px;}body{color:#333;font-size:14px;font-family:'MicrosoftYahei';background:#B7CACC;}div{border:1px solid #405E7B; border-bottom:0; width:95%; margin:0 auto;background:#fff;content:'';display:table;clear:both}li{line-height:35px;list-style:none;width:25%;text-align:center;border-bottom:1px solid #405E7B;float:left;}</style><h1>最近风云人员名单</h1><div>";  
  69. for (int i=0; i<testList.size();i++){  
  70.     str+=testList.get(i);  
  71. }  
  72. html+=str;  
  73.         byte[] b=null;  
  74.         String s=null;  
  75.         try{    
  76.             b=html.getBytes("utf-8");  
  77.         }catch(UnsupportedEncodingException e){  
  78.             e.printStackTrace();    
  79.         }    
  80.         if (b!=null){  
  81.             s=new BASE64Encoder().encode(b);    
  82.               
  83.             s=s.replaceAll("\r\n","");  
  84.             s=s.replaceAll("\n","");  
  85. //          s = s.replaceAll("","");  
  86.             //s="PGxpPjxzcGFuPjA8L3NwYW4+PC9saT48bGk+PHNwYW4+MTwvc3Bhbj48L2xpPjxsaT48c3Bhbj4yPC9zcGFuPjwvbGk+PGxpPjxzcGFuPjM8L3NwYW4+PC9saT48bGk+PHNwYW4+NDwvc3Bhbj48L2xpPjxsaT48c3Bhbj41PC9zcGFuPjwvbGk+PGxpPjxzcGFuPjY8L3NwYW4+PC9saT48bGk+PHNwYW4+Nzwvc3Bhbj48L2xpPjxsaT48c3Bhbj44PC9zcGFuPjwvbGk+";  
  87.         }    
  88.         return s;  
  89.               
  90. }  
  91.   
  92. %>  
PHP代码
  1. <?php  
  2. //公共声明  
  3. header('Content-type: text/json');  
  4. html_entity_decode($string, ENT_QUOTES, 'UTF-8');  
  5.   
  6. //回调参数设置  
  7. $param="Jsoncallback";  
  8. $callback=$_REQUEST[$param];  
  9.   
  10. $students=array(  
  11.     array("风清扬","1101","23","52819911"),  
  12.     array("许志飞","1101","23","52819911"),  
  13.     array("令狐冲","1102","21","52819901"),  
  14.     array("任我行","1103","22","52819991"),  
  15.     array("任盈盈","1104","24","52819981"),  
  16.     array("东方不败","1105","26","52819981")  
  17. );  
  18. $tempBegin='<style>*{margin:0;padding:0;}h1{font-size:16px;text-align:center; line-height:45px;}body{color:#333;font-size:14px;font-family:"MicrosoftYahei";background:#B7CACC;}div{border:1px solid #405E7B; border-bottom:0; width:95%; margin:0 auto;background:#fff;content:"";display:table;clear:both}li{line-height:35px;list-style:none;width:25%;text-align:center;border-bottom:1px solid #405E7B;float:left;}</style><h1>最近风云人员名单</h1><div>';  
  19. foreach($students as $v){  
  20.     $tempBegin.='
  21.     <ul>
  22.         <li>'.$v[0].'</li>
  23.         <li>'.$v[1].'</li>
  24.         <li>'.$v[2].'</li>
  25.         <li>'.$v[3].'</li>
  26.     </ul>
  27.     ';  
  28. }  
  29. $tempEnd=$tempBegin.'</div>';  
  30. //echo $tempEnd;  
  31.   
  32. $str1=base64_encode($tempEnd);  
  33. $str2='{"dataList":"'.$str1.'"}';  
  34. $jsonStr=$callback."(".$str2.")";  
  35.   
  36. //判断请求参数存在就会输出Json数据  
  37. //if(isset($callback)&&!empty($callback)){  
  38. if(isset($callback)){  
  39.     echo $jsonStr;  
  40. }  
  41.   
  42. //判断请求参数不存在就输出错误信息  
  43. if(!isset($callback)){  
  44.     header("Content-type: text/html; charset=utf-8");  
  45.     $str="<h1>400 Required String parameter '{$param}' is not present</h1><hr /><small>http Request with error params: none callback function</small>";  
  46.     echo $str;  
  47. }  
  48.   
  49. ?>  
JavaScript代码
  1. /**** 下面是64个基本的编码 ****/  
  2. var base64EncodeChars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";  
  3. var base64DecodeChars=new Array(  
  4. -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  
  5. -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  
  6. -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,  
  7. 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,  
  8. -1,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14,  
  9. 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,  
  10. -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,  
  11. 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);  
  12. /**** 编码的方法 ****/  
  13. function base64encode(str) {  
  14.   var out,i,len;  
  15.   var c1,c2,c3;  
  16.   len=str.length;  
  17.   i=0;  
  18.   out="";  
  19.   while(i<len){  
  20.     c1=str.charCodeAt(i++)&0xff;  
  21.     if(i==len){  
  22.       out+=base64EncodeChars.charAt(c1>>2);  
  23.       out+=base64EncodeChars.charAt((c1&0x3)<<4);  
  24.       out+="==";  
  25.       break;  
  26.     }  
  27.     c2=str.charCodeAt(i++);  
  28.     if(i==len){  
  29.       out+=base64EncodeChars.charAt(c1>>2);  
  30.       out+=base64EncodeChars.charAt(((c1&0x3)<<4)|((c2&0xF0)>>4));  
  31.       out+=base64EncodeChars.charAt((c2&0xF)<<2);  
  32.       out+="=";  
  33.       break;  
  34.     }  
  35.     c3=str.charCodeAt(i++);  
  36.     out+=base64EncodeChars.charAt(c1>>2);  
  37.     out+=base64EncodeChars.charAt(((c1&0x3)<<4)|((c2&0xF0)>>4));  
  38.     out+=base64EncodeChars.charAt(((c2&0xF)<<2)|((c3&0xC0)>>6));  
  39.     out+=base64EncodeChars.charAt(c3&0x3F);  
  40.   }  
  41.   return out;  
  42. };  
  43. /**** 解码的方法 ****/  
  44. function base64decode(str){  
  45.   var c1,c2,c3,c4;  
  46.   var i,len,out;  
  47.   len=str.length;  
  48.   i=0;  
  49.   out="";  
  50.   while(i<len){  
  51.   do{  
  52.     c1=base64DecodeChars[str.charCodeAt(i++)&0xff];  
  53.   }while(i<len&&c1==-1);  
  54.   if(c1==-1)  
  55.     break;  
  56.   do{  
  57.     c2=base64DecodeChars[str.charCodeAt(i++)&0xff];  
  58.   }while(i<len&&c2==-1);  
  59.   if(c2==-1)  
  60.     break;  
  61.   out+=String.fromCharCode((c1<<2)|((c2 & 0x30)>>4));  
  62.   do{  
  63.     c3=str.charCodeAt(i++)&0xff;  
  64.     if(c3==61)  
  65.     return out;  
  66.     c3=base64DecodeChars[c3];  
  67.   }while(i<len&&c3==-1);  
  68.   if(c3==-1)  
  69.     break;  
  70.   out+=String.fromCharCode(((c2&0XF)<<4)|((c3&0x3C)>>2));  
  71.   do{  
  72.     c4=str.charCodeAt(i++)&0xff;  
  73.     if(c4==61)  
  74.     return out;  
  75.     c4=base64DecodeChars[c4];  
  76.   } while(i<len&&c4==-1);  
  77.   if(c4==-1)  
  78.     break;  
  79.   out+=String.fromCharCode(((c3&0x03)<<6)|c4);  
  80.   }  
  81.   return out;  
  82. };  
  83. function utf16to8(str){  
  84.   var out,i,len,c;  
  85.   out="";  
  86.   len=str.length;  
  87.   for(i=0;i<len;i++){  
  88.   c=str.charCodeAt(i);  
  89.   if((c>=0x0001)&&(c<=0x007F)){  
  90.     out+=str.charAt(i);  
  91.   }else if(c>0x07FF){  
  92.     out+=String.fromCharCode(0xE0|((c>>12)&0x0F));  
  93.     out+=String.fromCharCode(0x80|((c>>6)&0x3F));  
  94.     out+=String.fromCharCode(0x80|((c>>0)&0x3F));  
  95.   }else{  
  96.     out+=String.fromCharCode(0xC0|((c>>6)&0x1F));  
  97.     out+=String.fromCharCode(0x80|((c>>0)&0x3F));  
  98.   }  
  99.   }  
  100.   return out;  
  101. };  
  102. function utf8to16(str){  
  103.   var out,i,len,c;  
  104.   var char2,char3;  
  105.   out="";  
  106.   len=str.length;  
  107.   i=0;  
  108.   while(i<len){  
  109.     c=str.charCodeAt(i++);  
  110.     switch(c>>4){  
  111.     case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:  
  112.       /** 0xxxxxxx **/  
  113.       out+=str.charAt(i-1);  
  114.       break;  
  115.     case 12:case 13:  
  116.       /** 110x xxxx   10xx xxxx **/  
  117.       char2=str.charCodeAt(i++);  
  118.       out+=String.fromCharCode(((c&0x1F)<<6)|(char2&0x3F));  
  119.       break;  
  120.     case 14:  
  121.       /** 1110 xxxx  10xx xxxx  10xx xxxx **/  
  122.       char2=str.charCodeAt(i++);  
  123.       char3=str.charCodeAt(i++);  
  124.       out+=String.fromCharCode(((c&0x0F)<<12)|((char2&0x3F)<<6)|((char3&0x3F)<<0));  
  125.       break;  
  126.     }  
  127.   }  
  128.   return out;  
  129. };  
  130.   
  131. /** 编码 **/  
  132. /** val=base64encode(utf16to8(src)); **/  
  133.   
  134. /** 解码 **/  
  135. /** val=utf8to16(base64decode(src)); **/  
  136. /** var d="PGgxPjExMTwvaDE+PGRpdiBjbGFzcz0ibmFtZSI+MTEyMjwvZGl2Pg=="; **/  
JavaScript代码
  1. /** 
  2. * 
  3. * @param parent父节点 
  4. * @param ele要选取的元素标签 
  5. * @param num第几个元素 
  6. * @return {*} 
  7. */  
  8. function nth(parent,ele,num){  
  9.     var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];  
  10.     //将父节点的子节点转换成数组_ele;eleArray为只储存元素节点的数组  
  11.     for(var i=0,len=_ele.length;i<len;i++){  
  12.         if(_ele[i].nodeType==1){  
  13.             eleArray.push(_ele[i]);//过滤掉非元素节点  
  14.         }  
  15.     }  
  16.     if(arguments.length===2){  
  17.         //如果只传入2个参数,则如果第二个参数是数字,则选取父节点下的第几个元素  
  18.         //如果第二个参数是字符串,则选取父节点下的所有参数代表的节点  
  19.         if(typeof arguments[1]==="string"){  
  20.             _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));  
  21.             return _ele;  
  22.         }else if(typeof arguments[1]==="number"){  
  23.             return eleArray[arguments[1]];  
  24.         }  
  25.     }else{  
  26.         //如果参数齐全,则返回第几个某节点,索引从0开始  
  27.         _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));  
  28.         return _ele[num];  
  29.     }  
  30. };  

 

关于transition和keyframes

[不指定 2015/10/19 21:08 | by 刘新修 ]
CSS代码
  1. /***** transition 和 animation ******/  
  2. transition  /** 是页面元素的过渡效果,如鼠标划上旋转、变成等 **/  
  3. animation   /** 则是动画组,直接指向了动画关键帧,animation-name 对应 @keyframes neme{}  **/  
  4.   
  5.   
  6. animation-name          /** 动画名称 **/  
  7. animation-duration      /** 动画的时间 **/  
  8. animation-timing-function   /** 设置动画的过渡类型,一般去linear线性过渡 **/  
  9. animation-delay         /** 设置延时时间 **/  
  10. animation-iteration-count   /** 动画循环次数默认为1 ,infinite为无限循环 **/  
  11. animation-direction     /** 动画的方向分为正反,normal为正alternate反 **/  
  12. animation-play-state        /** w3c正在考虑是否将该属性移除,你建议使用! **/  
  13. animation-fill-mode             /** 默认值为:none,设置forwards时停留在最后一帧; **/  
  14.   
  15.   
  16. /***** animation缩写:*****/  
  17. /*******************************************************************/  
  18. animation:name 1s linear 5s forwards; /*** 定义在随着一帧 ***/  
  19.   
  20. animation:name 1s linear 5s infinite; /*** 一直循环动画 ***/  
  21.   
  22. animation:mymove 1s linear 5s infinite forwards; /*** 错误的 ***/  
  23.   
  24. /*** infinite 和 forwards 不可同时定义 ***/  
  25. /**********************************************************************/  
  26.   
  27.   
  28. @-webkit-keyframes name{  
  29.     from {  }  
  30.     to {  }  
  31. }  
  32. @-o-keyframes name{  
  33.     from {  }  
  34.     to {  }  
  35. }  
  36. @-moz-keyframes name{  
  37.     from {  }  
  38.     to {  }  
  39. }  
  40. @keyframes name{  
  41.     from {  }  
  42.     to {  }  
  43. }  

timing-function 作用于每两个关键帧之间,而不是整个动画

更新SVN版本

[不指定 2015/10/19 09:37 | by 刘新修 ]
C#代码
  1. ls -lart   
  2. mv xfile xfile.20151012  
  3. svn co svn://192.168.3.121/xfile  
第一页 上页 4 5 6 7 8 9 10 11 12 13 下页 最后页 [ 显示模式: 摘要 | 列表 ]