Lawliet_ZMZ
Lawliet_ZMZ

JS特效：相册变换

嗯 就是这样一个例子，视频学到的一个特效，实际用处并不大，但是可以帮助理解JS语言和熟悉CSS3样式。

设计：

　观察一张图片的变化，发现：


 1、图片缩放（随机，并且不是同时运动）
 　　1、从大到小
 　　2、从小到大，透明度从1到0（在第一步运动完成后立马开始）

 2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）

 3. 因为每张图片是随机开始变换的，所以起始时间是不同的，这里可设置一个延迟器setTimeout，时间用random随机生成即可。

 4. 中间需要用到自执行函数，因为setTimeout无视for循环的i，所以每次延时器运行的时候i可能都出错，用自执行函数保存i的每一次值。

 5. 转换期间按钮的div是不能点击的，需要标记和判断。

 6.运动共有两个，缩放和旋转，注意缩放全部结束才能开始旋转，这里也要处理好。

笔记：

scale是缩放
transition 过渡，延迟
子函数修改父亲的值，就是闭包
  JS特效：相册变换_第1张图片

 

自执行函数 这里主要用来保存i的每一次值
如果直接加定时器，就不管外面循环，1s后才执行，这时的i都不知道到哪里了，可能越界
  JS特效：相册变换_第2张图片

 

Math.random()产生的值是setTimeout的一个参数，延迟的时间
 
setTimeout延迟时间也与电脑卡影响
 
transitionend只要过渡了就会执行，它是根据 样式来计算的
JS特效：相册变换_第3张图片

 

缩放和透明都会触发transitionend
 
call()改变this指向的对象
 
 

 

然后就直接实现了，在加载页面的时候就运行这个特效。

补上中间查到的一些资料：

1.CSS3 opacity 属性：

值 描述
value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit Opacity属性的值应该从父元素继承

 


2.HTML DOM scale() 方法：

参数

参数 描述
sx, sy 水平和垂直的缩放因子。

描述

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

 这里我直接一个参数就是同时缩小高度和宽度

 

3.

div是块标签，现在这种情况此div的标签会被里面图片高度自己撑起来，img标签都是默认向左漂浮的，刚好每行10个每个80px
margin: 0 auto是margin: 0 auto 0 auto的简写，也就是左右自动居中，至于为什么没有紧挨着上面的div，这个应该是上面那个margin: 80px auto，已经设置了跟下面的div外边距80px距离

btn的高度没有设置，靠font撑的

 

 剩下就是代码了，注释很详细，回调函数很多。。：

复制代码 
  1 DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>title>
  6         <style>
  7             /*图片容器整体样式，左右居中 视角景深800px */
  8             #imgWrap{
  9                 width: 800px;
 10                 height: 400px;
 11                 margin: 80px auto;
 12                 perspective: 800px;
 13             }
 14 
 15             /*左对齐，高宽*数量=整体div*/
 16             #imgWrap img{
 17                 float: left;
 18                 width: 80px;
 19                 height: 80px;
 20             }
 21 
 22             #btn{
 23                 width: 100px;
 24                 /*height: 40px 这里不定义就是跟font大小一样*/
 25                 background: rgb(0,100,0);
 26                 padding: 0 20px;
 27                 /*font-size 和 line-height 中可能的值。*/
 28                 font: 16px/40px "微软雅黑";
 29                 color: #fff;
 30                 margin: 0 auto;
 31                 border-radius: 5px;
 32                 box-shadow: 2px 2px 5px #000;
 33                 cursor: pointer;
 34             }
 35         style>
 36         <script>
 37             /*
 38              * 讲师：陈学辉
 39              * QQ：356985332
 40              * 微信：kaivon
 41              *
 42              */
 43 
 44             /*
 45              * 1、图片缩放（随机，并且不是同时运动）
 46              *     1、从大到小
 47              *     2、从小到大，透明度从1到0（在第一步运动完成后立马开始）
 48              *
 49              * 2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）
 50              */
 51 
 52             window.onload=function(){
 53                 var btn=document.getElementById("btn");
 54                 // 选择所有元素
 55                 var imgs=document.querySelectorAll("img");
 56                 var endNum=0;        //它代表图片运动完成的数量
 57                 var canClick=true;    //它代表用户能否再次点击
 58 
 59                 btn.onclick=function(){
 60                     if(!canClick){
 61                         return;        //以下的代码不要走了
 62                     }
 63                     canClick=false;
 64 
 65 
 66                     for(var i=0;i<imgs.length;i++){
 67                         (function(i){
 68                             setTimeout(function(){
 69                                 /*imgs[i].style.transition='100ms';
 70                                 imgs[i].style.transform='scale(0)';
 71                                 imgs[i].style.opacity='0';
 72 
 73                                 imgs[i].addEventListener('transitionend',function(){
 74                                     console.log(1);
 75                                 });*/
 76 
 77                                 motion(imgs[i],'50ms',function(){
 78                                     this.style.transform='scale(0)';
 79                                 },function(){
 80                                     motion(this,'1s',function(){
 81                                         this.style.transform='scale(1)';
 82                                         this.style.opacity='0';
 83                                     },function(){
 84                                         //在这里表示图片缩放的运动已经全部完成了，接着走第二个运动
 85 
 86                                         endNum++;
 87                                         if(endNum==imgs.length){
 88                                             //所有的运动都完成了
 89                                             //console.log('所有的运动都完成了')
 90                                             rotate();
 91                                             //endNum=0;
 92                                         }
 93                                     });
 94                                 });
 95                             },Math.random()*1000);
 96                         })(i);
 97                     }
 98                 };
 99 
100 
101                 //旋转功能
102                 function rotate(){
103                     for(var i=0;i<imgs.length;i++){
104                         //给运动来一下初始化
105                         imgs[i].style.transition='';
106                         /*imgs[i].style.opacity=1;*/
107                         imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';
108 
109                         //运动来了，自执行函数
110                         (function(i){
111                             setTimeout(function(){
112                                 motion(imgs[i],'2s',function(){
113                                     this.style.opacity=1;
114                                     this.style.transform='rotateY(-360deg) translateZ(0)';
115                                 },function(){
116                                     endNum--;    //因为在上次运动结束的时候，endNum的值已经加到了50了
117                                     //console.log(endNum);
118                                     if(endNum==0){
119                                         //所有的运动都完成了
120                                         canClick=true;
121                                         //endNum=0
122                                     }
123                                 });
124                             },Math.random()*1000);
125                         })(i);
126                     }
127                 }
128 
129                 //运动函数
130                 function motion(obj,timer,doFn,callBack){
131                     //motion(运动对象,运动时间(字符串+单位),运动属性(函数),运动结束后的回调函数)
132                     obj.style.transition=timer;
133                     doFn.call(obj);//改变对象
134 
135                     var end=true;        //用来知道过渡有没有完成一次
136 
137                     //结束事件处理函数
138                     function endFn(){
139                         if(end){
140                             //callBack&&callBack.call(obj);
141                             if(callBack){
142                                 callBack.call(obj);
143                             }
144 
145                             end=false;    //改成false，下次就不会走这个if了
146                         }
147 
148                         obj.removeEventListener('transitionend',endFn);    //结束后就把这个事件取消掉，要不它会一直带在身上
149                     }
150 
151                     obj.addEventListener('transitionend',endFn);
152                 }
153             };
154         script>
155     head>
156     <body>
157         <div id="imgWrap">
158             <img src="images/1.jpg" alt="" />
159             <img src="images/2.jpg" alt="" />
160             <img src="images/3.jpg" alt="" />
161             <img src="images/4.jpg" alt="" />
162             <img src="images/5.jpg" alt="" />
163             <img src="images/6.jpg" alt="" />
164             <img src="images/7.jpg" alt="" />
165             <img src="images/8.jpg" alt="" />
166             <img src="images/9.jpg" alt="" />
167             <img src="images/10.jpg" alt="" />
168             <img src="images/11.jpg" alt="" />
169             <img src="images/12.jpg" alt="" />
170             <img src="images/13.jpg" alt="" />
171             <img src="images/14.jpg" alt="" />
172             <img src="images/15.jpg" alt="" />
173             <img src="images/16.jpg" alt="" />
174             <img src="images/17.jpg" alt="" />
175             <img src="images/18.jpg" alt="" />
176             <img src="images/19.jpg" alt="" />
177             <img src="images/20.jpg" alt="" />
178             <img src="images/21.jpg" alt="" />
179             <img src="images/22.jpg" alt="" />
180             <img src="images/23.jpg" alt="" />
181             <img src="images/24.jpg" alt="" />
182             <img src="images/25.jpg" alt="" />
183             <img src="images/26.jpg" alt="" />
184             <img src="images/27.jpg" alt="" />
185             <img src="images/28.jpg" alt="" />
186             <img src="images/29.jpg" alt="" />
187             <img src="images/30.jpg" alt="" />
188             <img src="images/31.jpg" alt="" />
189             <img src="images/32.jpg" alt="" />
190             <img src="images/33.jpg" alt="" />
191             <img src="images/34.jpg" alt="" />
192             <img src="images/35.jpg" alt="" />
193             <img src="images/36.jpg" alt="" />
194             <img src="images/37.jpg" alt="" />
195             <img src="images/38.jpg" alt="" />
196             <img src="images/39.jpg" alt="" />
197             <img src="images/40.jpg" alt="" />
198             <img src="images/41.jpg" alt="" />
199             <img src="images/42.jpg" alt="" />
200             <img src="images/43.jpg" alt="" />
201             <img src="images/44.jpg" alt="" />
202             <img src="images/45.jpg" alt="" />
203             <img src="images/46.jpg" alt="" />
204             <img src="images/47.jpg" alt="" />
205             <img src="images/48.jpg" alt="" />
206             <img src="images/49.jpg" alt="" />
207             <img src="images/50.jpg" alt="" />
208         div>
209         <div id="btn">点击查看效果div>
210     body>
211 html>
复制代码

欢迎下方留言一起探讨



你可能感兴趣的:(JavaScript,CSS&CSS3,前端&项目,前端之路)

  • Linux基础知识总结 芜湖_起飞 linux运维服务器git
    LinuxandDjango这个项目主要记录和回顾Linux和Django框架的知识Linux常用命令ctrlc:取消命令，并且换行ctrlu:清空本行命令tab键：可以补全命令和文件名，如果补全不了快速按两下tab键可以显示备选选项ls:列出当前目录下所有文件，蓝色的是文件夹，白色的是普通文件，绿色的是可执行文件pwd:显示当前路径cdXXX:进入XXX目录下,cd…返回上层目录cpXXXYYY
  • 如何使用 Python 爬取多章节小说并保存为文本文件 BARRY_NINE python爬虫python开发语言
    前言网络爬虫是一个非常有趣且实用的技术，尤其是在我们需要从网站上自动获取数据时。在这篇博客中，我将分享如何使用Python的requests和lxml库来编写一个简单的爬虫，从某个小说网站上爬取整本小说的章节内容，并将其保存为一个本地的文本文件。我们将介绍逐行的代码解析、爬取流程，以及如何处理特殊情况，比如爬取到最后一章时终止程序。使用的工具和库在这次项目中，我们主要用到以下几个Python库：r
  • 使用 Axios 获取用户数据并渲染——个人信息设置 还是鼠鼠 javascriptbootstrapajax前端vscode前端框架html5
    目录1.HTML部分（前端页面结构）HTML结构解析：2.JavaScript部分（信息渲染逻辑）JavaScript解析：3.完整流程4.总结5.适用场景本文将介绍如何通过Axios从服务器获取用户信息，并将这些信息动态渲染到个人信息设置页面。用户可以通过表单来查看和更新他们的资料，如邮箱、昵称、性别、个人简介等。为了更直观地理解，本文提供了完整的HTML和JavaScript示例代码，用户可以
  • 落地 dnn对象检测 没学上了 dnn人工智能神经网络
    "C:\opencv\opencv\sources\samples\dnn\models.yml"下载opencv的深度模型框架，例如caffe，copyMobileNetSSD_deploy.prototxt和MobileNetSSD_deploy.caffemodel所在的位置，其中prototxt需要后面生成，这两个文件用于std::stringmodel_text_file和std::st
  • 【AI开源项目】Dify- 轻松打造可持续运营的 GPT 系列的 AI应用 —— 全面解析LLMOps平台 ChatGPT-千鑫 AI开源项目人工智能人工智能开源gptgpt-3AI编程codemoss能用AI
    文章目录什么是Dify？Dify的名称由来了解LLMOpsDify的核心功能兼容多种LLMsDify的优势完全开源核心能力如何安装Dify快速启动使用HelmChart在Kubernetes上部署自定义配置使用Dify创建AI应用第一步：创建应用程序第二步：编写和调试提示词第三步：集成私有数据或API功能第四步：监控和改进常见问题解答Q1:我能用Dify做什么？Q2:如何使用Dify“训练”自己的
  • 基于Java+MySQL+SSMNBA周边商城管理系统 浅夏淡过，微光凉 JAVA项目javamysql开发语言tomcatmybatis数据库
    系列文章目录项目介绍开发环境系统实现论文参考项目介绍随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势；对于NBA周边商城管理系统当然也不能排除在外，随着网络技术的不断成熟，带动了NBA周边商城管理系统，它彻底改变了过去传统的管理方式，不仅使服务管理难度变低了，还提升了管理的灵活性。这种个性化的平台特别注重交互协调与管理的相互配合，激发了管理人员的创造性与主动性
  • 基于python flask的新闻检索阅读系统 完整代码可直接运行毕业设计 一枚爱吃大蒜的程序员 项目实战pythonflask新闻检索阅读系统新闻检索新闻阅读
    项目演示：基于pythonflask的新闻检索阅读系统_哔哩哔哩_bilibili代码：#coding:utf-8fromflaskimportFlask,request,render_template,redirect,url_for,Flask,sessionfromdatetimeimporttimedeltaimportosi
  • 毕设 基于python的搜索引擎设计与实现 A毕设分享家 python毕业设计
    文章目录0简介1课题简介2系统设计实现2.1总体设计2.2搜索关键流程2.3推荐算法2.4数据流的实现3实现细节3.1系统架构3.2爬取大量网页数据3.3中文分词3.4相关度排序第1个排名算法：根据单词位置进行评分的函数第2个排名算法：根据单词频度进行评价的函数第3个排名算法：根据单词距离进行评价的函数最后0简介今天学长向大家分享一个毕业设计项目毕业设计基于python的搜索引擎设计与实现项目运行
  • LangChain Ask PDF: 构建基于大语言模型的PDF问答应用 m0_75126181 langchainpdf语言模型
    LangChainAskPDF:构建基于大语言模型的PDF问答应用在人工智能和自然语言处理技术快速发展的今天,如何有效地处理和利用大量文本信息成为了一个重要课题。本文将介绍一个名为LangChainAskPDF的开源项目,该项目展示了如何利用LangChain和OpenAI等先进工具,构建一个能够"理解"PDF文档并回答相关问题的智能应用程序。项目概述LangChainAskPDF是一个Pytho
  • 毕设开源 深度学习图像搜索算法-图像搜索引擎(源码分享) knooor 毕业设计毕设大数据
    文章目录0简介1前言2图像检索介绍(1)无监督图像检索(2)有监督图像检索3图像检索步骤4应用实例最后0简介今天学长向大家分享一个毕业设计项目毕业设计深度学习图像搜索算法-图像搜索引擎(源码分享)项目运行效果：毕业设计深度学习图像搜索算法-图像搜索引擎项目分享:见文末!1前言图像检索：是从一堆图片中找到与待匹配的图像相似的图片，就是以图找图。网络时代，随着各种社交网络的兴起，网络中图片，视频数据每
  • 毕业设计 大数据B站数据分析可视化系统 knooor 毕业设计毕设大数据
    文章目录0前言1项目运行效果2设计原理数据处理方案可视化呈现方案综合得分计算指标综合得分漏斗图游客画像完成度三连排行榜点赞、投币、收藏与白嫖的比例分析3最后0前言这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的毕设题目缺少创新和亮点，往往达不到毕业答辩的要求，这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设，学长分享优质毕业设计项目，今天
  • 毕设分享 基于大数据的b站数据分析 knooor 毕业设计毕设大数据
    文章目录0数据分析目标1B站整体视频数据分析1.1数据预处理1.2数据可视化1.3分析结果2单一视频分析2.1数据预处理2.2数据清洗2.3数据可视化3文本挖掘（NLP）3.1情感分析0数据分析目标今天向大家介绍如何使用大数据技术，对B站的视频数据进行分析，得到可视化结果。项目运行效果：毕业设计基于大数据的b站数据分析项目分享:见文末!1B站整体视频数据分析分析方向：首先从总体情况进行分析，之后分
  • 推荐文章：拥抱ASP.NET Core MVC——一款高效、灵活的web开发框架 班歆韦Divine
    推荐文章：拥抱ASP.NETCoreMVC——一款高效、灵活的web开发框架MvcMvc:是一个开源的ASP.NETMVC（模型-视图-控制器）框架，用于构建基于Microsoft.NET的Web应用程序。适合开发者使用ASP.NETMVC构建可扩展和可维护的Web应用程序。项目地址:https://gitcode.com/gh_mirrors/mv/Mvc1、项目介绍ASP.NETCoreMVC
  • 探索现代全栈开发新境界：AppFullStackDemo，一个基于.NET Core和微前端的综合实践 颜殉瑶Nydia
    探索现代全栈开发新境界：AppFullStackDemo，一个基于.NETCore和微前端的综合实践app_fullstackdemoAppFullStackDemo:DDD/SOLID/CleanCodeApp.NetCore3.1(BackEnd)AngularMaterialPanel(FrontEnd)ReactNative(Mobile)项目地址:https://gitcode.com/
  • 8个建议，为啥不使用Python开发大型项目！ 疯狂的超级玛丽 Python基础PythonPython学习python开发语言python3.11学习Python基础Python学习编程
    在开发者的职业生涯中，有一个特定阶段，开发者们会从为项目做贡献到掌握自己的技巧。这个阶段对有些人来说会来得早一些，有些则也会晚一些，而另一部分人则无法到达这个阶段。不过，大多数职业生涯较长的开发人员都经历过这个阶段。我将这称之为自己构建的点。如果你已经到达了那个阶段，你面对的第一个问题是：它是如何运作的？用户体验如何？架构是怎样的？数据如何流动？以及很多类似这样的问题。我在这里就不为你回答这些这些
  • 使用 Python 爬虫获取金融市场数据（股市、汇率等） Python爬虫项目 2025年爬虫实战项目python爬虫开发语言数据分析
    目录项目背景与目标技术栈与工具选择目标网站分析爬虫架构设计股市数据爬取汇率数据爬取爬虫优化与反爬虫策略数据存储与管理数据分析与可视化总结与展望1.项目背景与目标1.1金融市场数据的重要性金融市场数据，如股票、债券、汇率、商品期货等，广泛应用于各种分析领域，如投资策略优化、市场预测、风险评估等。在现代金融分析中，获取并处理实时、准确的金融数据至关重要。无论是个人投资者，还是机构投资者，都需要获取市场
  • 曲线救国——uniapp封装toast消息提示组件(js) AGMTI javascriptuni-app开发语言
    说明：本组件借用到uv-ui前端框架的作为消息提示，有条件的可以自己设计。另外主要用到@uni-ku/[email protected]。目录结构（主要文件）：安装@uni-ku/[email protected]@uni-ku/rootvite.config.js:import{defineConfig}from'vite'importunifrom'@dcloudio/vite-plugin-un
  • 从零开始部署Dify：后端与前端服务完整指南 engchina LINUXDify部署
    从零开始部署Dify：后端与前端服务完整指南一、环境准备1.系统要求2.项目结构二、后端服务部署1.中间件启动（DockerCompose）2.后端环境配置3.依赖安装与数据库迁移4.服务启动三、前端界面搭建1.环境配置2.服务启动四、常见问题排查五、总结在AI应用开发中，Dify作为一款功能强大的工具，其部署过程涉及多个技术栈的整合。本文将详细讲解如何从零开始搭建Dify的完整环境，包括后端服务
  • 关于 RAG 模式的用户建议-（致Openai邮件内容节选） tsistbasit 人工智能
    问题现状与不足在使用RAG模式（“GPTs”应用或“项目”功能）处理相对复杂的任务（例如项目管理、长篇内容创作或复杂问题求解）时，我发现当前的检索方式过于依赖多路召回和全文总结。这样的检索方式在面临大型知识库时往往会忽略逻辑结构和整体脉络，使模型倾向于一次性返回大量零散的细节信息，却缺乏对全局架构的理解。这种状况导致用户难以快速抓取关键要点，也很难将结果高效应用于实际场景中。我的建议细节梳理逻辑结
  • ASP.NET 使用Layui 显示后台数据 程序猿的杂货店 C#开发总结asp.netlayuijavascriptlayui显示后台数据
    此篇文章为项目代码，中间有包含未知引用的类不会提供，这里只是告诉大家asp.net使用Layui显示后台数据的基本流程，特别说明:可以按照这个思路达到asp.net使用layui显示后台数据的目的1下载Layui，并放在web项目中1官网下载:https://www.ilayuis.com/2复制库到项目中解压后放在项目目录中2创建自己的Layui样式文件body
  • ActiveMQ、RabbitMQ、RocketMQ、Kafka的介绍及优缺点说明 墨痕诉清风 安全文献java-rabbitmqrabbitmqjava-activemq
    ActiveMQ单机吞吐量：万级topic数量都吞吐量的影响：时效性：ms级可用性：高，基于主从架构实现高可用性消息可靠性：有较低的概率丢失数据功能支持：MQ领域的功能极其完备总结：非常成熟，功能强大，在早些年业内大量的公司以及项目中都有应用偶尔会有较低概率丢失消息现在社区以及国内应用都越来越少，官方社区现在对ActiveMQ5.x维护越来越少，几个月才发布一个版本主要是基于解耦和异步来用的，较少
  • 【项目分享】使用python的ttkbootstrap模块构建一个炫酷的计时器 命运之光 我的项目源代码集：持续更新python开发语言
    目录前言项目背景项目展示（图片）项目实现1.安装与设置2.创建主窗口3.初始化计时器功能4.实现计时功能5.实现隐藏边框与置顶功能6.运行应用完整代码结论嗨，我是命运之光！2024，每日百字，记录时光，感谢有你一路同行。携手启航，探索未知，激发潜能，每一
  • 手写单例模式 LUCIAZZZ 单例模式java开发语言springboot
    饿汉式加载模式（线程安全）类一加载就创建对象，这种方式比较常用优点：线程安全，没有加锁，执行效率高缺点：不是懒加载，类初始化的时候就加载，浪费内存空间packagecom.example.threadpool.Singleton;publicclassSingleton1{//私有化构造方法privateSingleton1(){}//定义一个静态变量指向自己类型privatefinalstati
  • JavaScript中new Object()是什么？ 芝麻团坚果 Node.js自学笔记
    问题引入：写请假系统的时候，看到同学用了很多varxx=newObject()，不知道什么用处。于是寻找Object()的用法。js中vara=newObject()和vara={}有什么区别吗？应该是没有区别的，两者都是生成一个默认的Object对象。js和其它语言一样，一切对象的基类都是Object，所以，newObject()和简易的{}是同样的空对象，就是默认的对象。本来我以为{}应该是一
  • C# as用法 芝麻团坚果 c#gis
    问题写GIS程序设计的降雨量项目时，遇到as类型转换后，不用新变量，仍然用老的被转换的变量。对这一用法及其具体所指感到好奇。相关代码如下：//设置字段//可以缩写为IFieldsEditfieldsEdit=(newFields())asIFieldsEdit;IFieldsfields=newFields();IFieldsEditfieldsEdit=fieldsasIFieldsEdit;/
  • React + three.js 3D模型面部表情控制 买药弟弟 虚拟直播软件设计论如何快乐自闭javascriptreact.js3d
    系列文章目录React使用three.js加载gltf3D模型|three.js入门React+three.js3D模型骨骼绑定React+three.js3D模型面部表情控制React+three.js实现人脸动捕与3D模型表情同步结合react-webcam、three.js与electron实现桌面人脸动捕应用示例项目(github)：https://github.com/couchette
  • 基于SSM的在线作业管理系统 -octopus-master（源码+调试） 程序猿麦小七 毕业设计Java后台JavaWeb服务器linux数据库在线作业
    项目描述临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你想解决的问题，今天给大家介绍一篇基于SSM的在线作业管理系统设计与实现。功能需求本在线作业管理系统通过分析和确定系统的角色和功能划分，按照业务合理区分为不同的菜单功能模块。从用户角度出发，对每个功能的需求实现点进行人性化
  • 【Docker项目实战】使用Docker部署MinIO对象存储（详细教程） 江湖有缘 Docker部署项目实战合集docker容器运维
    【Docker项目实战】使用Docker部署MinIO对象存储前言一、MinIO介绍1.1MinIO简介1.2主要特点1.3主要使用场景二、本次实践规划2.1本地环境规划2.2本次实践介绍三、本地环境检查3.1检查Docker服务状态3.2检查Docker版本3.3检查dockercompose版本四、下载MinIO镜像五、部署署MinIO系统5.1创建部署目录5.2编辑部署文件5.3创建MinI
  • 关于安卓开发遇到 INSTALL_PARSE_FAILED_MANIFEST_MALFORMED问题 洛小白2233 安卓开发android
    一、问题描述最近接手一个android项目，需要从旧设备安卓一体机（安卓版本7.1.1）移植到新设备（安卓版本10）上，更改SDK后，结果发现无法在新设备上安装，报错Theapplicationcouldnotbeinstalled:INSTALL_PARSE_FAILED_MANIFEST_MALFORMED网上未能搜到结果，所找的教程只是针对android12的，让在AndroidManife
  • VSCode源码分析参考资料 AI时代的程序员 vscodeide编辑器
    VSCodeArchitectureAnalysis-ElectronProjectCross-PlatformBestPractices中文版VSCode架构分析-Electron项目跨平台最佳实践SihanLi博客上的vscode源码分析系列：分析了微服务架构、事件体系、资源管理、配置系统等文召博客上的vscode源码解析系列文章https://github.com/fzxa/VSCode-s
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他