javascript经典效果(四)

14年前

三 如果文字过长,则将过长的部分变成省略号显示：


 

  1. <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
  2.             overflow: hidden; text-overflow:ellipsis">
  3. <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
  4. </DIV>
复制代码


 

四 滚动的图片


 

  1. <script language="javascript">
  2. imgArr=new Array()
  3. imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  4. imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  5. imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  6. imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  7. imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  9. var moveStep=4        //步长，单位：pixel
  10. var moveRelax=100    //移动时间间隔，单位：ms
  12. ns4=(document.layers)?true:false
  14. var displayImgAmount=4    //视区窗口可显示个数
  15. var divWidth=220    //每块图片占位宽
  16. var divHeight=145    //每块图片占位高
  18. var startDnum=0
  19. var nextDnum=startDnum+displayImgAmount
  20. var timeID
  21. var outHover=false
  23. var startDivClipLeft
  24. var nextDivClipRight
  26. function initDivPlace(){
  27.     if (ns4){
  28.         for (i=0;i<displayImgAmount;i++){
  29.             eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
  30.         }
  31.         for (i=displayImgAmount;i<imgArr.length;i++){
  32.             eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
  33.         }
  34.     }else{
  35.         for (i=0;i<displayImgAmount;i++){
  36.             eval("document.all.divAds"+i+".style.left="+divWidth*i)
  37.         }
  38.         for (i=displayImgAmount;i<imgArr.length;i++){
  39.             eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
  40.         }
  41.     }
  42. }
  44. function mvStart(){
  45.     timeID=setTimeout(moveLeftDiv,moveRelax)
  46. }
  48. function mvStop(){
  49.     clearTimeout(timeID)
  50. }
  52. function moveLeftDiv(){
  53.     if (ns4){
  54.         for (i=0;i<=displayImgAmount;i++){
  55.             eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
  56.         }
  58.         startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
  59.         nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))
  61.         if (startDivClipLeft+moveStep>divWidth){
  62.             eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
  63.             
  64.             eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
  65.             eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
  66.             eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
  67.             
  68.             
  69.             startDnum=(++startDnum)%imgArr.length
  70.             nextDnum=(startDnum+displayImgAmount)%imgArr.length
  71.             
  72.             startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
  73.             nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
  74.         }else{
  75.             eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
  76.             startDivClipLeft+=moveStep
  77.             nextDivClipRight+=moveStep
  78.         }
  79.         eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
  80.         eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
  81.     }else{
  82.         for (i=0;i<=displayImgAmount;i++){
  83.             eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
  84.         }
  85.    
  86.         startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
  87.         nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
  88.    
  89.         if (startDivClipLeft+moveStep>divWidth){
  90.             eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
  91.             
  92.             eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
  93.             eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
  94.             
  95.             startDnum=(++startDnum)%imgArr.length
  96.             nextDnum=(startDnum+displayImgAmount)%imgArr.length
  97.             
  98.             startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
  99.             nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
  100.         }else{
  101.             startDivClipLeft+=moveStep
  102.             nextDivClipRight+=moveStep
  103.         }
  104.         eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
  105.         eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
  106.     }
  108.     if (outHover){
  109.         mvStop()
  110.     }else{
  111.         mvStart()
  112.     }
  113.    
  114.    
  115. }
  117. function writeDivs(){
  118.     if (ns4){
  119.         document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
  120.         
  121.         for (i=0;i<imgArr.length;i++){
  122.             document.write("<layer name=divAds"+i+">")
  123.             document.write(imgArr[i]+" ")
  124.             document.write("</layer>")
  125.         }
  126.         document.write("</ilayer>")
  127.         document.close()
  128.         for (i=displayImgAmount;i<imgArr.length;i++){
  129.             eval("document.divOuter.document.divAds"+i+".clip.right=0")
  130.         }
  131.     }else{
  132.         document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
  133.         
  134.         for (i=0;i<imgArr.length;i++){
  135.             document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
  136.             document.write(imgArr[i]+" ")
  137.             document.write("</div>")
  138.         }
  139.         document.write("</div>")
  140.         for (i=displayImgAmount;i<imgArr.length;i++){
  141.             eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
  142.         }
  143.     }
  144. }
  145. </script>
  146. <BODY onload=javascript:mvStart()>
  147. <SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>
复制代码