滤镜:文本遮罩

  1. <html>
  2. <head>
  3. <style>
  4. div
  5. {
  6. width:160px;
  7. height:120px;
  8. }
  9. img
  10. {
  11. position:relative;
  12. }
  13. span
  14. {
  15. width:100%;
  16. position:absolute;
  17. top:0px;
  18. left:0px;
  19. }
  20. </style>
  21. <script type="text/javascript">
  22. mouseover=true
  23. function coordinates()
  24. {
  25. if (!moveMe)
  26.     {
  27.     return
  28.     }
  29. if (event.srcElement.id=="moveMe")
  30.     {
  31.     mouseover=true
  32.     pleft=document.getElementById('moveMe').style.pixelLeft
  33.     ptop=document.getElementById('moveMe').style.pixelTop
  34.     xcoor=event.clientX
  35.     ycoor=event.clientY
  36.     document.onmousemove=moveImage
  37.     }
  38. }
  39.  
  40. function moveImage()
  41. {
  42. if (mouseover&&event.button==1)
  43.     {
  44.     document.getElementById('moveMe').style.pixelLeft=pleft+event.clientX-xcoor
  45.     document.getElementById('moveMe').style.pixelTop=ptop+event.clientY-ycoor
  46.     return false
  47.     }
  48. }
  49.  
  50. function mouseup()
  51. {
  52. mouseover=false
  53. }
  54.  
  55. document.onmousedown=coordinates
  56. document.onmouseup=mouseup
  57. </script>
  58.  
  59. </head>
  60. <body>
  61. <span>请移动这个图形：</span>
  62. <h1>www.jishuchi.com</h1>
  63. <p>
  64. Can you read this text?<br />
  65. Pretty cool effect!<br />
  66. jishuchi DHTML Section<br />
  67. Can you read this text?<br />
  68. Pretty cool effect!<br />
  69. jishuchi DHTML Section
  70. </p> 
  71. <div style="position:absolute;left:0;top:20;filter:mask(color=#000000);width:300;height:200">
  72. <img id="moveMe" src="/i/eg_smile.gif" />
  73. </div>
  74. </body>
  75. </html>