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

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

阿新 • • 發佈：2019-02-02

可以在github 上下載demo連結 

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
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


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

     
 
                

可以在github 上下載demo連結 


html程式碼


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



  
 

    


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

     
 
                

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

html程式碼


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



  
 

    


    
    
鼠標滾輪圖片放大縮小功能，使用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 



  
 

    


    
    
ssm整合-圖片上傳功能（轉）

     
 需要   PE   添加用戶   名稱   simple   target   url   完整   dsi   本文介紹 ssm （Spring+SpringMVC+Mybatis）實現上傳功能。
以一個添加用戶的案例介紹（主要是將上傳文件）。
一、需求介紹
我們要實現添加用戶的時候上傳圖片（其實任何文件都 



  
 

    


    
    
工業儀表盤控制元件Iocomp ActiveX常見問題（2）：Visual Basic中的錯誤

     
 
 下載Iocomp ActiveX/VCL最新版本
 可能的原因＃1
 如果您在Visual Basic中使用我們的ActiveX控制元件，並且您在開啟，關閉時收到錯誤（例如：“模組中的地址037760C2處的DAX錯誤訪問衝突'isAnalogLibrary.ocx'寫入地址0A94D0C0。”或類似的東 



  
 

    


    
    
js實現element中可清空的輸入框（2）

     
 接著上一篇的：js實現element中可清空的輸入框（1）繼續優化，感興趣的可以去看看喲，直通車連結：https://www.cnblogs.com/qcq0703/p/14450001.html
實現效果如下圖：https://element.eleme.cn/#/zh-CN/component/input 



  
 

    


    
    
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 



  
 

    


    
    
個人筆記 js 02  控制div的顯示及隱藏（js控制iframe的顯示及隱藏）

     
 
								
								            
						
                
document.getElementById('divf').style.display=i.style.display=='none'?'block':'none';    //divf為控制顯示 



  
 

    


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

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



  
 

    


    
    
JS實現定時操作 圖片輪播效果（setInterval）

     
  
 
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=functi 



  
 

    


    
    
JS控制CSS偽元素的方法（下）

     
  
  
  
 宣告：這個系列文章的下篇轉載自部落格園，以下是原文標題及連結  js如何控制css偽元素內容（before，after）  http://www.cnblogs.com/yunkou/p/4269974.html?utm_source=tuicool&utm_medium=refer 



  
 

    


    
    
JS控制CSS偽元素的方法（上）

     
  
 
  
  
 宣告：此方法由bumfod 同學提供 
 【HTML部分】 
     <!DOCTYPE html>
    <title>CSS</title>
    <article>The seller can, under Business L 



  
 

    


    
    
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 



  
 

    


    
    
點選圖片放大的效果（如果幫助大，關注我後期更好的作品奧）

     
  
  
  
  
  第一步，要下載燈箱這個外掛 
  連線：連結: https://pan.baidu.com/s/1o1mYq5oIfo87YSQF9kjy8w 提取碼: used 
  下載並且解壓到本地 3.1本地的燈箱解壓如圖 
  進入src 目錄 如下圖  5.1 專案目錄如下  6.HTM 



  
 

    


    
    
頁面圖片放大縮小倍數

     
  
 
 方法放在最上面




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