1. 程式人生 > >ZK整合jqueryui 實現圖片滑鼠滾輪縮放以及拖拽位置

ZK整合jqueryui 實現圖片滑鼠滾輪縮放以及拖拽位置

//@off    image是一個zul中 的image元件
				image.setWidgetOverride("bind_", "function(){\r\n"+
					      "this.$supers('bind_', arguments);\r\n"+
					      "var node = this.$n();\r\n"+
					      "if (node.addEventListener)\r\n"+ 
					      "    node.addEventListener('DOMMouseScroll', this.proxy(this.onMouseWheel), false);\r\n"+
					      "node.onmousewheel = this.proxy(this.onMouseWheel);\r\n"+
					      "}");

				String script = "function(event){\r\n" + 
				  "    var delta = 0;\r\n" + 
				  "    if (!event) /* For IE. */ \r\n" + 
				  "        event = window.event;\r\n" + 
				  "    if (event.wheelDelta) { /* IE/Opera. */\r\n" + 
				  "        delta = event.wheelDelta / 120;\r\n" + 
				  "        if (window.opera) \r\n" + 
				  "            delta = -delta;\r\n" + 
				  "    }\r\n" + 
				  "    else \r\n" + 
				  "        if (event.detail) {\r\n" + 
				  "            delta = -event.detail / 3;\r\n" + 
				  "        }\r\n" + 
				  "    if (delta) {\r\n" + 
				  "        console.log('delta = ' + delta); " +
				  "       var style= jq('#"+image.getUuid()+"').attr('style'); \r\n" +
				  "       var zoom=100;  \r\n" +
				  "       if(style.indexOf('zoom')<0){  \r\n" +
				  "           \r\n" +
				  "       }else{ \r\n" +
				  "           zoom=parseInt(style.substring(style.indexOf('zoom:')+5,style.indexOf('%')));\r\n" +
				  "           style=style.substring(0,style.indexOf('zoom'));\r\n" +
				  "       } \r\n" +
				  "        if(delta>0){ \r\n" +
				  "          zoom+=20; \r\n" +
				  "        }else{ \r\n" +
				  "          zoom-=10; \r\n" +
				  "        }\r\n" +
				  "         jq('#"+image.getUuid()+"').attr('style',style+'zoom:'+zoom+'%;');  \r\n" +
				  "    }\r\n" + 
				  "    if (event.preventDefault) \r\n" + 
				  "        event.preventDefault();\r\n" + 
				  "    event.returnValue = false;\r\n" + 
				  "}    ";
				image.setWidgetOverride("onMouseWheel", script);
				
				Clients.evalJavaScript("jq('#"+image.getUuid()+"').draggable();");//https://jqueryui.com/draggable/
//@on

最後,在zul頁面中引入jqueryui(拖拽功能): <script type="text/javascript" src="/jqueryui1121/jquery-ui.min.js" />


相關推薦

ZK整合jqueryui 實現圖片滑鼠滾輪以及位置

//@off image是一個zul中 的image元件 image.setWidgetOverride("bind_", "function(){\r\n"+ "this.$supers('bind_', arguments);\r\n

使用計時器實現圖片的準確

gree tin 實現 idt 放大 height tint onload ati <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

iOS Swift 實現圖片點擊回彈動畫

obj mean awake art 簡單 onf 點擊縮放 fork sde 效果就是下面這個樣子: 思路借鑒的是MZTimerLabel,有想過做一個自定義的ImageView,但那樣的話之前view用必須要改代碼,索性就按照MZTimerLabel這個方式實現,簡

20.QT-Qpixmap實現圖片鼠標,鼠標動示例(詳解)

下滑 resize pix slot https qpi map += als #include "widget.h" Widget::Widget(): BigButton("放大",this), LittleButton("縮小",this),

vue中實現圖片全屏預覽,支援移動端

# 安裝 npm install vue-photo-preview --save   # 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(pr

Fresco使用PhotoDraweeView 實現圖片的手勢

1.gradle引入Fresco   compile 'com.facebook.fresco:fresco:0.11.0+' 2.在application中初始化Fresco Fresco.initialize(this, ImagePipelineConfigFactory

JAVA實現圖片等比,圖片擷取功能--封裝類

import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.RenderingHints; import java.awt.geom.AffineTransform; import java.

PNG透明圖片疊加(Opencv實現,包括旋轉以及邊界處理)

疊加效果原圖疊加圖片大致實現了一個四通道的PNG向量圖疊加到一個三通道的圖片上,函式如下:bool 疊加(cv::Mat &dst, cv::Mat &src,double scale = 1.0, //整體透明度double size = 1.0,//圖片縮

Raphael Js實現滑鼠中心paper

主要邏輯就是計算縮放前後滑鼠所在位置偏差,來調整view起點座標到滑鼠點。 var scale; window.onload=function(){ ............... ........

滑鼠滾輪圖紙小工具ZoomIO--通殺Orcad Capture , LayoutPlus , CAM350 , AD , ADPCB , PADS, Foxit Reader

ZoomIO 專為Orcad Capture ,  LayoutPlus  , CAM350 ,  AD ,  ADPCB ,  PADS, Foxit Reader打造的小軟體,模仿Allegro使用

IOS基礎UI之(三)手寫UI和storyboard方式實現圖片移動和

手寫UI是最早進行UI介面佈局的方法,優點是靈活自由,缺點是使程式碼看起來比較長。平時學習的時候可以多嘗試手寫ui,這樣會更深入熟悉控制元件。storyboard開發效率相對比較高。實際開發中看情況而定!!      下面用這兩種方式分別實現圖片移動和縮放。 功能描述:  

java實現圖片裁剪、功能

import java.awt.Image; import java.awt.Rectangle; import java.awt.geom.AffineTransform; import java.awt.image.AffineTransformOp; import java.awt.image.Buff

vue實現圖片按比例問題

getImg(src){ var img_url =src var img = new Image() img.src=img_url this.pictureHeight.height = Math.ceil(img.height/img.width *

用javascript實現圖片等比例

js部分: <script type="text/javascript"> $(window).load(function() {   ImageAutoResize('div[id=demotu]');   function ImageAutoResize(findstr)   {

Android自定義View實現圖片顯示,並實現、切換功能

這裡貼三個檔案的原始碼,第一個是main.java package com.example.test; import java.util.ArrayList; import java.util.List; import com.example.test.MyXZ; i

flutter實現雙擊放大的圖片功能

flutter實現可縮放可拖拽雙擊放大的圖片功能 可縮放可拖拽的功能,可實現圖片或者其他widget的縮放已經拖拽並支援雙擊放大的功能 我們知道官方提供了雙擊縮放,但是不支援拖拽的功能,我們要實現向百度地圖那樣可以縮放又可以拖拽的功能,官方的方法就不支援了。下面先演示下功能: 引數只有兩個:1、child

系列(三):一個可以手勢、旋轉的layout

弄了一個下午,終於搞出來了,PowerfulLayout 下面是一個功能強大的改造的例子: 可以實現以下需求: 1.兩個手指進行縮放佈局 2.所有子控制元件也隨著縮放, 3.子控制元件該有的功能不能丟失(像button有可被點選的功能,縮放後不能丟失該功能)

關於百度地圖的回撥函式

1.縮放的回撥函式 zoomstart {type, target} 地圖更改縮放級別開始時觸發觸發此事件 zoomend {type, target} 地圖更改縮放級別結束時觸發觸發此事件   a、實現縮放動作開始時,返回地圖中心點座標: map

圖片使用滑鼠移動和滾輪js以及外掛

CSS頁面(img標籤必須含有此id) <img id="imageFullScreen" src="" alt=""> JavaScript程式碼: $(document).ready(function() {//圖片移動放大 需配合上面的js才生效 $

QMl中實現通過滑鼠滾輪放大、縮小圖片

import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.Controls