js实现图片点击全屏放大查看效果代码-html代码-BFW代码库

代码语言：html
代码描述：js实现图片点击全屏放大查看效果代码，鼠标左右上下移动可查看图标局部细节
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          -webkit-font-smoothing: antialiased;
          -moz-box-sizing: border-box;
          box-sizing: border-box; }
        
        html, body {
          font-family: "Ubuntu Mono", monospace;
          margin: 0px;
          height: 100%;
          width: 100%; }
        
        body {
          padding: 20px;
          padding-top: 40px;
          min-width: 600px; }
        
        header h1, footer h1 {
          font-weight: normal;
          width: 464px;
          background: #222222;
          color: #fff;
          font-size: 14px;
          height: 55px;
          line-height: 55px;
          margin: auto;
          margin-top: 0px;
          margin-bottom: 20px;
          text-align: center;}
        
        .demos {
          text-align: center;
          margin-top: 20px;
          width: 490px;
          margin: auto;}
        
        .demo-image {
          cursor: url("//repo.bfw.wiki/bfwrepo/image/6104d2364d4b0.png") 25 25, auto;
          display: inline-block;
          width: 220px;
          height: 220px;
          background-size: cover;
          background-position: 50% 50%;
          margin-left: 8px;
          margin-right: 8px;
          margin-bottom: 16px; }
          .demo-image.first {
            background-image: url("//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png"); }
          .demo-image.second {
            background-position: 50% 10%;
            background-image: url("//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png"); }
        
        footer h1 {
          padding-left: 20px;
          background: #e9e9e9;
          color: #222222;
          font-size: 14px; }
          footer h1 a {
            color: #222222; }
    </style>


    <link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700' rel='stylesheet' type='text/css'>


</head>

<body>

    <header>
        <div class="main">
            <h1> A js library for viewing images in a fully full screen. </h1>
            <h1> Click the images to see it in action!</h1>
        </div>
    </header>
    <section class="demos">
        <!-- Using divs for the demo, for formatting... you can use images if you want!  -->
        <div class="demo-image first" data-image="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" data-title="Beautiful fields" data-caption="With lots of wheaty puffs. Love those puffs."></div>
        <div class="demo-image second" data-image="//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png" data-title="Fantastic cliffs" data-caption="Longing for exploration. Explore me!"></div>
    </section>



    <script>
        window.onload = function() {
        var elements = document.querySelectorAll( '.demo-image' );
        Intense( elements );
        }
    </script>


    <script>
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();
        
        window.cancelRequestAnimFrame = ( function() {
            return window.cancelAnimationFrame          ||
                window.webkitCancelRequestAnimationFrame    ||
                window.mozCancelRequestAnimationFrame       ||
                window.oCancelRequestAnimationFrame     ||
                window.msCancelRequestAnimationFrame        ||
                clearTimeout
        } )();
        
        
        var Intense = (function() {
        
            'use strict';
        
            var KEYCODE_ESC = 27;
        
            // Track both the current and destination mouse coordinates
            // Destination coordinates are non-eased actual mouse coordinates
            var mouse = { xCurr:0, yCurr:0, xDest: 0, yDest: 0 };
        
            var horizontalOrientation = true;
        
            // Holds the animation frame id.
            var looper;
          
            // Current position of scrolly element
            var lastPosition, currentPosition = 0;
            
            var sourceDimensions, target;
            var targetDimensions = { w: 0, h: 0 };
          
            var container;
            var containerDimensions = { w: 0, h:0 };
            var overflowArea = { x: 0, y: 0 };
        
            // Overflow variable before screen is locked.
            var overflowValue;
        
            /* -------------------------
            /*          UTILS
            /* -------------------------*/
        
            // Soft object augmentation
            function extend( target, source ) {
        
                for ( var key in source )
        
                    if ( !( key in target ) )
        
                        target[ key ] = source[ key ];
        
                return target;
            }
        
            // Applys a dict of css properties to an element
            function applyProperties( target, properties ) {
        
              for( var key in properties ) {
                target.style[ key ] = properties[ key ];
              }
            }
        
            // Returns whether target a vertical or horizontal fit in the page.
            // As well as the right fitting width/height of the image.
            function getFit( 
        
              source ) {
        
              var heightRatio = window.innerHeight / source.h;
        
              if( (source.w * heightRatio) > window.innerWidth ) {
                return { w: source.w * heightRatio, h: source.h * heightRatio, fit: true };
              } else {
                var widthRatio = window.innerWidth / source.w;
                return { w: source.w * widthRatio, h: source.h * widthRatio, fit: false };
              }
            }
        
            /* -------------------------
            /*          APP
            /* -------------------------*/
        
            function startTracking( passedElements ) {
        
              var i;
        
              // If passed an array of elements, assign tracking to all.
              if ( passedElements.length ) {
        
                // Loop and assign
                for( i = 0; i < passedElements.length; i++ ) {
                  track( passedElements[ i ] );
                }
        
              } else {
                  track( passedElements );
              }
            }
        
            function track( element ) {
        
              // Element needs a src at minumun.
              if( element.getAttribute( 'data-image') || element.src ) {
                element.addEventListener( 'click', function() {
                  init( this );
                }, false );
              }
            }
          
            function start() { 
              loop();
            }
           
            function stop() {
              cancelRequestAnimFrame( looper );
            }
        
            function loop() {
                looper = requestAnimFrame(loop);
                positionTarget();      
            }
        
            // Lock scroll on the document body.
            function lockBody() {
        
              overflowValue = document.body.style.overflow;
              document.body.style.overflow = 'hidden';
            }
        
            // Unlock scroll on the document body.
            function unlockBody() {
              document.body.style.overflow = overflowValue;
            }
        
            function createViewer( title, caption ) {
        
              /*
               *  Container
               */
              var containerProperties = {
                'backgroundColor': 'rgba(0,0,0,0.8)',
                'width': '100%',
                'height': '100%',
                'position': 'fixed',
                'top': '0px',
                'left': '0px',
                'overflow': 'hidden',
                'zIndex': '999999',
                'margin': '0px',
                'webkitTransition': 'opacity 150ms cubic-bezier( 0, 0, .26, 1 )',
                'MozTransition': 'opacity 150ms cubic-bezier( 0, 0, .26, 1 )',
                'transition': 'opacity 150ms cubic-bezier( 0, 0, .26, 1 )',
                'opacity': '0'
              }
              container = document.createElement( 'figure' );
              container.appendChild( target );
              applyProperties( container, containerProperties );
        
              var imageProperties = {
                'cursor': 'url( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3Q0IyNDI3M0FFMkYxMUUzOEQzQUQ5NTMxMDAwQjJGRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3Q0IyNDI3NEFFMkYxMUUzOEQzQUQ5NTMxMDAwQjJGRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjI0MjcxQUUyRjExRTM4RDNBRDk1MzEwMDBCMkZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdDQjI0MjcyQUUyRjExRTM4RDNBRDk1MzEwMDBCMkZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+soZ1WgAABp5JREFUeNrcWn9MlVUY/u4dogIapV0gQ0SUO4WAXdT8B5ULc6uFgK3MLFxzFrQFZMtaed0oKTPj1x8EbbZZK5fNCdLWcvxQ+EOHyAQlBgiIVFxAJuUF7YrQ81zOtU+8F+Pe78K1d3s5537f+fE8nPec7z3vOSpJIRkbGwtEEgtdBdVCl0AXQr2hKqgJeg16BdoCrYNWqVSqbif7VQT8YqgB2jTmuDSJNoIcJUJVOVg5EsmH0Oehaj4bGRkZ6uvra2xvb29oamrqbGx.........完整代码请登录后点击上方下载按钮下载查看