预览模式: 普通 | 列表

11

 

<img src="zh/photo/t.jpg" alt="aaa" onload="resize(this)" /><img onload="resize(this)" src="zh/photo/1.jpg" alt="aaa" />
<script language="Javascript" type="text/javascript">
function resize(img,thumbs_size) {
 var fixwidth ;   
    var fixheight ;  
if    (thumbs_size='undefined')//设定参数默认值
{
    fixwidth = 200;   
     fixheight = 200; 
}else{
    var max = thumbs_size.split('x');   
     fixwidth = max[0];   
     fixheight = max[1];    }
    /*
  imgs = document.getElementsByTagName('img');   
     for(i=0;i<imgs.length;i++) {   
        w=imgs.width;
  h=imgs.height;   

  if(w>fixwidth) {
    imgs[i].width=fixwidth;
   imgs[i].height=h/(w/fixwidth);
  }  //如果图片高度大于设定宽度  图片高度=设定宽度,图片宽度=原高度/(原宽度/设定宽度)
        if(h>fixheight) {
  imgs[i].height=fixheight;
  imgs[i].width=w/(h/fixheight);
  }*/
    //如果图片高度大于设定高度  图片高度=设定高度,图片宽度=原宽度/(原高度/设定高度)
    //此上代码问题在于如果宽、高都超过默认,最终以高度为基准,高度依旧有可能超过原有高度。
    //以下为修改代码,通过对原图宽高比与设定宽高比进行比较而判断出是使用设定宽还是高。
    
    if((fixwidth/fixheight)>(img.width/img.height))  //如果设定宽高比>原图宽高比,则以设定高为基准
    {
     
     if(img.height>fixheight) {
    img.height=fixheight;
    img.width=img.width/(img.height/fixheight);
    }
    }
    else                                   //反之则已设定宽为基准
    {
      
     if(img.width>fixwidth) {
     img.width=fixwidth;
    img.height=img.height/(img.width/fixwidth);
   }
    }
   
   
   
    //补充完毕
    /*
        if(h>fixheight) {
        imgs[i].style.cursor= "pointer";   
        imgs[i].onclick = function() { window.open(this.src);}   
        if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) {   
            imgs[i].title = "点击查看放大图片";   
            imgs[i].onmousewheel = function img_zoom() {   
                var zoom = parseInt(this.style.zoom, 10) || 100;   
                zoom += event.wheelDelta / 12;   
                if (zoom> 0) {   
                    this.style.zoom = zoom + "%";   
                    return false;   
                }   
            }   
        }   
        else {   
            imgs[i].title = "点击查看放大图片";   
        }   
     }  
 }*/
}


 </script>
 

分类:Web | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6

Flash AS2 事件处理机制

教程中你将学习下面的内容:

       1.事件处理机制.
       2.创建类库.
       3.使用 回调函数.
              3.1.示例: CFEventClass 类(简单的示例).
              3.2.示例: CFTimer 类(定时器).
       4.使用 addListener 方法(AsBroadcaster / BroadcasterMX 类).
              4.1.示例: AsBEventClass 类(简单的示例).
              4.2.示例: AsBTimer 类(定时器).
       5.使用 addEventListener 方法(EventDispatcher 类).
              5.1.示例: EDEventClass 类(简单的示例).
              5.2.示例: EDTimer 类(定时器).
       6.建立强大的事件处理机制.
              6.1.创建 CFDelegate 类(修改 Delegate 类).
              6.2.创建 CFEventDispatcher 类(修改 EventDispatcher 类).
              6.3.创建 Event 类(事件基类,继承 Object 类).
              6.4.创建 IOErrorEvent 类(错误事件类,继承 Event 类).
              6.5.创建 HTTPStatusEvent 类(http状态事件类,继承 Event 类).
              6.6.示例: EventClass 类(简单的示例).
              6.7.示例: Timer 类(定时器,功能跟 AS3 中的 Timer 类一样).
       7.小结.

源文件(LRC 和 CFSound 类也在这):Flash Class Library.rar

[1.事件处理机制]

查看更多...

分类:flash学习笔记 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 53

用javascipt 实现加载进度条

 

 

本次实现不包含获取文件大小,简单使用,可以放在一般网站上较大图片的读取上面

 

查看更多...

Tags: js

分类:Web | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 80

谷歌首页移动层效果

 

JavaScript代码
  1. <html>   
  2. <head>   
  3. <title>DRAG the DIV</title>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  5. <style>   
  6. *{font-size:12px}   
  7. .dragTable{   
  8.  font-size:12px;   
  9.  border-top:1px solid #3366cc;   
  10.  margin-bottom: 10px;   
  11.  width:100%;   
  12.  background-color:#FFFFFF;   
  13. }   
  14. td{vertical-align:top;}   
  15. .dragTR{   
  16.  cursor:move;   
  17.  color:#7787cc;   
  18.  background-color:#e5eef9;   
  19.  height:20px;   
  20.  padding-left:5px;   
  21.  font-weight:bold;   
  22. }  
  23. #parentTable{   
  24.  border-collapse:collapse;   
  25.  letter-spacing:25px;   
  26. }   
  27. </style>   
  28. <script defer>   
  29. /****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/  
  30.  var Drag={dragged:false,   
  31.   ao:null,   
  32.   tdiv:null,   
  33. dragStart:function(){   
  34.  Drag.ao=event.srcElement;   
  35.  if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){   
  36.   Drag.ao=Drag.ao.offsetParent;   
  37.   Drag.ao.style.zIndex=100;   
  38.  }else  
  39.   return;   
  40.  Drag.dragged=true;   
  41.  Drag.tdiv=document.createElement("div");   
  42.  Drag.tdiv.innerHTML=Drag.ao.outerHTML;   
  43.  Drag.ao.style.border="1px dashed red";   
  44.  Drag.tdiv.style.display="block";   
  45.  Drag.tdiv.style.position="absolute";   
  46.  Drag.tdiv.style.filter="alpha(opacity=70)";   
  47.  Drag.tdiv.style.cursor="move";   
  48.  Drag.tdiv.style.border="1px solid #000000";   
  49.  Drag.tdiv.style.width=Drag.ao.offsetWidth;   
  50.  Drag.tdiv.style.height=Drag.ao.offsetHeight;   
  51.  Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;   
  52.  Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;   
  53.  document.body.appendChild(Drag.tdiv);   
  54.  Drag.lastX=event.clientX;   
  55.  Drag.lastY=event.clientY;   
  56.  Drag.lastLeft=Drag.tdiv.style.left;   
  57.  Drag.lastTop=Drag.tdiv.style.top;   
  58. },   
  59.   
  60.  draging:function(){//重要:判断MOUSE的位置   
  61.  if(!Drag.dragged||Drag.ao==null)return;   
  62.  var tX=event.clientX;   
  63.  var tY=event.clientY;   
  64.  Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;   
  65.  Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;   
  66.  for(var i=0;i<parentTable.cells.length;i++){   
  67.   var parentCell=Drag.getInfo(parentTable.cells[i]);   
  68.   if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){   
  69.    var subTables=parentTable.cells[i].getElementsByTagName("table");   
  70.    if(subTables.length==0){   
  71.     if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){   
  72.      parentTable.cells[i].appendChild(Drag.ao);   
  73.     }   
  74.     break;   
  75.    }   
  76.    for(var j=0;j<subTables.length;j++){   
  77.     var subTable=Drag.getInfo(subTables[j]);   
  78.     if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){   
  79.      parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);   
  80.      break;   
  81.     }else{   
  82.      parentTable.cells[i].appendChild(Drag.ao);   
  83.     }    
  84.    }   
  85.   }   
  86.  }   
  87. }   
  88. ,   
  89.  dragEnd:function(){   
  90.  if(!Drag.dragged)return;   
  91.  Drag.dragged=false;   
  92.  Drag.mm=Drag.repos(150,15);   
  93.  Drag.ao.style.borderWidth="0px";   
  94.  Drag.ao.style.borderTop="1px solid #3366cc";   
  95.  Drag.tdiv.style.borderWidth="0px";   
  96.  Drag.ao.style.zIndex=1;   
  97. },   
  98. getInfo:function(o){//取得坐标   
  99.  var to=new Object();   
  100.  to.left=to.right=to.top=to.bottom=0;   
  101.  var twidth=o.offsetWidth;   
  102.  var theight=o.offsetHeight;   
  103.  while(o!=document.body){   
  104.   to.left+=o.offsetLeft;   
  105.   to.top+=o.offsetTop;   
  106.   o=o.offsetParent;   
  107.  }   
  108.   to.right=to.left+twidth;   
  109.   to.bottom=to.top+theight;   
  110.  return to;   
  111. },   
  112. repos:function(aa,ab){   
  113.  var f=Drag.tdiv.filters.alpha.opacity;   
  114.  var tl=parseInt(Drag.getInfo(Drag.tdiv).left);   
  115.  var tt=parseInt(Drag.getInfo(Drag.tdiv).top);   
  116.  var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;   
  117.  var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;   
  118.  var kf=f/ab;   
  119.  return setInterval(function(){if(ab<1){   
  120.        clearInterval(Drag.mm);   
  121.        Drag.tdiv.removeNode(true);   
  122.        Drag.ao=null;   
  123.        return;   
  124.       }   
  125.      ab--;   
  126.      tl-=kl;   
  127.      tt-=kt;   
  128.      f-=kf;   
  129.      Drag.tdiv.style.left=parseInt(tl)+"px";   
  130.      Drag.tdiv.style.top=parseInt(tt)+"px";   
  131.      Drag.tdiv.filters.alpha.opacity=f;   
  132.     }   
  133. ,aa/ab)   
  134. },   
  135.  inint:function(){//初始化   
  136.  for(var i=0;i<parentTable.cells.length;i++){   
  137.   var subTables=parentTable.cells[i].getElementsByTagName("table");   
  138.   for(var j=0;j<subTables.length;j++){   
  139.    if(subTables[j].className!="dragTable")break;   
  140.    subTables[j].rows[0].className="dragTR";   
  141.    subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);   
  142.   }   
  143.  }   
  144.  document.onmousemove=Drag.draging;   
  145.  document.onmouseup=Drag.dragEnd;   
  146. }   
  147. //end of Object Drag   
  148. }   
  149. Drag.inint();   
  150.   
  151. function _show(str){   
  152.  var w=window.open('','');   
  153.  var d=w.document;   
  154.  d.open();   
  155.  str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");   
  156.  str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");   
  157.  str=str.replace(/\r/g,"<br />\n");   
  158.  d.write(str);   
  159. }   
  160. </script>   
  161. </head>   
  162. <body>   
  163. <table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">   
  164. <tr >   
  165.  <td width="25%" valgin="top">   
  166.   <table border=0 class="dragTable" cellspacing="0">   
  167.    <tr>   
  168.     <td><b>GMAIL</b></td>   
  169.    </tr>   
  170.    <tr>   
  171.     <td>暂时无法显示GMAIL内容</td>   
  172.    <tr>   
  173.   </table><table border=0 class="dragTable" cellspacing="0">   
  174.    <tr>   
  175.     <td>新浪体育</td>   
  176.    </tr>   
  177.    <tr>   
  178.     <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>   
  179.    <tr>   
  180.   </table>   
  181.   <table border=0 class="dragTable" cellspacing="0">   
  182.    <tr>   
  183.     <td>焦点</td>   
  184.    </tr>   
  185.    <tr>   
  186.     <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选    
  187.                 解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>   
  188.    <tr>   
  189.   </table>   
  190.  </td>   
  191.  <td width="25%">   
  192.   <table border=0 class="dragTable" cellspacing="0">   
  193.    <tr>   
  194.     <td>中关村在线</td>   
  195.    </tr>   
  196.    <tr>   
  197.     <td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>   
  198.    <tr>   
  199.   </table></td>   
  200.  <td width="25%">   
  201.   <table border=0 class="dragTable" cellspacing="0">   
  202.    <tr>   
  203.     <td>网易商业</td>   
  204.    </tr>   
  205.    <tr>   
  206.     <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>   
  207.    <tr>   
  208.   </table>  <table border=0 class="dragTable" cellspacing="0">   
  209.    <tr>   
  210.     <td>黑可天下</td>   
  211.    </tr>   
  212.    <tr>   
  213.     <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>   
  214.    <tr>   
  215.   </table>   
  216.  </td>   
  217. </tr>   
  218. </table>   
  219. <input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />   
  220. </body>   
  221. </html>  

 

Tags: js

分类:Web | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 69

javascript 进度条

 

JavaScript代码
  1. <body>   
  2.   
  3. <input type="button" value="start" onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}">   
  4.   
  5. </body>   
  6. <script>   
  7. if(window.ActiveXObject) document.execCommand("BackgroundImageCache",false,true);   
  8.   
  9. function ProcessBar(){   
  10.    this.width = 256;   
  11.    this.height = 18;   
  12.    this.top = 0;   
  13.    this.left = 0;   
  14.    this.backImg = "process_back.gif";   
  15.    this.foreImg = "process.gif";   
  16.    this.backDiv = document.createElement("div");   
  17.    this.foreDiv = document.createElement("div");   
  18.    this.fontDiv = document.createElement("div");   
  19.   
  20.    this.isMoving = false;   
  21.    this.nowLength = 0;   
  22.    this.moveInterval = 100;   
  23.    this.moveRange = 1;   
  24.    this.timer;   
  25.   
  26.    ProcessBar.nowObj = this;   
  27.   
  28.    this.init = function(){   
  29.         this.foreDiv.style.backgroundImage = "url(" + this.foreImg + ")";   
  30.         this.foreDiv.style.backgroundRepeat = "no-repeat";   
  31.         this.foreDiv.style.position = "absolute";   
  32.         this.foreDiv.style.width = this.nowLength;   
  33.         this.foreDiv.style.height = this.height;   
  34.         this.foreDiv.style.top = 0;   
  35.         this.foreDiv.style.left = 0;   
  36.            
  37.         this.fontDiv.style.background = "transparent";   
  38.         this.fontDiv.style.position = "absolute";   
  39.         this.fontDiv.style.width = this.width;   
  40.         this.fontDiv.style.height = this.height;   
  41.         this.fontDiv.style.top = 2;   
  42.         this.fontDiv.style.left = 0;   
  43.         this.fontDiv.style.textAlign = "center";   
  44.         this.fontDiv.style.fontSize = "13px";   
  45.         this.fontDiv.appendChild(document.createTextNode(" "));   
  46.   
  47.         this.backDiv.style.backgroundImage = "url(" + this.backImg + ")";   
  48.         this.backDiv.style.backgroundRepeat = "no-repeat";   
  49.         this.backDiv.style.position = "absolute";   
  50.         this.backDiv.style.width = this.width;   
  51.         this.backDiv.style.height = this.height;   
  52.         this.backDiv.style.top = this.top;   
  53.         this.backDiv.style.left = this.left;   
  54.   
  55.         this.backDiv.appendChild(this.foreDiv);   
  56.         this.backDiv.appendChild(this.fontDiv);   
  57.   
  58.         document.body.appendChild(this.backDiv);   
  59.    }   
  60.   
  61.    this.changeMode = function(){   
  62.         this.isMoving = !this.isMoving;   
  63.            
  64.         if(this.isMoving){   
  65.             this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval);   
  66.         }else{   
  67.             window.clearInterval(this.timer);   
  68.         }   
  69.    }   
  70.   
  71.    this.moving = function(){   
  72.         ProcessBar.nowObj.nowLength += ProcessBar.nowObj.moveRange;   
  73.         ProcessBar.nowObj.foreDiv.style.width = ProcessBar.nowObj.nowLength;   
  74.   
  75.         ProcessBar.nowObj.fontDiv.firstChild.data = Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.width )*100) + "%";   
  76.   
  77.         if(ProcessBar.nowObj.nowLength >= ProcessBar.nowObj.width ){   
  78.             window.clearInterval(ProcessBar.nowObj.timer);   
  79.             ProcessBar.nowObj.fontDiv.firstChild.data = "Complete!";   
  80.         }   
  81.    }   
  82.   
  83.       
  84. }   
  85.   
  86. var processBar = new ProcessBar();   
  87. processBar.backImg = "http://screenprint2007.cpp114.com/UserFiles/20070412155452218.gif";   
  88. processBar.foreImg = "http://screenprint2007.cpp114.com/UserFiles/20070412155424937.gif";   
  89. processBar.top = 100;   
  90. processBar.left = 20;   
  91. processBar.init();   
  92.   
  93.   
  94.   
  95. </script>  

 

JavaScript代码
  1. <body>   
  2.   
  3. <input type="button" value="start" onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}">   
  4.   
  5. </body>   
  6. <script>   
  7. if(window.ActiveXObject) document.execCommand("BackgroundImageCache",false,true);   
  8.   
  9. function ProcessBar(){   
  10.    this.width = 256;   
  11.    this.height = 18;   
  12.    this.top = 0;   
  13.    this.left = 0;   
  14.    this.backImg = "process_back.gif";   
  15.    this.foreImg = "process.gif";   
  16.    this.backDiv = document.createElement("div");   
  17.    this.foreDiv = document.createElement("div");   
  18.    this.fontDiv = document.createElement("div");   
  19.   
  20.    this.isMoving = false;   
  21.    this.nowLength = 0;   
  22.    this.moveInterval = 100;   
  23.    this.moveRange = 1;   
  24.    this.timer;   
  25.   
  26.    ProcessBar.nowObj = this;   
  27.   
  28.    this.init = function(){   
  29.         this.foreDiv.style.backgroundImage = "url(" + this.foreImg + ")";   
  30.         this.foreDiv.style.backgroundRepeat = "no-repeat";   
  31.         this.foreDiv.style.position = "absolute";   
  32.         this.foreDiv.style.width = this.nowLength;   
  33.         this.foreDiv.style.height = this.height;   
  34.         this.foreDiv.style.top = 0;   
  35.         this.foreDiv.style.left = 0;   
  36.            
  37.         this.fontDiv.style.background = "transparent";   
  38.         this.fontDiv.style.position = "absolute";   
  39.         this.fontDiv.style.width = this.width;   
  40.         this.fontDiv.style.height = this.height;   
  41.         this.fontDiv.style.top = 2;   
  42.         this.fontDiv.style.left = 0;   
  43.         this.fontDiv.style.textAlign = "center";   
  44.         this.fontDiv.style.fontSize = "13px";   
  45.         this.fontDiv.appendChild(document.createTextNode(" "));   
  46.   
  47.         this.backDiv.style.backgroundImage = "url(" + this.backImg + ")";   
  48.         this.backDiv.style.backgroundRepeat = "no-repeat";   
  49.         this.backDiv.style.position = "absolute";   
  50.         this.backDiv.style.width = this.width;   
  51.         this.backDiv.style.height = this.height;   
  52.         this.backDiv.style.top = this.top;   
  53.         this.backDiv.style.left = this.left;   
  54.   
  55.         this.backDiv.appendChild(this.foreDiv);   
  56.         this.backDiv.appendChild(this.fontDiv);   
  57.   
  58.         document.body.appendChild(this.backDiv);   
  59.    }   
  60.   
  61.    this.changeMode = function(){   
  62.         this.isMoving = !this.isMoving;   
  63.            
  64.         if(this.isMoving){   
  65.             this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval);   
  66.         }else{   
  67.             window.clearInterval(this.timer);   
  68.         }   
  69.    }   
  70.   
  71.    this.moving = function(){   
  72.         ProcessBar.nowObj.nowLength += ProcessBar.nowObj.moveRange;   
  73.         ProcessBar.nowObj.foreDiv.style.width = ProcessBar.nowObj.nowLength;   
  74.   
  75.         ProcessBar.nowObj.fontDiv.firstChild.data = Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.width)*100) + "%";   
  76.   
  77.         if(ProcessBar.nowObj.nowLength >= ProcessBar.nowObj.width){   
  78.             window.clearInterval(ProcessBar.nowObj.timer);   
  79.             ProcessBar.nowObj.fontDiv.firstChild.data = "Complete!";   
  80.         }   
  81.    }   
  82.   
  83.       
  84. }   
  85.   
  86. var processBar = new ProcessBar();   
  87. processBar.width=327   
  88. processBar.backImg = "http://screenprint2007.cpp114.com/UserFiles/20070414161906093.jpg";   
  89. processBar.foreImg = "http://screenprint2007.cpp114.com/UserFiles/20070414161919171.jpg";   
  90. processBar.top = 100;   
  91. processBar.left = 20;   
  92. processBar.init();   
  93.   
  94.   
  95.   
  96.   
  97. </script>  

 

分类:Web | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 64