js错题集18 mouseover盒子3d翻页效果

最新推荐文章于 2024-05-29 21:49:39 发布
最新推荐文章于 2024-05-29 21:49:39 发布
阅读量264 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WMY10001/article/details/101373315
版权

html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>3D hover effect </title>
<link rel="stylesheet" href="css/defaulttheme.css">
<link rel="stylesheet" href="css/mainstyle.css">
</head>

<body>
    <ul id="myTab" class="nav nav-tabs">
      <li id="intop">
        <a data-toggle="tab" href='#tab1'>
          <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
          <div class='info'>
            <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
          </div>
        </a>
      </li>
      <li>
        <a data-toggle="tab" href='#tab2'>
          <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
          <div class='info'>
            <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
          </div>
        </a>
      </li>
      <li>
          <a data-toggle="tab" href='#tab3'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
      <li>
          <a data-toggle="tab" href='#tab4'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
      <li>
          <a data-toggle="tab" href='#tab5'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
      <li>
          <a data-toggle="tab" href='#tab6'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
      <li>
          <a data-toggle="tab" href='#tab7'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
      <li>
          <a data-toggle="tab" href='#tab8'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
      <li>
          <a data-toggle="tab" href='#tab9'>
            <img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
            <div class='info'>
              <h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
            </div>
          </a>
        </li>
    </ul>
</div>

<script src="js/threebox.js"></script>

</body>
</html>

css/defaulttheme.css

button,
hr,
input {
  overflow: visible
}

audio,
canvas,
progress,
video {
  display: inline-block
}

progress,
sub,
sup {
  vertical-align: baseline
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

menu,
article,
aside,
details,
footer,
header,
nav,
section {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

figcaption,
figure,
main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

audio:not([controls]) {
  display: none;
  height: 0
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {}

button,
select {
  text-transform: none
}

[type=submit],
[type=reset],
button,
html [type=button] {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: ButtonText dotted 1px
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

summary {
  display: list-item
}

[hidden],
template {
  display: none
}

css/mainstyle.css

li {
  -webkit-perspective: 400px;
          perspective: 400px;
}

.info {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgb(47, 255, 227);
}

.in-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info {
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
/* you can ignore this ones */
ul {
  padding: 0;
  margin: 0 0 50px;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

li {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 5px;
  padding: 0;
  list-style: none;
}
li a {
  width:100%;
  height:100%;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
li a img {
  width:100%;
}
li h3 {
  margin: 0;
  line-height:30px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
li p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
li .normal {
  width: 100%;
  height: 100%;
  background-color: #ECF0F1;
  color: rgba(52, 73, 94, 0.6);
  box-shadow: inset 0 2px 20px #e6ebed;
  text-align: center;
  font-size: 50px;
  line-height: 200px;
}
li .normal svg {
  pointer-events: none;
  width: 50px;
}
li .normal svg path {
  fill: rgba(52, 73, 94, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
}

h1 {
  margin: 0 auto 5px;
  text-align: center;
}

h3 {
  font-family: 'Bree Serif', serif;
}

.container {
  width: 840px;
  margin: 0 auto;
}

header {
  font-family: 'Bree Serif', serif;
  text-align: center;
  margin: 50px 0 25px;
  color: #34495E;
}
header p {
  margin: 0;
  color: rgba(52, 73, 94, 0.4);
}

js/threebox.js

var nodes  = document.querySelectorAll('li'),
    _nodes = [].slice.call(nodes, 0);

var getDirection = function (ev, obj) {
    var w = obj.offsetWidth,
        h = obj.offsetHeight,
        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
        y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
  
    return d;
};

var addClass = function ( ev, obj, state ) {
    var direction = getDirection( ev, obj ),
        class_suffix = "";
    
    obj.className = "";
    
    switch ( direction ) {
        case 0 : class_suffix = '-top';    break;
        case 1 : class_suffix = '-right';  break;
        case 2 : class_suffix = '-bottom'; break;
        case 3 : class_suffix = '-left';   break;
    }
    
    obj.classList.add( state + class_suffix );
};

// bind events
_nodes.forEach(function (el) {
    el.addEventListener('mouseover', function (ev) {
        addClass( ev, this, 'in' );
    }, false);

    el.addEventListener('mouseout', function (ev) {
        addClass( ev, this, 'out' );
    }, false);
});

不记得在哪下的了

WMY10001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html翻页特效实现原理,CSS3实现超炫3D翻书效果（二）
weixin_32943857的博客
06-01 2060
上回书，我们已经简单实现如何翻一页。好，现在我们复习一下。翻书效果的基本原理，请看下html布局：简单再次说明下：box为大盒子，主要提供显示区域的左部分；page为要翻转的页面，其包含正面(front)和背面(back)；page2主要提供翻页后显示区域的右部分。-page定位在页面的右部分，front显示的图片与box的图片组合成一个完整的图。back显示的图片与page2显示的图片组合成一个...
echarts3D环形图（包含点击效果）
m0_46554818的博客
12-21 5065
这里写自定义目录标题效果图:点击上去的效果: 效果图: 点击上去的效果: 代码可以借鉴：CSDN – echarts3d饼图，环形图 我这边就展示一下我修改的内容。 // 监听 mouseover，近似实现高亮（放大）效果 myChart.on('mouseover', (params) => { .... this[optionName].series[params.seriesIndex].pieData.value + 30 //这个方法只改了这个数字 } 主要是修改cha
CSS+JS实现3D盒子
暖风的博客_CSDN博客
03-24 386
1.首先必须对3d坐标足够熟悉，如下图 初始页面在xy所在页面，默认3d转换中心在图的中点。 2.我们需要构成6个页面，形成一个正方形，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</titl..
JS移动端设置mouseover，mouseleave有效么
最新发布
ggq53219的博客
05-29 693
在移动设备的浏览器环境中，mouseover 和 mouseleave 事件的行为与桌面浏览器有所不同，主要是因为移动设备的交互方式主要是基于触摸的，而不是基于鼠标的。
js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
热门推荐
JackieDYH的博客
05-25 1万+
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况 当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...
JavaScript通过mouseover()实现图片变大效果的示例
10-18
在这篇关于如何使用JavaScript通过mouseover()事件实现图片放大的示例文章中，我们首先要了解的几个关键知识点包括JavaScript的基础语法，jQuery库的使用，以及CSS样式的调整。 JavaScript是一种广泛应用于网页设计...
鼠标悬停卡片3D翻页特效
06-24
它通过动态的3D视觉效果，当用户将鼠标指针悬停在卡片上时，卡片会以立体翻页的方式展示更多的内容，通常包括文字描述、图片或其他相关信息。这种特效能够吸引用户的注意力，提升用户体验，使网站更加生动和具有吸引...
jquery图片四角翻页展示效果
06-10
图片四角翻页效果的核心在于通过CSS3和JavaScript实现3D变换。CSS3提供了transform属性，可以进行旋转、缩放、平移等多种空间变换。在四角翻页中，我们主要利用rotateY()函数来实现页面的翻转效果，通过设置不同的...
javascript中mouseenter与mouseover的异同
10-19
javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter：鼠标移入监听对象时触发...
JS中mouseover和mouseout多次触发问题如何解决
10-22
针对标题“JS中mouseover和mouseout多次触发问题如何解决”，主要内容探讨的是在JavaScript中使用jQuery库时，处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时，这些...
记录11 点击改变高度(动画)和位置,再点击变回
WMY10001的博客
08-06 321
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击改变高度(动画)和位置,再点击变回</title> <style> #gao { background-color: aqua...
js记录12 点击input placeholder消失，再点击出现
WMY10001的博客
08-07 300
正确做法： <textarea placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'""></textarea> 之前就把简单的事情复杂化了。。。 <div class="reportPage"> <textarea id="texta...
j24 悬浮图标,点击展开，垂直swiper，外部控制按钮
WMY10001的博客
12-16 278
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="lib/fonts/font-awesome/css/font-awesome.min.css"> <l...
js错题集17 layui新增跳转分页+id自增
WMY10001的博客
09-21 277
1.layui新增跳转分页 $(".addNews_btn").click(function () { var pagecount; var pagenum = $('.layui-laypage-limits select option:selected').val(); if(dataContent.length%pagenum == 0) { pagecount = M...
js21选择器+
WMY10001的博客
12-10 266
选择器 $('.red').is('li'); //true，选择器，检测 class 为是否为 red $('.red').is(function () { //true，方法，同上 return $(this).attr('title') == '列表 3'; //可以自定义各种判断 })); $('li').eq(2).hasClass('red'); //和 is 一样，只不过只能传递...
js23-css使用flex的一天
WMY10001的博客
12-11 218
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"> ...
js20删除自身以外的父标签
WMY10001的博客
12-03 214
var _dom = $(this).html(); $(this).after(_dom).remove();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值