2. 程式人生 > >js兩隻手指控制div圖片放大縮小功能

js兩隻手指控制div圖片放大縮小功能

阿新 • • 發佈：2019-01-27

可以在github 上下載demo連結 

https://github.com/fongdaBoy/hammer-pinch-master

html程式碼

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
   <title
 
>Document</title>
   <style type="text/css">
      body,html{
         position: relative;
height: 100%;
width: 100%;
margin: 0;
background-color: #fff;
}
      .animate{
         -webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
      .m-pic-cover{
         position
 
: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.5);
}
      .m-pic-content{
         background-color: red;
width: 150px;
height: 150px;
overflow: hidden;
text-overflow: ellipsis;
}

   </style>
</head>
<body>
   <div class="m-pic-cover">
      <div class=
 
"m-pic-content m-pic" id="j-pic"></div>
   </div>
   <script type="text/javascript" src="./js/hammer.min.js"></script>
   <script type="text/javascript" src="./hammer-pic.js"></script>
   <script type="text/javascript">
      var pic = new Pic('#j-pic');
pic.picInit();
//console.log(t);
</script>
</body>
</html>


js帶程式碼

(function(){
   var Pic = function(id){
      this._config = {},
this._id = document.querySelector(id);
this.mc = new Hammer.Manager(this._id);
this.timer = false;
this.translateX = 0;
this.translateY = 0;
this.scale = 1;
this.firstTouch = true; //使用者第一次觸控
this._relateX = (document.body.clientWidth - this._id.offsetWidth)/2;
this._relateY = (document.body.clientHeight - this._id.offsetHeight)/2;
this._oldX = 0;
this._oldY = 0;
this._oldScale = 1;
}
   Pic.prototype = {
      constructor: Pic,
picAnimate: function(){
         return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {  
               setTimeout(callback, 1000 / 60);  
}; 
},
_setPosition: function(){
         var that = this;
var _relateX = 0;
var _relateY = 0;
var _relateTop = 0;
var _relateLeft = 0;
_relateX = (document.body.clientWidth - this._id.offsetWidth)/2;
_relateY = (document.body.clientHeight - this._id.offsetHeight)/2;
_relateTop = this._id.offsetTop;
_relateLeft = this._id.offsetLeft;
that._selfPosition({
            translateX: that._relateX,
translateY: that._relateY,
scale: that.scale
})
      },
_selfPosition: function(pos){
         var that = this;
var _pos = function(){
            var _style = [
               'translate3d(' + pos.translateX + 'px,' + pos.translateY + 'px,0)',
'scale(' + pos.scale + ',' + pos.scale + ')'
]
            _style = _style.join(' ');
that._id.style.transform = _style;
that._id.innerHTML = _style;
};
that._picAnimate(_pos);
},
_picAnimate: function(fn){
         return this.picAnimate()(fn);
},
onPan: function(ev) {
         var that = this;
that.translateX = ev.deltaX;
that.translateY = ev.deltaY;
that._position = {
            translateX: ev.deltaX,
translateY: ev.deltaY,
scale: that.scale
};
//that._selfPosition(that._position);
},
onPinch: function() {
         var that = this;
that.scale *= ev.scale;
that._selfPosition({
            translateX: that.translateX,
translateY: that.translateY,
scale: that.scale
})

      },
picInit: function(){
         var that = this;
that.mc.on("hammer.input", function(ev){
            if(ev.isFinal) {
               //that._setPosition();
that._oldX = that.translateX;
that._oldY = that.translateY;
that._oldScale = that.scale;
}
         })
         that.mc.add( new Hammer.Pan({
            direction: Hammer.DIRECTION_ALL,
threshold: 0, 
pointers: 0
}));
that.mc.add(new Hammer.Pinch({
            threshold: 0
})).recognizeWith(that.mc.get('pan'));
that.mc.on('panstart panmove', _onPan);
that.mc.on('pinchstart pinchmove', _onPinch);
that._setPosition();
function _onPan(ev){

            if(that.firstTouch) {
               that._oldX = that._relateX;
that._oldY = that._relateY;
};
that.translateX = that._oldX + ev.deltaX;
that.translateY = that._oldY + ev.deltaY;
var _position = {
               translateX: that.translateX,
translateY: that.translateY,
scale: that.scale
};
that._selfPosition(_position);
that.firstTouch = false;
};
function _onPinch(ev) {
            
            that.scale = that._oldScale * ev.scale;
that._selfPosition({
               translateX: that.translateX,
translateY: that.translateY,
scale: that.scale
})

            that._selfPosition(that._position);
};
}
   }
   window.Pic = Pic;
})()

hammer.min.js程式碼下載地址

* http://hammerjs.github.io/
/*! Hammer.JS - v2.0.6 - 2016-01-06
 * http://hammerjs.github.io/
 *
 * Copyright (c) 2016 Jorik Tangelder;
 * Licensed under the  license */
!function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(j(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e<a.length;)b.call(c,a[e],e,a),e++;else for(e in a)a.hasOwnProperty(e)&&b.call(c,a[e],e,a)}function h(b,c,d){var e="DEPRECATED METHOD: "+c+"\n"+d+" AT \n";return function(){var c=new Error("get-stack-trace"),d=c&&c.stack?c.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",f=a.console&&(a.console.warn||a.console.log);return f&&f.call(a.console,e,d),b.apply(this,arguments)}}function i(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&ha(d,c)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(a,b){return typeof a==ka?a.apply(b?b[0]||d:d,b):a}function l(a,b){return a===d?b:a}function m(a,b,c){g(q(b),function(b){a.addEventListener(b,c,!1)})}function n(a,b,c){g(q(b),function(b){a.removeEventListener(b,c,!1)})}function o(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function p(a,b){return a.indexOf(b)>-1}function q(a){return a.trim().split(/\s+/g)}function r(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;d<a.length;){if(c&&a[d][c]==b||!c&&a[d]===b)return d;d++}return-1}function s(a){return Array.prototype.slice.call(a,0)}function t(a,b,c){for(var d=[],e=[],f=0;f<a.length;){var g=b?a[f][b]:a[f];r(e,g)<0&&d.push(a[f]),e[f]=g,f++}return c&&(d=b?d.sort(function(a,c){return a[b]>c[b]}):d.sort()),d}function u(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g<ia.length;){if(c=ia[g],e=c?c+f:b,e in a)return e;g++}return d}function v(){return qa++}function w(b){var c=b.ownerDocument||b;return c.defaultView||c.parentWindow||a}function x(a,b){var c=this;this.manager=a,this.callback=b,this.element=a.element,this.target=a.options.inputTarget,this.domHandler=function(b){k(a.options.enable,[a])&&c.handler(b)},this.init()}function y(a){var b,c=a.options.inputClass;return new(b=c?c:ta?M:ua?P:sa?R:L)(a,z)}function z(a,b,c){var d=c.pointers.length,e=c.changedPointers.length,f=b&Aa&&d-e===0,g=b&(Ca|Da)&&d-e===0;c.isFirst=!!f,c.isFinal=!!g,f&&(a.session={}),c.eventType=b,A(a,c),a.emit("hammer.input",c),a.recognize(c),a.session.prevInput=c}function A(a,b){var c=a.session,d=b.pointers,e=d.length;c.firstInput||(c.firstInput=D(b)),e>1&&!c.firstMultiple?c.firstMultiple=D(b):1===e&&(c.firstMultiple=!1);var f=c.firstInput,g=c.firstMultiple,h=g?g.center:f.center,i=b.center=E(d);b.timeStamp=na(),b.deltaTime=b.timeStamp-f.timeStamp,b.angle=I(h,i),b.distance=H(h,i),B(c,b),b.offsetDirection=G(b.deltaX,b.deltaY);var j=F(b.deltaTime,b.deltaX,b.deltaY);b.overallVelocityX=j.x,b.overallVelocityY=j.y,b.overallVelocity=ma(j.x)>ma(j.y)?j.x:j.y,b.scale=g?K(g.pointers,d):1,b.rotation=g?J(g.pointers,d):0,b.maxPointers=c.prevInput?b.pointers.length>c.prevInput.maxPointers?b.pointers.length:c.prevInput.maxPointers:b.pointers.length,C(c,b);var k=a.element;o(b.srcEvent.target,k)&&(k=b.srcEvent.target),b.target=k}function B(a,b){var c=b.center,d=a.offsetDelta||{},e=a.prevDelta||{},f=a.prevInput||{};(b.eventType===Aa||f.eventType===Ca)&&(e=a.prevDelta={x:f.deltaX||0,y:f.deltaY||0},d=a.offsetDelta={x:c.x,y:c.y}),b.deltaX=e.x+(c.x-d.x),b.deltaY=e.y+(c.y-d.y)}function C(a,b){var c,e,f,g,h=a.lastInterval||b,i=b.timeStamp-h.timeStamp;if(b.eventType!=Da&&(i>za||h.velocity===d)){var j=b.deltaX-h.deltaX,k=b.deltaY-h.deltaY,l=F(i,j,k);e=l.x,f=l.y,c=ma(l.x)>ma(l.y)?l.x:l.y,g=G(j,k),a.lastInterval=b}else c=h.velocity,e=h.velocityX,f=h.velocityY,g=h.direction;b.velocity=c,b.velocityX=e,b.velocityY=f,b.direction=g}function D(a){for(var b=[],c=0;c<a.pointers.length;)b[c]={clientX:la(a.pointers[c].clientX),clientY:la(a.pointers[c].clientY)},c++;return{timeStamp:na(),pointers:b,center:E(b),deltaX:a.deltaX,deltaY:a.deltaY}}function E(a){var b=a.length;if(1===b)return{x:la(a[0].clientX),y:la(a[0].clientY)};for(var c=0,d=0,e=0;b>e;)c+=a[e].clientX,d+=a[e].clientY,e++;return{x:la(c/b),y:la(d/b)}}function F(a,b,c){return{x:b/a||0,y:c/a||0}}function G(a,b){return a===b?Ea:ma(a)>=ma(b)?0>a?Fa:Ga:0>b?Ha:Ia}function H(a,b,c){c||(c=Ma);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return Math.sqrt(d*d+e*e)}function I(a,b,c){c||(c=Ma);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return 180*Math.atan2(e,d)/Math.PI}function J(a,b){return I(b[1],b[0],Na)+I(a[1],a[0],Na)}function K(a,b){return H(b[0],b[1],Na)/H(a[0],a[1],Na)}function L(){this.evEl=Pa,this.evWin=Qa,this.allow=!0,this.pressed=!1,x.apply(this,arguments)}function M(){this.evEl=Ta,this.evWin=Ua,x.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function N(){this.evTarget=Wa,this.evWin=Xa,this.started=!1,x.apply(this,arguments)}function O(a,b){var c=s(a.touches),d=s(a.changedTouches);return b&(Ca|Da)&&(c=t(c.concat(d),"identifier",!0)),[c,d]}function P(){this.evTarget=Za,this.targetIds={},x.apply(this,arguments)}function Q(a,b){var c=s(a.touches),d=this.targetIds;if(b&(Aa|Ba)&&1===c.length)return d[c[0].identifier]=!0,[c,c];var e,f,g=s(a.changedTouches),h=[],i=this.target;if(f=c.filter(function(a){return o(a.target,i)}),b===Aa)for(e=0;e<f.length;)d[f[e].identifier]=!0,e++;for(e=0;e<g.length;)d[g[e].identifier]&&h.push(g[e]),b&(Ca|Da)&&delete d[g[e].identifier],e++;return h.length?[t(f.concat(h),"identifier",!0),h]:void 0}function R(){x.apply(this,arguments);var a=j(this.handler,this);this.touch=new P(this.manager,a),this.mouse=new L(this.manager,a)}function S(a,b){this.manager=a,this.set(b)}function T(a){if(p(a,db))return db;var b=p(a,eb),c=p(a,fb);return b&&c?db:b||c?b?eb:fb:p(a,cb)
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
js兩隻手指控制div圖片放大縮小功能

     
 
                

可以在github 上下載demo連結 
https://github.com/fongdaBoy/hammer-pinch-master

html程式碼


<!DOCTYPE html>
<html lang="zh-cmn-Han 



  
 

    


    
    
js兩隻手指控制div圖片放大縮小功能（2）

     
 
                

可以在github 上下載demo連結 


html程式碼


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
   <meta charset="UTF-8"& 



  
 

    


    
    
鼠標滾輪圖片放大縮小功能，使用layer彈框後不起作用

     
 src   con   ext   顯示   想是   它的   max   msg   隨著   今天在項目中遇到的一個問題：點擊按鈕使用layer彈框彈出一張圖片，需要加一個鼠標滾輪放大縮小，圖片也跟著放大縮小的功能。於是在網上找了一個demo。
DEMO:

 1 <!DOCTYPE html P 



  
 

    


    
    
點選圖片放大縮小功能

     
  
 
 1.點選圖片放大縮小的思路
 圖片部分：
 <table>
  <div>
      <img style="width:62px;height:83px;display:block" src="${photourl}" onclick="showMaxImg(thi 



  
 

    


    
    
html 圖片在一個div中放大縮小效果

     
 
 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jque 



  
 

    


    
    
js兩種方式定位div

     
 
								
								            
							
							
							<html>
<title>js定位div的兩種方式</title>
<head>
<meta charset="utf-8">
<sc 



  
 

    


    
    
EXT JS兩種時間控制元件的比較

     
 
                1、new Ext.form.DateField 只提供了日期選擇部分，沒有提供時間部分供選擇，例：this.beginDt =  newExt.form.DateField({        selectOnFocus: true,        allowBlank: f 



  
 

    


    
    
swift3.0 圖片放大縮小動畫效果

     
 manager   data-   獲取   index   ron   ase   set   nis   scale   一. 內容說明
      跟我之前這篇類似，只不過那篇是OC版本，這篇是Swift版本 OC版本鏈接地址
目的：通過kingfisher請求5張圖片，展示出來。然後利用圖片放大縮小管 



  
 

    


    
    
Vue-cli中使用vConsole，以及設定JS連續點選控制vConsole按鈕顯隱功能實現

     
 一、vue-cli腳手架中搭建的專案引入vConsole除錯 
1.首先npm安裝，大家都懂的。 
 
 npm install vconsole 
 
2.在合適的地方新建一個檔案vconsole.js，內容如下： 
 
 import Vconsole from 'vconsole'
let vConso 



  
 

    


    
    
Vue-cli中使用vConsole，以及設置JS連續點擊控制vConsole按鈕顯隱功能實現

     
 vco   from   main   date   export   lse   發包   操作   前端開發   一、vue-cli腳手架中搭建的項目引入vConsole調試
1.首先npm安裝，大家都懂的。

npm install vconsole

2.在合適的地方新建一個文件vconsole.js 



  
 

    


    
    
圖片放大縮小

     
  
 

  public class DragTest extends Activity {
 
      private ImageView dog;
      private float xl;
      p 



  
 

    


    
    
頁面圖片放大縮小倍數

     
  
 
 方法放在最上面




function ReSizePic(ThisPic){
    var RePicWidth = 50; //這裡修改為您想顯示的寬度值
    //============以下程式碼請勿修改==================================
    va 



  
 

    


    
    
簡單實現點選圖片放大的功能

     
 
							
							
							背景：想在app中加上點選縮圖放大的效果，但是不想匯入大量的JS ，也無需哪些複雜的外掛，於是自己手寫了一個很簡單的實現，在這裡記下來。
程式碼很簡單，還有很多優化空間，時間有限，就沒有優化了
1 . 先準備大圖的位置
大圖是fixed於整個介面，只修改其中的s 



  
 

    


    
    
圖片隨手勢放大縮小功能

     
 
							
							
							
主介面：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

   



  
 

    


    
    
iOS 通過Assets設定啟動圖片 以及icon處理工具Prepo(圖片放大縮小不失真，自動生成@[email p

     
 
                1.在Assets裡面新增LaunchImage,設定如圖就可以了2.刪掉info下的Launch screen interface file base name3.Launch Images Source選一下1步驟裡面新增的LaunchImage4.準備四張圖片放到1圖對 



  
 

    


    
    
gridview顯示圖片並實現點選圖片放大縮小

     
 
                一、建立一個gridview控制元件，並新增列。





其中ImageField就是顯示圖片的列，屬性DataImagteUrlField繫結為圖片的路徑,也就是資料庫儲存圖片路徑的欄位名。

二、建立一個用來顯示大圖片的div 以及Img控制元件。以及css樣式、js。 



  
 

    


    
    
滑鼠滾動實現圖片放大縮小[轉]

     
 
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xm 



  
 

    


    
    
實現圖片放大縮小，點選熱點響應事件

     
 
                
最近實現一個功能，類似百度地圖。條件：一張圖片。要求圖片可以任意放大縮小移動，點選放縮後圖片的熱點時彈出popwindow，並且給熱點區域新增陰影，顯示出熱點區。
實現思路：
1.先要實現圖片的任意放縮
2.獲得熱點區域的座標
3.點選熱點區域響應事件
4.點選熱點區域彈出 



  
 

    


    
    
jquery實現頁面圖片等比例放大縮小功能

     
 
$(function () {
    var imgs = $('a>img');
    imgs.each(function () {
        var img = $(this);
        var width = img.attr('width');//區域寬度
         



  
 

    


    
    
jQuery——小案例：點選圖片放大縮小

     
 
								
								            
						
                
需求：
HTML中有三張圖片：
如果圖片處於“大”狀態，則點選圖片可以縮小。
如果圖片處於“小”狀態，則點選圖片可以放大。
程式碼：
<!DOCTYPE html>
<html>