ブラウザ

ExtJS画像ビューア（推奨）



Extjs Image Viewer



1、レンダリング




2、この例は http://yourgame.iteye.com/blog/477600 根拠に基づいて改善および修正します。

3、jsコード



Jsコード 画像 画像
  1. どこimage_window =新着Ext.Window（{
  2. id：「画像ウィンドウ」、
  3. 題名 ：「画像ビューア」、
  4. 幅：750、
  5. 高さ：500、
  6. サイズ変更可能：false、
  7. closeAction：'隠す'、
  8. レイアウト：'境界'、
  9. アイテム：[{
  10. xtype：'パネル'、
  11. 領域：'センター'、
  12. レイアウト：'フィット'、
  13. ボディスタイル ：'background-color：＃E5E3DF'、
  14. フレーム：false、
  15. 境界：false、
  16. html：''
  17. +''
  18. +''
  19. +''
  20. +''
  21. +' '
  22. }]、
  23. ボタン：[{
  24. テキスト：'キャンセル'、
  25. ハンドラ：関数（）{
  26. image_window.hide（）
  27. }
  28. }]、
  29. リスナー：{
  30. '公演'：関数（c）{
  31. pageInit（）
  32. }
  33. }
  34. }）
  37. / **
  38. *初期化
  39. * /
  40. 関数pageInit（）{
  41. どこ画像= Ext.get（「ビューイメージ」）。
  43. もし（画像！=ヌル）{
  44. Ext.get（「ビューイメージ」）。オン（{
  45. 「マウスダウン」：{fn：関数（）{この.setStyle（'カーソル'、'url（images / closedhand_8_8.cur）、default'）}、scope：image}、
  46. 「マウス」：{fn：関数（）{この.setStyle（'カーソル'、'url（images / openhand_8_8.cur）、move'）}、scope：image}、
  47. 'dblclick'：{fn：関数（）{
  48. ズーム（画像、true、1.2）
  49. }
  50. }}）
  51. 新着Ext.dd.DD（画像、「pic」）。
  53. //image.center()//画像を中央に配置
  55. //元のサイズを取得します
  56. image.osize = {
  57. width：image.getWidth（）、
  58. 高さ：image.getHeight（）
  59. }
  61. Ext.get（'アップ'）。オン（'クリック'、関数（）{imageMove（'アップ'、画像）}）//上に移動
  62. Ext.get（'ダウン'）。オン（'クリック'、関数（）{imageMove（'ダウン'、画像）}）// 下に移動
  63. Ext.get（'左'）。オン（'クリック'、関数（）{imageMove（'左'、画像）}）//左方移動
  64. Ext.get（'正しい'）。オン（'クリック'、関数（）{imageMove（'正しい'、画像）}）//右に移動
  65. Ext.get（'に'）。オン（'クリック'、関数（）{ズーム（画像、true、1.5）}）//ズームイン
  66. Ext.get（'でる'）。オン（'クリック'、関数（）{ズーム（画像、false、1.5）}）//削減
  67. Ext.get（'ズーム'）。オン（'クリック'、関数（）{復元（画像）}）//戻す
  68. }
  69. }
  72. / **
  73. *画像の移動
  74. * /
  75. 関数imageMove（direction、el）{
  76. el.move（方向、50、true）。
  77. }
  80. / **
  81. *
  82. * @param elpictureオブジェクト
  83. * @param type trueズームイン、falseズームアウト
  84. * @ paramオフセット量
  85. * /
  86. 関数ズーム（el、type、offset）{
  87. どこwidth = el.getWidth（）
  88. どこ高さ= el.getHeight（）
  89. どこnwidth =タイプ？ （幅*オフセット）:(幅/オフセット）
  90. どこnheight =タイプ？ （高さ*オフセット）:(高さ/オフセット）
  91. どこ左=タイプ？ -（（nwidth-width）/ 2）：（（width-nwidth）/ 2）
  92. どこトップ=タイプ？ -（（nheight-height）/ 2）：（（height-nheight）/ 2）
  93. el.animate（
  94. {{
  95. 高さ：{to：nheight、from：height}、
  96. 幅：{to：nwidth、from：width}、
  97. 左：{by：left}、
  98. top：{by：top}
  99. }、
  100. ヌル、
  101. ヌル、
  102. 'backBoth'、
  103. 'モーション'
  104. ）。
  105. }
  108. / **
  109. *画像の復元
  110. * /
  111. 関数復元（el）{
  112. どこサイズ= el.osize
  114. //カスタムコールバック関数
  115. 関数センター（el、コールバック）{
  116. el.center（）
  117. コールバック（the）
  118. }
  119. el.fadeOut（{コールバック：関数（）{
  120. el.setSize（size.width、size.height、{コールバック：関数（）{
  121. センター（、、関数（ee）{//コールバック
  122. ee.fadeIn（）
  123. }）
  124. }}）
  125. }
  126. }）
  127. }
var image_window = new Ext.Window({ id: 'image-window', Title : 'picture browsing', width : 750, height : 500, resizable : false, closeAction :'hide', layout:'border', items:[{ xtype: 'panel', region: 'center', layout:'fit', bodyStyle : 'background-color:#E5E3DF', frame:false, border:false, html :' ' +' ' +' ' +' ' +' ' +'  ' }], buttons: [{ Text: 'cancel', handler: function() { image_window.hide() } }], listeners: { 'show': function(c) { pageInit() } } }) /** * Initialization */ function pageInit(){ var image = Ext.get('view-image') if(image!=null){ Ext.get('view-image').on({ 'mousedown':{fn:function(){this.setStyle('cursor','url(images/closedhand_8_8.cur),default')},scope:image}, 'mouseup':{fn:function(){this.setStyle('cursor','url(images/openhand_8_8.cur),move')},scope:image}, 'dblclick':{fn:function(){ zoom(image,true,1.2) } }}) new Ext.dd.DD(image, 'pic') //image.center()//Image centered / / Get the original size image.osize = { width:image.getWidth(), height:image.getHeight() } Ext.get('up').on('click',function(){imageMove('up',image)}) //Move up Ext.get('down').on('click',function(){imageMove('down',image)}) //Move down Ext.get('left').on('click',function(){imageMove('left',image)}) //Shift left Ext.get('right').on('click',function(){imageMove('right',image)}) //Right to move Ext.get('in').on('click',function(){zoom(image,true,1.5)}) //Zoom in Ext.get('out').on('click',function(){zoom(image,false,1.5)}) //Zoom out Ext.get('zoom').on('click',function(){restore(image)}) //Restore } } /** * Picture move */ function imageMove(direction, el) { el.move(direction, 50, true) } /** * * @param el picture object * @param type true zoom in, false zoom out * @param offset amount */ function zoom(el,type,offset){ var width = el.getWidth() var height = el.getHeight() var nwidth = type ? (width * offset) : (width / offset) var nheight = type ? (height * offset) : (height / offset) var left = type ? -((nwidth - width) / 2):((width - nwidth) / 2) var top = type ? -((nheight - height) / 2):((height - nheight) / 2) el.animate( { height: {to: nheight, from: height}, width: {to: nwidth, from: width}, left: {by:left}, top: {by:top} }, null, null, 'backBoth', 'motion' ) } /** * Picture restoration */ function restore(el) { var size = el.osize / / Custom callback function function center(el,callback){ el.center() callback(el) } el.fadeOut({callback:function(){ el.setSize(size.width, size.height, {callback:function(){ Center(el,function(ee){//call callback ee.fadeIn() }) }}) } }) }

4、フォームjsを呼び出します

Jsコード
  1. image_window.show（）
  2. image_window.setTitle（「画像プレビュー-」+ array [0] .pigCode +'['+ picType +']'）。
  3. Ext.get（「ビューイメージ」）.dom.src ='upload /'+ array [0] .picName 
image_window.show() image_window.setTitle('image preview-' + array[0].pigCode + '[' + picType + ']') Ext.get('view-image').dom.src = 'upload/' + array[0].picName

注：フォームは、srcを画像アドレスにポイントするだけで、プログラムのどこからでも直接呼び出すことができます。

5、他のcssと画像はアドレスから使用できます： http://yourgame.iteye.com/blog/477600 ダウンロード