jquery多点触控手势插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery多点触控手势插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>jquery多点触控手势插件</title>
    <link href='css/css.css' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
    <script src="js/html5.js"></script>
    <![endif]-->
    <style>
    html, body {
        margin: 0;
        padding: 0;
        font: 16px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
    }
    html {
        background: #202020 url(img/bg.png);
    }
    body {        
        background: url(img/mchammer.png) no-repeat 95% 100%;
        color: #fff;
    }
    img { 
        border: none; 
    }    
    article {
        max-width: 660px;
        margin: 0 auto;
    }
    h1, h2 {
        margin: 0;
        font: 300 36px 'Oswald', sans-serif;
    }
    h2 {
        margin: 0 0 15px 20px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
    }
    hgroup h2 {
        text-align: center;
        margin: 0;
    }
    h1 {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: url(img/logo.png) no-repeat 50% 0;
        height: 75px;
        margin-top: 48px;
    }
    div {
        background: #000;
        background: rgba(0, 0, 0, .6);
        padding: 10px;
        margin-bottom: 50px;
    }
    ul {
        margin: 0;
        padding: 0 15px;
        list-style-type: square;
        list-style-position: inside;
    }
    .icons {
        background: none;
        padding: 0;
    }
   .icons ul {
        list-style: none;
        font: 300 18px 'Oswald', sans-serif;
        overflow: hidden;
        text-align: center;
       padding: 0;
    }
    .icons img {
        display: block;
    }
    .icons li {
        float: left;
        margin-right: 17px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
    }
    li {
        color: #fc0;
        padding: 5px 0;
    }
    li span {
        color: #fff;
    }
    section {
        text-align: center;
        overflow: hidden;
        margin: 50px 0;
    }
    section a {
        font-weight: 14px;
        display: inline-block;
        width: 222px;
        margin: 0 15px;
        text-align: center;
        text-decoration: none;
        background: #000;
        color: #fff;
        padding: 12px 0;
    }
    section a:first-child {
        background: #fc0;
        color: #000;
    }
    section.eightmedia a { 
        color: #fff; 
        font-size: 13px;
        line-height: 16px;
        background: none; 
        padding: 0; 
    }
    section.eightmedia a img {
        margin-top: 5px;
    }
    section span {
        display: block;
        text-transform: uppercase;
        font: 400 20px 'Oswald', sans-serif;
    }
    
    #touchme{
        width: 100%;
        height: 300px;
        position: relative;
        background-color: black;
        margin-bottom: 100px;
    }
        #touchme p{
            text-align: center;
            font: 400 36px/36px 'Oswald', sans-serif;
            color: #ffce00;
            margin-top: 130px;
        }
        #callout{
            position: absolute;
            background-color: #ffce00;
            color: black;
            font: 400 24px/36px 'Oswald', sans-serif;
            position: absolute;
            bottom: -50px;
            left: 0;
            padding: 4px 10px;
        }
        #callout:after{
            content: '';
            display: block;
            width: 39px;
            height: 20px;
            position: absolute;
            top: -20px;
            left: 120px;
            background: url('img/balloon.png') no-repeat top left;
        }
    </style>
</head>
<body>
<article>
    <hgroup>
        <h2>A javascript library for multi-touch gestures</h2>
    </hgroup>
    
    <section>

    </section>
    
    <div id="touchme">
        <p>You can touch me...</p>
        <span id="callout">Bust a few moves...</span>
    </div>
    
    <h2>Why use Hammer.js?</h2>
    <div>
        <ul>
            <li><span>easy implementation of touch events in your website</span>
            <li><span>lightweight with only 2kb (minified and gzip), easy to dig into</span>
            <li><span>focused javascript library, only for multi-touch gestures</span>
            <li><span>completely standalone, and a jQuery plugin is available</span>
        </ul>
    </div>
    
    <h2>Gesture supported by Hammer.js</h2>
    <div class="icons">
        <ul>
            <li><img src="img/tap.png" width="90" height="90" alt="">Tap
            <li><img src="img/doubletap.png" width="90" height="90" alt="">Double Tap
            <li><img src="img/drag.png" width="90" height="90" alt="">Swipe
            <li><img src="img/hold.png" width="90" height="90" alt="">Hold
            <li><img src="img/transform.png" width="90" height="90" alt="">Transform
            <li><img src="img/drag.png" width="90" height="90" alt="">Drag
        </ul>
    </div>
    
    
    <script src="js/hammer.js"></script>
    <script>
    
        var container = document.getElementById('touchme'),
        callout = document.getElementById('callout'),
        shouts = {}
        shouts['hold'] = 'You are holding me.';
        shouts['tap'] = 'You just tapped me.';
        shouts['doubletap'] = 'You just tapped me. Twice.';
        shouts['transformstart'] = 'You started transforming me.';
        shouts['transform'] = 'You are transforming me.';
        shouts['transformend'] = 'You just transformed me.';
        shouts['dragstart'] = 'You started dragging me.';
        shouts['drag'] = 'You are dragging me.';
        shouts['dragend'] = 'You just dragged me.';
        shouts['swipe'] = 'You just swiped me.';

        container.onselectstart = function() { return false; }; // IE fix for doubletap
        
        var hammer = new Hammer(container, {
            tap_max_interval: 700 // seems to bee needed for IE8
        });

        function shout(e){
            callout.innerHTML = 'Ooh! '+ shouts[e.type];
        }

        var type;
        for(type in shouts) {
            hammer['on'+ type] = shout;
        }
    </script>
</article>
</body>
</html>

JS代码(html5.js):

/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv */
(function(a,b){
	function h(a,b){
	var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
	return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function i(){
	var a=l.elements;
	return typeof a=="string"?a.split(" "):a}
function j(a){
	var b={
}
,c=a.createElement,f=a.createDocumentFragment,g=f();
	a.createElement=function(a){
	if(!l.shivMethods)return c(a);
	var f;
	return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f}
,a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+i().join().replace(/\w+/g,function(a){
	return c(a),g.createElement(a),'c("'+a+'")'}
)+");
	return n}
")(l,g)}
function k(a){
	var b;
	return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
	display:block}
audio{
	display:none}
canvas,video{
	display:inline-block;
	*display:inline;
	*zoom:1}
[hidden]{
	display:none}
audio[controls]{
	display:inline-block;
	*display:inline;
	*zoom:1}
mark{
	background:#FF0;
	color:#000}
")),g||(b=!j(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;
	(function(){
	var c=b.createElement("a");
	c.innerHTML="<xyz></xyz>",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{
}
",function(b){
	b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}
),g=c.childNodes.length==1||function(){
	try{
	b.createElement("a")}
catch(a){
	return!0}
var c=b.createDocumentFragment();
	return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
	var l={
	elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k}
;
	a.html5=l,k(b)}
)(this,document)

CSS代码(css.css):

@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-WzdRTzRa5k6HlJK6-dK9Q.eot);src:local('Oswald Regular'),local('Oswald-Regular'),url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-WzdRTzRa5k6HlJK6-dK9Q.eot) format('embedded-opentype'),url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}

附件:下载该文件资源,减少时间成本(增值服务)