server/aspnetapp/wwwroot/lib/alloyfinger/example/picture/index.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
    <title>AlloyFinger</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style>
        .ribbon {
            top: 3.2em;
            right: -4.7em;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            color:#fff;
            display: block;
            padding: .6em 3.5em;
            position: fixed;
            text-align: center;
            text-decoration: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: green;
            z-index: 10000;
        }
    </style>
</head>
<body>
    <a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
    <script src="../../asset/transform.js"></script>
    <script src="../../alloy_finger.js"></script>
    <script src="../../asset/image_loaded.js"></script>
    <script src="../../asset/to.js"></script>
    <div id="imgBox" style="position:fixed;width: 100%;height: 100%;left:0;top:0;
     background:black;display: none;">
        <img src="../../asset/cover.jpg" id="testImg" alt="" style="width: 100%;position: absolute; " />
    </div>

    <script>
        var topPx;
        imageLoaded("#testImg",function(w,h){
            document.querySelector("#imgBox").style.display="block";
            topPx=window.innerHeight/2-(h*window.innerWidth/w)/2;
            this.style.top=topPx+"px";
        });


        function ease(x) {
            return Math.sqrt(1 - Math.pow(x - 1, 2));
        }

        var el = document.getElementById("testImg");
        Transform(el);
        var initScale = 1;
        new AlloyFinger(el, {
            multipointStart: function () {
                To.stopAll();
                initScale = el.scaleX;