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