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,前端&项目,前端之路)

  • Spring Boot 中使用 Jackson 实现全局时间格式处理（支持多格式反序列化） 喵行星 Jacksping相关java
    好的，以下是整理好的CSDN博文格式内容，适合你发布为一篇讲解Jackson全局时间配置的文章：SpringBoot中使用Jackson实现全局时间格式处理（支持多格式反序列化）在实际开发中，我们经常需要处理前后端交互中的时间字段。为了统一时间格式，通常会在字段上添加@JsonFormat注解，但如果项目中字段很多，这种方式会显得重复且难以维护。本文将介绍如何通过配置Jackson的全局时间格式，
  • tauri v2 开源项目学习（二）
    前言:tauri2编程，前端部分和electron差不多，框架部分差别大，资料少，官网乱，AI又骗我所以在gitee上，寻找tauriv2开源项目，通过记录框架部分与rust部分的写法，对照确定编程方式tarui2插件，可以查看：https://github.com/tauri-apps/plugins-workspace1.EcoPastehttps://gitee.com/ayangweb/E
  • tauri v2 开源项目学习（一）
    前言:tauri2编程，前端部分和electron差不多，框架部分差别大，资料少，官网乱，AI又骗我所以在gitee上，寻找tauriv2开源项目，通过记录框架部分与rust部分的写法，对照确定编程方式提示：不要在VSCode里自动运行Cargo，在powershell里运行Cargobuild，不会卡住1.tauri-desktophttps://gitee.com/MapleKing/taur
  • 【Docker】 容器中Spring boot项目 Graphics2D 画图中文乱码解决方案 ladymorgana 日常工作总结dockerspringboot容器
    @TOC一、容器中Springboot项目Graphics2D画图中文乱码解决方案在Docker容器中运行Java应用使用Graphics2D绘制中文时出现乱码，通常是因为容器缺少中文字体支持。以下是完整的解决方案：1.基础解决方案：安装中文字体方法一：基于Alpine镜像的解决方案FROMopenjdk:8-jdk-alpine#安装中文字体RUNapkadd--updatettf-dejavu
  • 前端与UI如何联手，让数字孪生走进现实生活？ 贝格前端工场 前端ui
    数字孪生（DigitalTwin）作为工业互联网的核心技术，正在通过前端技术与用户界面设计的深度协同，从实验室走向大规模应用场景。这种虚实映射系统要求前端框架突破传统二维界面限制，与UI设计思维共同构建三维可视化、实时交互的新型人机界面。本文将从技术融合、系统挑战、交互创新、场景实践和团队协作五个维度，解析数字孪生落地的关键路径。一、技术融合：可视化框架与UI设计工具链的协同进化现代数字孪生系统需
  • 推荐文章：探索深度学习的不确定性边界 —— SDE-Net 开源项目解析 史多苹Thomas
    推荐文章：探索深度学习的不确定性边界——SDE-Net开源项目解析SDE-NetCodeforpaper:SDE-Net:EquippingDeepNeuralnetworkwithUncertaintyEstimates项目地址:https://gitcode.com/gh_mirrors/sd/SDE-Net在当今的人工智能领域，深度神经网络(DNN)已经成为推动技术创新的基石。然而，其预测的
  • 设计模式精讲 Day 20：状态模式（State Pattern） 在未来等你 23种设计模式精讲设计模式状态模式Java开发面向对象设计软件架构设计模式实战Java应用开发
    【设计模式精讲Day20】状态模式（StatePattern）文章标签设计模式,状态模式,Java开发,面向对象设计,软件架构,设计模式实战,Java应用开发文章简述状态模式是行为型设计模式中的重要一员，用于管理对象在不同状态下的行为变化。在实际项目中，状态模式能够有效解耦状态逻辑，提升系统的可维护性和扩展性。本文作为“设计模式精讲”系列的第20天，深入讲解了状态模式的核心思想、实现方式和实际应用
  • 22-4 SQL注入攻击 - post 基于报错的注入 技术探索 Web安全攻防全解析sql数据库
    1、post基于错误单引号注入回显分析注入点位置已经发生变化。在浏览器中，无法直接查看和修改注入点。不过，可以通过使用相应的插件来完成修改任务。修改方法：(一般是网站前端做了限制，我们才需要用到bp绕开限制)要修改Less11注入点的请求，可以使用BurpSuite工具来捕获请求包，并使用其中的"Repeater"功能来进行修改。具体操作步骤如下：首先打开BurpSuite并设置代理，然后在浏览器
  • Oracle查询超时问题，聊聊思路！ bug菌¹ 全栈Bug调优(实战版)#CSDN问答解惑(全栈版)数据库oraclejava
    本文收录于《CSDN问答解答》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！问题描述  Oracle在查询超过6秒的sql都会报Socketreadtimedout。我也根据网上的一些资料，在oracleurl后拼接了oracle.net.CONNECT_T
  • 如果用于AI评课系统的话——五款智能体比较 东方-教育技术博主 人工智能应用人工智能
    你目前的项目特点是：已经具备了课堂文本分析、大模型对话系统、课堂视频分析的技术模块；计划通过智能体调用你现有的Python分析脚本，实现数据分析、自动可视化，并与教师互动；更强调多智能体协作、流程灵活编排，以及循证研究的交互分析。因此，我们重点考量生态成熟度、流程编排能力、多智能体协作能力、易用性四个维度。下面逐个分析你提到的框架：智能体框架综合对比分析：框架生态成熟度多智能体能力流程编排能力易用
  • SpringBoot返回文件让前端下载的几种方式 一朵梨花压海棠go springboot前端后端
    01背景在后端开发中，通常会有文件下载的需求，常用的解决方案有两种：不通过后端应用，直接使用nginx直接转发文件地址下载（适用于一些公开的文件，因为这里不需要授权）通过后端进行下载，同时进行一些业务处理本篇主要以方法2进行介绍，方法2的原理步骤如下：读取文件，得到文件的字节流将字节流写入到响应输出流中02一次性读取到内存，通过响应输出流输出到前端@GetMapping("/file/downlo
  • Oracle ORA-3137[12333] 关闭的连接 java.sql.SQLRecoverableException: 无法从套接字读取更多的数据 ... iteye_9244 ORALCEoraclesql
    今天在项目中遇到一个异常：OracleORA-3137[12333]关闭的链接java.sql.SQLRecoverableException:无法从套接字读取更多的数据，后来我在网上找了一下解决方案发现有两个：第一个解决方案：换oracle驱动，把驱动版本换成11.2的，但是尝试了一下没有效果，所以使用了第二个解决方案：在PLSQL执行altersystemset"_optim_peek_use
  • 详解MATLAB/Simulink通信系统建模与仿真代码及PPT 甄亚凌
    详解MATLAB/Simulink通信系统建模与仿真代码及PPT项目地址:https://gitcode.com/open-source-toolkit/376e9欢迎来到这个专注于通信系统建模与仿真的开源资源库。本仓库致力于为MATLAB与Simulink的学习者和研究者提供详尽、实用的教学资源，特别是针对通信系统领域的实践者。通过这一平台，您将获取到全面覆盖各章节的经典案例，不仅包含精心编写的
  • Vue3.3 + TypeScript ，自主打造媲美 ElementPlus 的组件库之学习笔记 怪我冷i 大前端typescript学习笔记
    Vue3.3+TS4，自主打造媲美ElementPlus的组件库第1章课程介绍1-1课程导学1-2代码库使用注意事项1-3项目演示地址：http://element.vikingship.xyz/第2章Typescript基础知识2-1什么是Typescript为什么要学习它2-2安装Typescript2-3原始数据类型和Any类型2-4数组和元组2-5Interface-接口初探2-6函数2-
  • 如何用Python实现基础的文生视频AI模型 AI学长带你学AI AI人工智能与大数据应用开发AI应用开发高级指南python音视频人工智能ai
    如何用Python实现基础的文生视频AI模型关键词：文生视频、AI生成、扩散模型、多模态对齐、视频生成算法、Python实现、时间一致性摘要：本文系统讲解基于扩散模型的文生视频（Text-to-Video,T2V）AI模型的核心原理与Python实现方法。从技术背景到数学模型，从算法设计到项目实战，逐步拆解文本-视频跨模态对齐、时间序列建模、扩散生成等关键技术。通过PyTorch实现一个基础版文生
  • spring中maven缺少包如何重新加载，报错java: 程序包org.springframework.web.reactive.function不存在 东方-教育技术博主 javajavaspringmaven
    错误原因分析java:程序包org.springframework.web.reactive.function不存在这个错误是由于项目中缺少SpringWebFlux相关依赖导致的。org.springframework.web.reactive.function包属于SpringWebFlux模块（用于响应式Web开发），如果你的项目需要使用该包下的类（如RouterFunction、Serve
  • git 总结+场景应用 放逐者-保持本心，方可放逐 工具配置gitgit远程连接git标签git应用git打包迁移git版本控制git新手应用
    文章目录概要（git）git冲突经验之谈git相关操作后续git具体应用回退到指定版本git校验忽略git版本标签管理git代码仓库迁移gitbundle后续git新手应用指南概要（git）一、Git简介Git是一个分布式版本控制系统，用于高效地处理从非常小到非常大的项目版本管理。它允许开发者跟踪文件的更改历史，方便团队协作开发，并且可以在不同分支上进行并行开发。二、基础指令连接（配置）gitco
  • 使用GPU进行机器学习训练时，如果GPU-Util计算核心满载工作但是显存占用较少，应该如何优化？ 十子木 机器学习深度学习人工智能
    是否需要优化？如果任务运行正常：无需干预（GPU设计本就是优先榨干计算性能）。如果出现卡顿或效率低下：增大batch_size：提升显存占用，减少数据搬运次数（但需避免OOM）。启用混合精度：torch.cuda.amp可减少显存占用并加速计算。检查CPU到GPU的数据流：避免频繁的小数据拷贝（如DataLoader的num_workers设置）。
  • 【Docker项目实战】使用Docker部署Caddy+vaultwarden密码管理工具(详细教程） 江湖有缘 Docker部署项目实战合集docker容器运维
    【Docker项目实战】使用Docker部署vaultwarden密码管理工具前言一、vaultwarden介绍1.1vaultwarden简介1.2主要特点二、本次实践规划2.1本地环境规划2.2本次实践介绍三、本地环境检查3.1检查Docker服务状态3.2检查Docker版本3.3检查dockercompose版本四、拉取镜像五、部署vaultwarden服务5.1创建部署目录5.2编辑部署
  • 探秘Swift高级开发：深度解析与实践指南 强妲佳Darlene
    探秘Swift高级开发：深度解析与实践指南Advanced-SwiftNotesofAdvancedSwift.《swift进阶》学习笔记swift5.3项目地址:https://gitcode.com/gh_mirrors/ad/Advanced-Swift在软件开发的世界里，掌握一门编程语言的精髓，意味着你可以创造出无限可能的应用。而Swift，这款由Apple推出的高性能编程语言，以其易学易
  • 使用虚幻引擎5（UE5）开发游戏的最低配置推荐 知1而N UE5-游戏引擎虚幻5最佳实践ue5游戏
    一、最低系统配置（可运行引擎）组件要求说明来源操作系统Windows1064位（版本20H2或更高）处理器4核CPU（如Inteli5-4590或AMDRyzen51600），主频≥3.0GHz内存8GBRAM（推荐32GB以上，复杂场景需64GB）显卡NVIDIAGTX970（4GB显存）或AMDRadeonR9290（4GB显存）存储100GBSSD（项目文件占用空间随复杂度增长）Direct
  • 探索Gemini Balance：Google Gemini API的代理与负载均衡解决方案 几道之旅 人工智能智能体及数字员工负载均衡运维人工智能
    引言在人工智能领域，API的高效使用和管理至关重要。尤其是当涉及到Google的GeminiAPI时，为了实现更稳定、更高效的服务，我们需要一个强大的代理和负载均衡工具。今天，我们就来深入了解一下GeminiBalance这个开源项目，它为GeminiAPI的使用提供了全面而灵活的解决方案。项目概述GeminiBalance是一个基于PythonFastAPI构建的应用程序，主要用于提供Googl
  • 关于Makefile LZA185 linux编辑器
    目录引言：为什么需要Makefile？一、Makefile基本概念1.1Make与Makefile的关系1.2三个关键概念二、Makefile基础语法2.1基本规则结构2.2变量定义与使用2.3常用特殊变量三、Makefile高级特性3.1模式规则（PatternRules）3.2函数的使用3.3条件判断与递归调用四、实战案例：构建一个简单项目完整Makefile实现五、Makefile最佳实践5
  • 提名 Apache ShardingSphere Committer，说说方法
    优质资源分享学习路线指引（点击解锁）知识定位人群定位Python实战微信订餐小程序进阶级本课程是pythonflask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统文章首发在公众号（龙台的技术笔记），之后同步到博客园和个人网站：xiaomage.info就在前几天，收到了ApacheS
  • window.accountCenterFeedback详细解析 前端页面仔 开发语言javascripthtmlwindowsvuereact
    window.accountCenterFeedback表示访问浏览器全局对象window上的一个属性，通常用于管理账户中心（AccountCenter）的反馈功能。以下是详细解析：1.这是什么？定义：window.accountCenterFeedback是挂载在浏览器全局作用域（window）上的一个对象或方法，通常由前端代码或第三方SDK注入，用于控制账户中心的用户反馈功能（如弹窗、问卷、帮
  • Java开发的智能新时代——如何利用AI工具提升编程效率 inscode_055
    最新接入DeepSeek-V3模型，点击下载最新版本InsCodeAIIDE标题：Java开发的智能新时代——如何利用AI工具提升编程效率引言在当今快速发展的科技时代，Java作为一门广泛应用的编程语言，在企业级应用、Web开发、移动应用等领域占据着重要地位。然而，随着项目复杂度的增加和开发周期的缩短，传统的开发方式已难以满足现代开发的需求。幸运的是，智能化的工具软件如InsCodeAIIDE正逐
  • Java 开发的智能化革命——如何借助最新工具提升编程效率 inscode_014
    最新接入DeepSeek-V3模型，点击下载最新版本InsCodeAIIDE标题：Java开发的智能化革命——如何借助最新工具提升编程效率在当今快速发展的科技时代，Java作为一门广泛应用的编程语言，依然保持着其强大的生命力和广泛的影响力。无论是企业级应用、Web开发还是移动应用开发，Java都扮演着不可或缺的角色。然而，随着项目复杂度的增加和技术更新换代的速度加快，Java开发者们面临着前所未有
  • WPF 之 exe 单文件打包工具：LibZ 外来物种 桌面软件WPFC#
    ▪前言在VS开发过程中我们需要不断的编译软件并进行测试，同时VS会自动在项目跟目录的\bin\Debug文件夹里生成一系列文件（包括程序执行的主exe文件）。对于简单WPF程序，我们通常可以直接拷贝[ProjectSub]\bin\Debug下程序主exe文件就可以到其他机子使用了，当然前提是机子要已经装了对应的.NetFormework版本库但是有时候我们会在项目引入其他第三方库（非.Net框架
  • WPF实现一个播放音乐和视频的应用 code_shenbing WPFwpf音视频C#
    一、项目准备创建WPF项目在VisualStudio中新建WPFApp(.NETFramework)项目命名为"MediaPlayerApp"添加必要的NuGet包Install-PackageMicrosoft.WindowsAPICodePack-ShellInstall-PackageTagLibSharp二、界面设计1.主窗口XAML(MainWindow.xaml)三、代码实现1.主窗口
  • 长尾形分布论文速览【80-119】 木木阳 Long-tailed人工智能
    为便于理解和应用，以下将30篇关于长尾分布的研究文献按主题进行分类整理。每一大类包含相应的工作，帮助我们从整体上把握各方向的研究进展。1.长尾半监督学习与伪标签优化Paper90:Uncertainty-awareSamplingforLong-tailedSemi-supervisedLearning提出了一种动态阈值选择方法（UDTS），能有效改善尾部分类性能，适用于不平衡类别的半监督学习。P
  • 多线程编程之存钱与取钱 周凡杨 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其他