| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <!-- | 3 <!-- |
| 4 Copyright (c) 2012 The Chromium Authors. All rights reserved. | 4 Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 5 Use of this source code is governed by a BSD-style license that can be | 5 Use of this source code is governed by a BSD-style license that can be |
| 6 found in the LICENSE file. | 6 found in the LICENSE file. |
| 7 --> | 7 --> |
| 8 <head> | 8 <head> |
| 9 <title>Flash Topmost Check Example/Test</title> | 9 <title>Flash Topmost Check Example/Test</title> |
| 10 </head> | 10 </head> |
| 11 | 11 |
| 12 <style type="text/css"> | 12 <style type="text/css"> |
| 13 embed { | 13 embed { |
| 14 position: absolute; | 14 position: absolute; |
| 15 } | 15 } |
| 16 #box0 { | |
| 17 background-color: #cccccc; | |
| 18 line-height: 200px; | |
| 19 padding: 0px; | |
| 20 position: absolute; | |
| 21 text-align: center; | |
| 22 width: 2000px; | |
| 23 height: 2000px; | |
| 24 z-index: -2; | |
| 25 } | |
| 26 #box1 { | |
| 27 background-color: #ffff00; | |
| 28 line-height: 200px; | |
| 29 padding: 0px; | |
| 30 position: absolute; | |
| 31 text-align: center; | |
| 32 width: 200px; | |
| 33 height: 200px; | |
| 34 z-index: -1; | |
| 35 } | |
| 36 #box2 { | |
| 37 background-color: #00ffff; | |
| 38 line-height: 200px; | |
| 39 padding: 0px; | |
| 40 position: absolute; | |
| 41 text-align: center; | |
| 42 width: 200px; | |
| 43 height: 200px; | |
| 44 z-index: 1; | |
| 45 } | |
| 46 #box3 { | |
| 47 background-color: #000000; | |
| 48 line-height: 200px; | |
| 49 padding: 0px; | |
| 50 position: absolute; | |
| 51 text-align: center; | |
| 52 width: 2000px; | |
| 53 height: 2000px; | |
| 54 z-index: 2; | |
| 55 visibility: hidden; | |
| 56 } | |
| 57 </style> | 16 </style> |
| 58 | 17 |
| 59 <script type="text/javascript"> | 18 <iframe id="iframe-view" name="iframe-view" |
| 60 var dragInfo = { lastX:0, lastY:0, target:null }; | 19 src="flash_topmost_inner.html" width=1000 height = 1000> |
| 61 | 20 </iframe> |
| 62 function onMouseDown(event) { | |
| 63 dragInfo.lastX = event.clientX; | |
| 64 dragInfo.lastY = event.clientY; | |
| 65 dragInfo.target = event.target; | |
| 66 document.addEventListener("mousemove", onMouseMove, true); | |
| 67 document.addEventListener("mouseup", onMouseUp, true); | |
| 68 event.preventDefault(); | |
| 69 } | |
| 70 | |
| 71 function onMouseMove(event) { | |
| 72 deltaX = event.clientX - dragInfo.lastX; | |
| 73 deltaY = event.clientY - dragInfo.lastY; | |
| 74 dragInfo.lastX = event.clientX; | |
| 75 dragInfo.lastY = event.clientY; | |
| 76 baseX = parseInt(dragInfo.target.style.left, 10); | |
| 77 baseY = parseInt(dragInfo.target.style.top, 10); | |
| 78 dragInfo.target.style.left = (baseX + deltaX) + "px"; | |
| 79 dragInfo.target.style.top = (baseY + deltaY) + "px"; | |
| 80 event.preventDefault(); | |
| 81 } | |
| 82 | |
| 83 function onMouseUp(event) { | |
| 84 document.removeEventListener("mousemove", onMouseMove, true); | |
| 85 document.removeEventListener("mouseup", onMouseUp, true); | |
| 86 event.preventDefault(); | |
| 87 } | |
| 88 </script> | |
| 89 | |
| 90 <div id="box0" style="left:0px;top:0px;" | |
| 91 onmousedown="onMouseDown(event)">Box #0</div> | |
| 92 <div id="box1" style="left:100px;top:400px;" | |
| 93 onmousedown="onMouseDown(event)">Box #1</div> | |
| 94 <embed id="plugin" type="application/x-ppapi-example-flash-topmost" | |
| 95 width="400" height="400" | |
| 96 style="left:200px;top:400px;" /> | |
| 97 <div id="box2" style="left:200px;top:500px;" | |
| 98 onmousedown="onMouseDown(event)">Box #2</div> | |
| 99 <div id="box3" style="left:0px;top:0px;" | |
| 100 onmousedown="onMouseDown(event)">Box #3</div> | |
| 101 | 21 |
| 102 </body> | 22 </body> |
| 103 </html> | 23 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10572055:
Updated the flash_topmost ppapi example (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src