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

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

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