纯JavaScript实现聪明的灯泡（把一个灯泡分为很多份，通过鼠标的滑动经过，使每一个小部分都跳动起来）

最新推荐文章于 2020-09-20 12:15:39 发布
最新推荐文章于 2020-09-20 12:15:39 发布
阅读量238 收藏 1
点赞数 1
分类专栏： css html js 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43260038/article/details/108690611
版权
html 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
css
17 篇文章 0 订阅
订阅专栏
js
17 篇文章 0 订阅
订阅专栏

纯JavaScript实现聪明的灯泡（把一个灯泡分为很多份，通过鼠标的滑动经过，使每一个小部分都跳动起来）

动态中的静态截图
在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  html {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.social-icon a {
  position: fixed;
  background: white;
  color: white;
  display: inline-block;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: .15s ease;
  z-index: 30;
}

.social-icon i {
  position: absolute;
  font-size: 1.8em;
  pointer-events: none;
  z-index: 1000;
}

.social-icon:hover a {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.05);
}

.youtube a {
  top: 100%;
  left: 0%;
  box-shadow: 0px 0px 15px 5px rgba(230, 33, 23, 0.5);
}

.youtube i {
  left: 8px;
  bottom: 8px;
  color: #E62117;
}

.github a {
  top: 100%;
  left: 100%;
  box-shadow: 0px 0px 15px 3px rgba(126, 126, 126, 0.5);
}

.github i {
  right: 8px;
  bottom: 8px;
}


#canvas-container-1{
  height: 100%;
  width: 100%;
  background: black;
}

#canvas-1{
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#site-link{
  color: #0099ff;
  display: inline-block;
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-variant: small-caps;
}
  </style>
 </HEAD>

 <BODY>
 <div id="canvas-container-1" class="canvas-container">
  <canvas id="canvas-1"></canvas>
</div>


<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
  <script>
  function ThreeJSCanvas(CANVAS_ID) {
  
    var SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
    var SCREEN_WIDTH = SCREEN_HEIGHT;
    var SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
    var canvas, container;

    var container, loader, stats;
    var renderer, camera, scene;
    var raycaster, controls;

    var ANIMATION_FRAME_LENGTH = 30,
        INTERACT_DISTANCE = 2.5;
    var objetArray = [],
        animationQueue = [];

    var color1 = [0 / 255, 110 / 255, 255 / 255],
        color2 = [0 / 255, 255 / 255, 140 / 255];

    var bitmap = [];
    var BITMAP_SKIP = 1;

    var fov = 90;
    var cameraPos = [0, 0, 30];
    var cameraLookAt = [0, 0, 0];
    var viewHeight = 2 * Math.tan(THREE.Math.degToRad(fov / 2)) * cameraPos[2],
        viewWidth = viewHeight * SCREEN_ASPECT_RATIO;
    var mouse = new THREE.Vector3(10000, 10000, -1),
        mouseScaled = new THREE.Vector3(10000, 10000, -1);

    var frame = 0;

    function init() {

        // Global Variables
        container = document.getElementById("canvas-container-" + CANVAS_ID);
        canvas = document.getElementById("canvas-" + CANVAS_ID);
        canvas.addEventListener('mousemove', onDocumentMouseMove, false);

        loader = new THREE.JSONLoader();
        stats = new Stats();
        stats.domElement.classList.add("canvas-stats");
        stats.domElement.id = "canvas-stats-" + CANVAS_ID;


        var data =  '#000000000000000000011110000000000000000000'+
                    '#000000000000000011111111110000000000000000'+
                    '#000000000000001111111111111100000000000000'+
                    '#000000000000011111111111111110000000000000'+
                    '#000000000000111111111111111111000000000000'+
                    '#000000000001111111111111111111100000000000'+
                    '#000000000011111111111111111111110000000000'+
                    '#000000000011111111111111111111110000000000'+
                    '#000000000111111111111111111111111000000000'+
                    '#000000000111111111111111111111111000000000'+
                    '#000000001111111111111111111111111100000000'+
                    '#000000001111111111111111111111111100000000'+
                    '#000000001111111111111111111111111100000000'+
                    '#000000001111111111111111111111111100000000'+
                    '#000000001111111111111111111111111100000000'+
                    '#000000000111111111111111111111111000000000'+
                    '#000000000111111111111111111111111000000000'+
                    '#000000000111111111111111111111111000000000'+
                    '#000000000011111111111111111111110000000000'+
                    '#000000000011111111111111111111110000000000'+
                    '#000000000001111111111111111111100000000000'+
                    '#000000000001111111111111111111100000000000'+
                    '#000000000000111111111111111111000000000000'+
                    '#000000000000111111111111111110000000000000'+
                    '#000000000000011111111111111110000000000000'+
                    '#000000000000001111111111111100000000000000'+
                    '#000000000000001111111111111100000000000000'+
                    '#000000000000001111111111111000000000000000'+
                    '#000000000000000111111111111000000000000000'+
                    '#000000000000000111111111111000000000000000'+
                    '#000000000000000111111111111000000000000000'+
                    '#000000000000000111111111111000000000000000'+
                    '#000000000000000011111111110000000000000000'+
                    '#000000000000000010000000010000000000000000'+
                    '#000000000000000011111111110000000000000000'+
                    '#000000000000000010000000010000000000000000'+
                    '#000000000000000011111111110000000000000000'+
                    '#000000000000000010000000010000000000000000'+
                    '#000000000000000011111111110000000000000000'+
                    '#000000000000000000100001000000000000000000'+
                    '#000000000000000000110011000000000000000000'+
                    '#000000000000000000011110000000000000000000';
      
                for (var i = 0; i < data.length; i++) {
                    if (data[i] == '#') {
                        bitmap.push([]);
                    }
                    else {
                        bitmap[bitmap.length - 1].push(data[i] - '0');
                    }
                }

        container.appendChild(stats.domElement);

        // Renderer
        renderer = new THREE.WebGLRenderer({
            alpha: true,
            antialias: true,
            canvas: canvas,
        });
        renderer.setClearColor(0x212121, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

        // Camera and Controls
        camera = new THREE.PerspectiveCamera(fov, SCREEN_ASPECT_RATIO, 0.1, 1000);
        // camera = new THREE.OrthographicCamera(-viewWidth, viewWidth, viewHeight, -viewHeight, 1, 300);
        camera.position.set(cameraPos[0], cameraPos[1], cameraPos[2]);
        camera.lookAt(new THREE.Vector3(cameraLookAt[0], cameraLookAt[1], cameraLookAt[2]));
        raycaster = new THREE.Raycaster();

        // controls = new THREE.OrbitControls(camera);
        // controls.rotateSpeed = 2.0;
        // controls.zoomSpeed = 2.0;
        // controls.enableZoom = true;
        // controls.enablePan = true;
        // controls.dampingFactor = 0.2;
        // controls.addEventListener('change', render);

        //Scene
        scene = new THREE.Scene();


        //Lights

        // Making Object Array
        var xOffset = -bitmap[0].length / (BITMAP_SKIP * 2);
        var yOffset = bitmap.length / (BITMAP_SKIP * 2);
        for (var i = 0; i < bitmap.length; i += BITMAP_SKIP) {
            for (var j = 0; j < bitmap[i].length; j += BITMAP_SKIP) {
                if (bitmap[i][j] == 1) {
                    planeGeometry = new THREE.PlaneGeometry(1, 1);
                    var circleGeometry = new THREE.CircleGeometry(1, 5);
                    var frac = i / bitmap.length;
                    // Materials
                    planeMaterial = new THREE.MeshBasicMaterial({
                        color: new THREE.Color(
                            color1[0] * frac + color2[0] * (1 - frac),
                            color1[1] * frac + color2[1] * (1 - frac),
                            color1[2] * frac + color2[2] * (1 - frac)
                        ),
                        transparent: true,
                        opacity: THREE.Math.randFloat(0.4, 0.6),
                        side: THREE.DoubleSide
                    });

                    var circleMaterial = new THREE.MeshBasicMaterial({
                        color: new THREE.Color(1, 1, 1),
                        transparent: true,
                        opacity: THREE.Math.randFloat(0.8, 1),
                        side: THREE.DoubleSide
                    });

                    // Mesh
                    planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
                    planeMesh.position.set(xOffset + j / BITMAP_SKIP, yOffset - i / BITMAP_SKIP, 0);
                    var randWidth = THREE.Math.randFloat(0.6, 1.2);
                    var randHeight = randWidth
                    planeMesh.scale.set(randWidth, randHeight, 1);
                    scene.add(planeMesh);
                    objetArray.push([planeMesh, false]);


                    circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
                    circleMesh.position.set(xOffset + j / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), yOffset - i / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), 0.1);
                    var randRadius = THREE.Math.randFloat(0.05, 0.1);
                    circleMesh.scale.set(randRadius, randRadius, 1);
                    scene.add(circleMesh);
                    objetArray.push([circleMesh, false]);
                }

            }
        }


    }

    function animate() {

        requestAnimationFrame(animate);
        render();
        stats.update();
        // controls.update();
        frame++;
    }

    function render() {
        
            while (animationQueue.length > 0) {
                var obj_index = animationQueue[0][0];
                var ani_frame = animationQueue[0][1];
                if (ani_frame > ANIMATION_FRAME_LENGTH) {
                    objetArray[obj_index][1] = false;
                    animationQueue.shift();
                }
                else {
                    break;
                }
            }

            for (var i = 0; i < objetArray.length; i++) {
                var obj = objetArray[i][0];
                var isAnimating = objetArray[i][1];
                if (isAnimating == false) {
                    var px = obj.position.x;
                    var py = obj.position.y;
                    var dist = Math.sqrt(Math.pow(px - mouseScaled.x, 2) + Math.pow(py - mouseScaled.y, 2));
                    if (dist < INTERACT_DISTANCE) {
                        var startPosVector = obj.position.clone();
                        var mouseRepelVector = new THREE.Vector3().subVectors(startPosVector, mouseScaled).multiplyScalar(THREE.Math.randFloat(INTERACT_DISTANCE + 0.5, INTERACT_DISTANCE + 2) - dist);
                        var endPosVector = new THREE.Vector3().addVectors(startPosVector, mouseRepelVector);
                        animationQueue.push([i, 0, startPosVector, endPosVector]);
                        objetArray[i][1] = true;
                    }
                }
            }

            for (var i = 0; i < animationQueue.length; i++) {
                var obj = objetArray[animationQueue[i][0]][0];
                var ani_frame = animationQueue[i][1];
                var startPosVector = animationQueue[i][2];
                var endPosVector = animationQueue[i][3];
                var curPosVector = new THREE.Vector3();
                var frac = 1 - Math.abs(ani_frame - (ANIMATION_FRAME_LENGTH / 2)) / (ANIMATION_FRAME_LENGTH / 2);
                frac = easeOutQuad(frac);
                curPosVector.lerpVectors(startPosVector, endPosVector, frac);

                obj.position.x = curPosVector.x;
                obj.position.y = curPosVector.y;
                obj.position.z = curPosVector.z;
                animationQueue[i][1] += 1;
            }

            mouse = new THREE.Vector3(10000, 10000, -2);
            mouseScaled = new THREE.Vector3(10000, 10000, -2);

            renderer.render(scene, camera);
    }

    function onWindowResize() {
        SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
        SCREEN_WIDTH = SCREEN_HEIGHT;
        SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.aspect = SCREEN_ASPECT_RATIO;
        camera.updateProjectionMatrix();
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        console.log(SCREEN_WIDTH + "x" + SCREEN_HEIGHT)
    }

    function onDocumentMouseMove(event) {

        var rect = canvas.getBoundingClientRect();

        mouse.x = event.clientX - rect.left;
        mouse.y = event.clientY - rect.top;

        mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
        mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;

    }

    function sigmoid(t) {
        return 1 / (1 + Math.pow(Math.E, -t));
    }

    // no easing, no acceleration
    function linear(t) {
        return t;
    }
    // accelerating from zero velocity
    function easeInQuad(t) {
        return t * t;
    }
    // decelerating to zero velocity
    function easeOutQuad(t) {
        return t * (2 - t);
    }
    // acceleration until halfway, then deceleration
    function easeInOutQuad(t) {
        return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }
    // accelerating from zero velocity 
    function easeInCubic(t) {
        return t * t * t;
    }
    // decelerating to zero velocity 
    function easeOutCubic(t) {
        return (--t) * t * t + 1;
    }
    // acceleration until halfway, then deceleration 
    function easeInOutCubic(t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
    }
    // accelerating from zero velocity 
    function easeInQuart(t) {
        return t * t * t * t;
    }
    // decelerating to zero velocity 
    function easeOutQuart(t) {
        return 1 - (--t) * t * t * t;
    }
    // acceleration until halfway, then deceleration
    function easeInOutQuart(t) {
        return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
    }
    // accelerating from zero velocity
    function easeInQuint(t) {
        return t * t * t * t * t;
    }
    // decelerating to zero velocity
    function easeOutQuint(t) {
        return 1 + (--t) * t * t * t * t;
    }
    // acceleration until halfway, then deceleration 
    function easeInOutQuint(t) {
        return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
    }

    //Event Handlers
    window.addEventListener("resize", onWindowResize);


    init();
    animate();

}

ThreeJSCanvas(1);
  </script>
 </BODY>
</HTML>
时光飞逝，岁月依然
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现的又一个不错的滑动导航效果
10-30
javascript实现的又一个不错的滑动导航效果
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 8万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 4342
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
nomasp 博客导读：Lisp/Emacs、Algorithm、Android
nomasp
09-17 1万+
ProfileIntroduction to Blog 您能看到这篇博客导读是我的荣幸，本博客会持续更新，感谢您的支持，欢迎您的关注与留言。博客有多个专栏，分别是关于 Android应用开发 、Windows App开发 、 UWP（通用Windows平台）开发 、 SICP习题解 和 Scheme语言学习 、 算法解析 与 LeetCode等题解 ，而最近会添加的文章将
babylon.js文档笔记
weixin_45727272的博客
08-19 4452
babylon 一 基本使用 引入 <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> import * as BABYLON from "babylonjs"; import "babylonjs-gu
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
10-18
主要介绍了原生JS实现的多个彩色小球跟随鼠标移动动画效果,涉及javascript事件响应、页面元素属性动态修改及随机数应用等相关操作技巧,需要的朋友可以参考下
纯Java 实现的一个脚本语言 语法类似javascript
最新发布
08-28
纯Java 实现的一个脚本语言 语法类似javascript
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
12-09
第一个太简单就不说了，第二个也很简单，但每个人都有不同的实现方法，下面给一个比较简洁的做法，支持IE6、IE7、FF2，其他浏览器未测试（可以扩展一下用到ASP.NET的GridView里）： 鼠标划过表格行变色－简洁实现...
纯Java 实现的一个脚本语言 语法类似javascript.zip
06-16
纯Java 实现的一个脚本语言 语法类似javascript.zip
黑客帝国动态特效代码
qq_43260038的博客
09-12 2109
黑客帝国动态特效代码（可以用自己想用的那些字来形成向下的流动型光柱） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTE
js实现3D粒子酷炫动态旋转特效
qq_43260038的博客
09-12 2007
js实现3D粒子酷炫旋转特效（效果比较酷炫，希望大家能够喜欢） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=
使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）
qq_43260038的博客
04-01 1866
使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）(如果要绘制其他图形，做一点小改动就行了) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style ...
玻璃上的雨滴（动态特效）
qq_43260038的博客
09-13 922
玻璃上的雨滴（动态特效） 动态变化中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="">
使用jquery对表格的样式及内容进行更改
qq_43260038的博客
04-28 780
使用jquery对表格的样式及内容进行更改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="scripts/jquery.js" type="text/...
canvas画布js代码实现大风车的动画
qq_43260038的博客
03-29 725
通过js代码在canvas画布中实现大风车的动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大风车</title> <style type="text/css"> #canvas...
动态生成灯笼骨架（从一个很小的内部结构慢慢的从下方一根一根的为它添加外部骨架，使其成型）
qq_43260038的博客
09-20 592
动态生成灯笼骨架（从一个很小的内部结构慢慢的从下方一根一根的为它添加外部骨架，使其成型） 动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！)
qq_43260038的博客
09-12 562
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！) 动态变化中的静态截图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>抽象画布可视化</title> <style> body { background: #000; overflow: hidden; }
自己仿的一个网页，比较适合小白入门
qq_43260038的博客
03-11 509
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超星首页</title> <link rel="stylesheet" href="css/style.css"> </head>...
JavaScript实现 实现滑动滚动条到某个距离出现一个固定的的框,小于这个距离就不出现
07-12
你可以使用JavaScript来实现滑动滚动条到某个距离出现一个固定的框。一种常见的实现方式是通过监听滚动事件来动态改变框的显示与隐藏状态。以下是一个简单的示例代码： ```javascript // 获取滚动条距离顶部的距离 function getScrollTop() { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; } // 监听滚动事件 window.addEventListener('scroll', function() { var distance = 200; // 设置滚动条距离顶部的距离 var fixedBox = document.getElementById('fixed-box'); // 获取固定的框元素 if (getScrollTop() > distance) { fixedBox.style.display = 'block'; // 滚动条距离顶部超过设定的距离时显示框 } else { fixedBox.style.display = 'none'; // 滚动条距离顶部小于设定的距离时隐藏框 } }); ``` 在上面的代码中，我们首先定义了一个`getScrollTop()`函数来获取滚动条距离顶部的距离。然后，我们通过监听`scroll`事件来判断滚动条的位置是否超过了设定的距离。如果超过了设定的距离，我们将显示固定的框，否则隐藏它。 请注意，你需要将`fixed-box`替换为你实际使用的固定框的元素ID。此外，你可以根据需要调整`distance`的值来控制滚动条滚动多远时显示框。 希望这可以帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值