360壁纸尝鲜 – 单html文件可运营版-胖大海博客资源网

温馨提示：本文最后更新于2025-02-28 21:45:55，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长

360 壁纸官方接口，永远不会到期。这个版本是之前还没构思好要写成什么样子，就先把功能做出来，现在想好了，过两天动工，先发一份第一版给大家尝尝鲜。后面版本会带后台和个人中心收收藏等功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精美壁纸集合</title>
  <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  <style>
    .category-btn {
      margin-bottom: 5px;
    }
    .wallpaper-img {
      cursor: pointer;
      max-width: 100%;
      height: auto;
      border-radius: 5px;
      transition: transform 0.2s;
    }
    .wallpaper-img:hover {
      transform: scale(1.1);
    }
    #previewImageContainer {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      background-color: rgba(0, 0, 0, 0.8);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #previewImage {
      max-width: 100%;
      height: auto;
    }
    #closePreview {
      margin-top: 10px;
    }
    #viewOriginal {
      margin-top: 10px;
    }
    #totalCountRow {
      margin-bottom: 20px;
    }
    #pagination {
      margin-top: 20px;
    }
    .btn-primary {
      background-color: #007bff;
      border-color: #007bff;
    }
    .btn-primary:hover {
      background-color: #0056b3;
      border-color: #0056b3;
    }
    .btn-danger {
      background-color: #dc3545;
      border-color: #dc3545;
    }
    .btn-danger:hover {
      background-color: #bb2d3b;
      border-color: #bb2d3b;
    }
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
      background-color: #0056b3;
      border-color: #0056b3;
    }
    .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
      background-color: #bb2d3b;
      border-color: #bb2d3b;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-center mt-4 mb-4">精美壁纸集合</h1>
    <div class="row mb-4">
      <div class="col-md-12 text-center">
        <div class="row">
          <div class="col-6 col-md-12">
            <button type="button" class="btn btn-primary category-btn" data-tid="67">精选</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="1">风景</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="2">宠物</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="92">动漫</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="62">插画</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="109">游戏</button>
          </div>
          <div class="col-6 col-md-12">
            <button type="button" class="btn btn-primary category-btn" data-tid="6">风格</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="4">科幻</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="70">美女</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="9">色系</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="5">汽车</button>
            <button type="button" class="btn btn-primary category-btn" data-tid="86">影视</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row" id="totalCountRow">
      <div class="col-md-12 text-center" id="totalCount">
        <!-- 总共有多少张壁纸 -->
      </div>
    </div>
    <div class="row" id="wallpapers">
      <!-- 壁纸将在这里显示 -->
    </div>
  </div>

  <div id="previewImageContainer">
    <img src="" id="previewImage" class="img-fluid">
    <div class="text-center">
      <button type="button" class="btn btn-danger" id="closePreview">关闭</button>
      <a href="#" id="viewOriginal" class="btn btn-primary" target="_blank">查看原图</a>
    </div>
  </div>

  <div class="container">
    <div class="row" id="pagination">
      <div class="col-md-12 text-center" id="pageButtons">
        <!-- 分页按钮将在这里显示 -->
      </div>
    </div>
  </div>

  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
  <script>
    $(document).ready(function() {
      var totalPage;
      var currentPage = 1;
      var currentTid;

      $('.category-btn').click(function() {
        currentTid = $(this).data('tid');
        loadWallpapers(currentTid, currentPage);
      });

      // 默认加载精选分类
      $('.category-btn[data-tid="67"]').click();

      function loadWallpapers(tid, page) {
        $.ajax({
          url: 'https://mini.browser.360.cn/newtab/imgsx?tid=' + tid + '&page=' + page + '&uid=0',
          type: 'GET',
          success: function(response) {
            var wallpapers = response.data.list;
            totalPage = response.data.total_page;
            $('#wallpapers').empty();
            wallpapers.forEach(function(wallpaper) {
              $('#wallpapers').append('<div class="col-md-4 mb-4"><img src="' + wallpaper.img + '" class="img-fluid wallpaper-img" data-img="' + wallpaper.img + '"></div>');
            });
            $('#totalCount').text('共' + response.data.total_count + '张壁纸');
            updatePageButtons();
          },
          error: function() {
            alert('加载壁纸出错');
          }
        });
      }

      function updatePageButtons() {
        $('#pageButtons').empty();
        $('#pageButtons').append('<button type="button" class="btn btn-primary page-btn" data-type="first">首页</button>');
        $('#pageButtons').append('<button type="button" class="btn btn-primary page-btn" data-type="prev">上一页</button>');
        $('#pageButtons').append('<span> 当前第' + currentPage + '页 </span>');
        $('#pageButtons').append('<button type="button" class="btn btn-primary page-btn" data-type="next">下一页</button>');
        $('#pageButtons').append('<button type="button" class="btn btn-primary page-btn" data-type="last">末页</button>');
      }

      $(document).on('click', '.page-btn', function() {
        var btnType = $(this).data('type');
        
        if (btnType === 'first') {
          if (currentPage === 1) {
            alert('已经是第一页');
            return;
          }
          currentPage = 1;
          loadWallpapers(currentTid, currentPage);
        } else if (btnType === 'prev') {
          if (currentPage === 1) {
            alert('已经是第一页');
            return;
          }
          currentPage--;
          loadWallpapers(currentTid, currentPage);
        } else if (btnType === 'next') {
          if (currentPage === totalPage) {
            alert('已经是最后一页');
            return;
          }
          currentPage++;
          loadWallpapers(currentTid, currentPage);
        } else if (btnType === 'last') {
          if (currentPage === totalPage) {
            alert('已经是最后一页');
            return;
          }
          currentPage = totalPage;
          loadWallpapers(currentTid, currentPage);
        }
      });

      $('#wallpapers').on('click', '.wallpaper-img', function() {
        var imgUrl = $(this).data('img');
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent)){
          window.open(imgUrl, '_blank');
        } else {
          $('#previewImage').attr('src', imgUrl);
          $('#previewImageContainer').fadeIn();
        }
      });

      $('#closePreview').click(function() {
        $('#previewImageContainer').fadeOut();
      });

      $('#viewOriginal').click(function() {
        var originalUrl = $('#previewImage').attr('src');
        window.open(originalUrl, '_blank');
      });

    });
  </script>
</body>
</html>

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

------关注微信公众号：胖大海TuT------

版权声明 1 本网站名称：胖大海博客资源网
2 本站永久网址：https://www.pdha.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ941093035进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END