滤镜：图像遮罩

  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. position:absolute;
  16. left:0px;
  17. top:0px;
  18. }
  19. </style>
  20. <script type="text/javascript">
  21. mouseover=true
  22.  
  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. function mouseup()
  50. {
  51. mouseover=false
  52. }
  53. document.onmousedown=coordinates
  54. document.onmouseup=mouseup
  55. </script>
  56.  
  57. </head>
  58. <body>
  59. <span>请移动这个图形：</span>
  60. <br />
  61. <div style="position:absolute;left:0;top:20;">
  62. <img src="/i/eg_landscape.jpg" width="160" height="120" /></div>
  63. <div style="position:absolute;left:0;top:20;filter:mask(color=#ffffff);width:160;height:120">
  64. <img id="moveMe" src="/i/eg_smile.gif" width="40" height="40"></div>
  65. </body>
  66. </html>