<!DOCTYPE html>

<html>

<head>

<script>

function getxy(e){

    var a=new Array()

    var t=e.offsetTop;

    var l=e.offsetLeft;

    var w=e.offsetWidth;

    var h=e.offsetHeight;

    while(e=e.offsetParent){

        t+=e.offsetTop;

        l+=e.offsetLeft;

    }

    a[0]=w;a[1]=h;

    a[2]=l;a[3]=t;

    return a;

}

</script>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="assets/style.css">

    <title>Hammer.js</title>

    <style>

		*, *:after, *:before {

			box-sizing: border-box;

			-moz-box-sizing: border-box;

		}

		html, body {

			margin: 0;

			padding: 0;

			height: 100%;

			min-height: 100%;

			background: #eee;

			font: 13px/1.5em 'Open Sans', Helvetica, Arial, sans-serif;

		}

		a {

			color: #4986e7;

		}

		.bg1, .green { background: #42d692; }

		.bg2, .blue { background: #4986e7; }

		.bg3, .red { background: #d06b64; }

		.bg4, .purple { background: #cd74e6; }

		.bg5, .azure { background: #9fe1e7; }

		body {

			margin: 20px;

		}

		pre {

			background: #fff;

			padding: 20px;

			margin-bottom: 20px;

		}

		.container {

			max-width: 900px;

			margin: 0 auto;

		}

		.clear { clear: both; }

        html, body {

            overflow: hidden;

            margin: 0;

        }

        body {

            -webkit-perspective: 500;

            -moz-perspective: 500;

            perspective: 500;

        }

        .animate {

            -webkit-transition: all .3s;

            -moz-transition: all .3s;

            transition: all .3s;

        }

        #hit {

            padding: 10px;

        }

        #log {

            position: absolute;

            padding: 10px;

        }

		.bg2{

			width:15em; height:40em; margin:0 auto;

			/*background-image:url(1.jpg);*/

			position:fixed;

			z-index:-2;

			background-repeat:no-repeat;

		}

    </style>

</head>

<body>

<div class="bg2" id="bg2">

</div>

<script src="hammer.js"></script>

<script>

    var reqAnimationFrame = (function () {

        return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {

            window.setTimeout(callback, 1000 / 60);

        };

    })();

	var bg = document.getElementById("bg2");

	var xy = getxy(bg);

	var bgP = {

				x:0,y:0,dx:0,dy:0,

				s:1,ls:1,bdw:xy[0],bdh:xy[1]

			};

    var mc = new Hammer.Manager(bg);

	function imgLoaded(){

		bgP.bgw = this.width;

		bgP.bgh = this.height;

		if(bgP.bgw / bgP.bgh > bgP.bdw / bgP.bdh)

			bgP.useW = false;

		else

			bgP.useW = true;

		this.style.display = 'none';

		bg.style.backgroundImage = 'url('+this.src+')';

		bg.style.backgroundSize = bgP.useW? (bgP.bgw+'px auto') : ('auto '+bgP.bgh+'px');

		mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));

		mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));

		mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);

		mc.on("panstart panmove", onPan);

		//mc.on("rotatestart rotatemove", onRotate);

		mc.on("pinchstart pinchmove", onPinch);

		mc.on("hammer.input", function(ev) {

			if(ev.isFinal) {

				bgP.dx = 0;

				bgP.dy = 0;

				bgP.ls = 1;

			}

		});

	}

    function onPan(ev) {

        bgP.x += ev.deltaX - bgP.dx;

		bgP.y += ev.deltaY - bgP.dy;

		console.log('x='+(ev.deltaX - bgP.dx)+', y='+(ev.deltaY - bgP.dy));

		bgP.dx = ev.deltaX;

		bgP.dy = ev.deltaY;

		if(bgP.x>0) bgP.x = 0;

		if(bgP.y>0) bgP.y = 0;

		if(bgP.x+bgP.bgw*bgP.s<bgP.bdw)

			bgP.x = bgP.bdw - bgP.bgw*bgP.s;

		if(bgP.y+bgP.bgh*bgP.s<bgP.bdh)

			bgP.y = bgP.bdh - bgP.bgh*bgP.s;

		var pos = bgP.x+'px '+bgP.y+'px';

		bg.style.backgroundPosition = pos;

    }

    var initScale = 1;

    function onPinch(ev) {

        if(ev.type == 'pinchstart') {

            initScale = transform.scale || 1;

        }

		var add = ev.scale - bgP.ls;

		bgP.s += add;

		bgP.ls = ev.scale;

		if(bgP.useW){

			var w = (bgP.bgw*bgP.s);

			if(w<bgP.bdw)

			{

				bgP.s = bgP.bdw/bgP.bgw;

				w = (bgP.bgw*bgP.s);

			}

			bg.style.backgroundSize = w +'px auto';

		}else{

			var h = (bgP.bgh*bgP.s);

			if(h<bgP.bdh)

			{

				bgP.s = bgP.bdh/bgP.bgh;

				h = (bgP.bgh*bgP.s);

			}

			bg.style.backgroundSize = 'auto '+h +'px';

		}

    }

	function bgStart(src){

		var img = document.createElement('img');

		img.src = src;

		img.style.opacity = '0.01';

		img.onload = imgLoaded;

	}

	bgStart('1.jpg');

</script>

</body>

</html>

hammer.js实现背景图手势缩放调整位置的更多相关文章

  1. Qt中的Label和PushButton背景图自动缩放设置

    Label 背景图自动缩放 QPixmap* pixmap = new QPixmap(":/images/HeadIcon/1.png"); pixmap->scaled( ...

  2. 移动开发框架，第【二】弹：Hammer.js 移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  3. JS实现背景图按时切换或者每次更新

    首先要有一个添加背景图片的div <div  id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myD ...

  4. JS编写背景图切换

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. JS——百度背景图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

  7. NGUI 背景图自适应

    背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

  8. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  9. javascript 手势缩放 旋转 拖动支持：hammer.js

    原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...

随机推荐

  1. HQL查询——HQL查询的基本用法

    HQL查询--HQL查询的基本用法 1.HQL语法类似于SQL语法,但是需要注意的是,HQL是一种完全面向对象的查询语言.SQL语言操作的对象是数据表.列等数据库对象,而HQL语言的操作对象是类.实例 ...

  2. 广播Broadcast Receiver

    广播的类型: 1.标准广播(Normal broadcat) 完全异步执行的广播,所有广播接收器同一时间接收广播消息. 效率高,但无法被截断. 2.有序广播 同步执行的广播,同一时刻只能有一个广播接收 ...

  3. PHPExcel对于Excel中日期和时间类型的处理

    PHPExcel是一款优秀的处理Excel文件读写的开源PHP Library,能够给我们提供强大的Excel读写能力,本文针对Excel处理过程中关于日期和时间类型的处理进行深入的讨论.PHPExc ...

  4. CSS下拉列表错误纠正

    上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...

  5. React之JSX

    0.对于学习React,我们先来熟悉下JSX的语法, 下面的这些语法仅用于构建一个组件的标签模块,定义完成之后如果需要做演示,请附加以下代码: ReactDOM.render( element1, d ...

  6. an interview question(4)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 写这篇博客前请让博主先吐糟下自己的PC. i3+2G内存+开了一上午=C盘剩下0字节+打开VS2012花了半个小时+一晚上的心情不好 吐槽完PC, ...

  7. PHP基础知识之————PHP Web脚本中使用FFmpeg

    简介 本文将尝试指出在PHP Web脚本中使用FFmpeg时需要了解的所有重要事项.它还将显示一些使用示例,以使事情更清楚.这个想法也可以应用到其他web脚本语言. 从PHP脚本调用命令行工具 选择一 ...

  8. hibernate一级缓存的源码初窥

    hibernate的一级缓存的存在使得hibernate可以在操作实体化对象的时候减少对于数据库的访问.hibernate的一级缓存实际上就是指的session缓存,它的生命周期和session相同. ...

  9. springmvc 添加Junit4

    junit 单元测试的好处我就不赘述了,本文旨在介绍自己使用的一个方式: 1.添加依赖 <dependency> <groupId>junit</groupId> ...

  10. Android进程绝杀技--forceStop

    一.概述 1.1 引言 话说Android开源系统拥有着App不计其数,百家争鸣,都想在这"大争之世"寻得系统存活的一席之地.然则系统资源有限,如若都割据为王,再强劲的CPU也会忙 ...