有没有大佬会用代码制作网页类的壁纸

a1227355368 · 发表于 2024-3-22 15:36:04

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？免费注册

x

wallpaper里面看到有人制作能靠鼠标点击翻页的漫画直接把桌面变成阅读器了
感觉挺有意思的但是复制他的代码换图片后高宽比有问题有大佬能解决一下吗
个人就是想做个像ppt一样点击左键就翻页的网页应该不是很复杂吧
他们代码如下<html>
<head>
      <title>Office</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body></body>
<style>
      *{ margin: 0; padding: 0; box-sizing: border-box; }
      body, html{ width: 100%; height: 75%; margin: 0; padding: 0; color:rgb(255, 255, 255); }
      body{ background: #000; overflow: hidden; font-size:1.5rem; font-family:'verdana'; text-shadow: 1px 1px 2px #828282; }
      img{ position:absolute; top:0px; left:0px; opacity:0; transition: top 0.1s ease, left 0.1s ease, opacity 1s ease; }
</style>
<script>
      var zoom=1;
      var xray=0.4;
      var lyrW=1866;
      var lyrH=1468;
      var lTop=["_01.jpg","_02.jpg","_05.jpg","_06.jpg","_07.jpg","_08.jpg","_09.jpg","_10.jpg","_11.jpg","_12.jpg","_13.jpg","_14.jpg","_15.jpg","_16.jpg","_17.jpg"];
      var lMed=["a2.jpg","a4.jpg"];
      //var lLow=["a2.jpg","a4.jpg"];

      var winW = window.innerWidth;
      var winH = window.innerHeight;
      var xrxS = winW>winH ? winW*xray : winH*xray;

      function xRay_del(elm) {
         elm.style['-webkit-mask-image']='';
         elm.style['-webkit-mask-repeat']='';
         elm.style['-webkit-mask-size']='';
      }
      function xRay_add(elm) {
         elm.style['-webkit-mask-image']='radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)';
         elm.style['-webkit-mask-repeat']='no-repeat';
         elm.style['-webkit-mask-size']=xrxS+'px '+xrxS+'px';
      }
      function cycle(rotate=true) {
         if(rotate) rotary.push(rotary.shift());
         if(xRay_status){
            document.body.insertBefore(rotary[1],document.body.firstChild);
            document.body.insertBefore(rotary[0],document.body.firstChild);

            rotary[0].style.opacity=1;
            rotary[1].style.opacity=1;
            for(var l=2;l<rotary.length;l++)
                  rotary[l].style.opacity=0;

            xRay_del(rotary[0]);
            xRay_add(rotary[1]);
         } else {
            document.body.insertBefore(rotary[0],document.body.firstChild);
            document.body.insertBefore(rotary[1],document.body.firstChild);

            rotary[0].style.opacity=1;
            for(var l=1;l<rotary.length;l++)
                  rotary[l].style.opacity=0;

            xRay_del(rotary[0]);
            xRay_del(rotary[1]);
         }
      }

      rotary=[];
      for(var i=0;i<lTop.length;i++) {
         var layer=document.createElement('img');
            layer.id='L'+i;
            layer.style.width=lyrW+'px';
            layer.style.height=lyrH+'px';
            layer.src=lTop[i];
            layer.onclick=cycle;
            rotary[i]=layer;
            if(i==0) layer.style.opacity=1;
         document.body.appendChild(layer);
      }
      cycle(false);

      while( (lyrW/winW)>zoom || (lyrH/winH)>zoom ) { lyrW=lyrW*0.99; lyrH=lyrH*0.99; }
      while( (lyrW/winW)<zoom || (lyrH/winH)<zoom ) { lyrW=lyrW*1.01; lyrH=lyrH*1.01; }
      for(var l=0;l<rotary.length;l++) { rotary[l].style.width=lyrW+'px'; rotary[l].style.height=lyrH+'px'; }

      var gapW = lyrW-winW;
      var gapH = lyrH-winH;
      var anchorW = (gapW/2)*-1;
      var anchorH = (gapH/2)*-1;
      var centerW = winW/2;
      var centerH = winH/2;
      document.body.onmousemove=(e)=>{
         var mouseX = e.clientX;
         var mouseY = e.clientY;
         var percX = ((mouseX-centerW)/winW);
         var percY = ((mouseY-centerH)/winH);
         var newW = anchorW-(gapW*percX);
         var newH = anchorH-(gapH*percY);
         for(var l=0;l<rotary.length;l++) { rotary[l].style.left=newW+'px'; rotary[l].style.top=newH+'px'; }

         var xrX=(mouseX+(newW*-1))-(xrxS/2);
         var xrY=(mouseY+(newH*-1))-(xrxS/2);
         rotary[1].style['-webkit-mask-position-x']=xrX+'px';
         rotary[1].style['-webkit-mask-position-y']=xrY+'px';
      }

      // Panel
      var panel = document.createElement('div');
         panel.style='position:absolute; top:0rem; right:0.4rem; display:flex; flex-direction:column; font-size:2rem; line-height:2rem; ';
         document.body.appendChild(panel);

      var rpt_evt = null;
      var rpt_deg = 0;
      var rpt = document.createElement('div');
         rpt.dataset.active='f';
         rpt.innerHTML='';
         rpt.onclick=(e)=>{
            if(rpt.dataset.active=='f'){
                  rpt.dataset.active='t';
                  rpt_evt = setInterval(()=>{
                     if(rpt_deg==360){ cycle(); rpt_deg=0; }
                     rpt_deg++; rpt.style.transform='rotate('+rpt_deg+'deg)';
                  },166);
            } else {
                  rpt.dataset.active='f';
                  rpt_deg=0; rpt.style.transform='rotate('+rpt_deg+'deg)';
                  clearInterval(rpt_evt);
            }
         };
         panel.appendChild(rpt);

      var xRay_status=false;
      var xRay_btn = document.createElement('div');
         xRay_btn.innerHTML='';
         xRay_btn.onclick=(e)=>{
            if(xRay_status==false) { // ON
                  xRay_status=true; cycle(false); xRay_btn.style.color='rgb(255, 255, 0)';
            } else { // OFF
                  xRay_status=false; cycle(false); xRay_btn.style.color='rgb(255, 255, 255)';
            }
         };
         panel.appendChild(xRay_btn);

      var qlt_btn = document.createElement('div');
         qlt_btn.innerHTML='';
         qlt_btn.dataset.qlt='top'; qlt_btn.style.color='rgb(220,20,60)';
         qlt_btn.onclick=(e)=>{ qlt_switch(qlt_next(qlt_btn.dataset.qlt)); }
         panel.appendChild(qlt_btn);
         function qlt_next(qlt){
            switch(qlt){
                  case 'top': if(typeof lMed !=='undefined') return 'med'; else return 'top'; break;
                  case 'med': if(typeof lLow !=='undefined') return 'low'; else return 'top'; break;
                  case 'low': return 'top'; break;
            }
         }
         function qlt_switch(qlt){
            qlt_btn.dataset.qlt=qlt;
            switch(qlt){
                  case 'top': qlt_btn.style.color='rgb(220, 20, 60)'; for(var i=0;i<lTop.length;i++) document.getElementById('L'+i).src=lTop[i]; break;
                  case 'med': qlt_btn.style.color='rgb(204,204,  0)'; for(var i=0;i<lMed.length;i++) document.getElementById('L'+i).src=lMed[i]; break;
                  case 'low': qlt_btn.style.color='rgb( 60,179,113)'; for(var i=0;i<lLow.length;i++) document.getElementById('L'+i).src=lLow[i]; break;
            }
         }

</script>
</html>

2076451698 · 发表于 2024-3-22 23:46:37

你看看你图片的比例是不是更他的一样，他应该调过的

lm64552355 · 发表于 2024-3-23 11:46:23

Gpt呗

a1227355368 · 发表于 2024-3-23 20:30:39

lm64552355 发表于 2024-3-23 11:46
+ |9 a% h! b# S8 l) u' T3 iGpt呗

我靠这玩意儿确实好用多谢了

正经的讨论（思考人生）

[学习讨论] 有没有大佬会用代码制作网页类的壁纸

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

合作

站务管理

获得帮助

关于老王

更多发现

正经的讨论（思考人生）

[学习讨论] 有没有大佬会用代码制作网页类的壁纸

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

重要提示

合作

站务管理

获得帮助

关于老王

更多发现