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.........完整代码请登录后点击上方下载按钮下载查看