htm5实现视差动画

requestAnimationFrame.js   

1 window.requestAnimFrame = (function() {

2                 return window.requestAnimationFrame ||

3                     window.webkitRequestAnimationFrame ||

4                     window.mozRequestAnimationFrame ||

5                     window.oRequestAnimationFrame ||

6                     window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) {

7                     window.setTimeout(callback, 1000 / 60);

8                 };

9             })();

 页面主要代码：

  1 <!DOCTYPE HTML>

  2 <html>

  3     

  4     <head>

  5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  6         <title>视差动画</title>

  7         <script type="text/javascript" src="js/jquery8.js"></script>

  8         <script type="text/javascript" src="js/requestAnimationFrame.js"></script>

  9         <style type="text/css">

 10             body {

 11                 background:#dddddd;

 12             }

 13             #control {

 14                 width:1000px;

 15                 margin:0 auto;

 16             }

 17             #containter {

 18                 text-align:center;

 19             }

 20             

 21             #canavas {

 22                 margin:10px;

 23                 padding:10px;

 24                 background:#ffffff;

 25                 border:thin #aaaaaa;

 26             }

 27         </style>

 28         <script type="text/javascript">

 29 

 30             $(function() {

 31 

 32                 canvas = jQuery("#canavas")[0];

 33                 content = canvas.getContext("2d");

 34                 

 35                 //天空背景

 36                 sky = new Image();

 37                 sky.src = "image/back.jpg";

 38 

 39                 //云朵

 40                 c1 = new Image();

 41                 c1.src = "image/cloud2.png";

 42 

 43                 c2 = new Image();

 44                 c2.src = "image/cloud1.jpg";

 45 

 46                 c3 = new Image();

 47                 c3.src = "image/cloud3.jpg";

 48                 

 49                 lastTime = (+new Date())

 50                 requestAnimFrame(animate);

 51                 

 52                 pause=false;

 53                 $("#b1").click(function(){

 54                 

 55                  pause=!pause;

 56                 

 57                 });

 58 

 59             });

 60             //获取随机数据

 61             function getRandom(min, max) {

 62 

 63                 return parseInt(Math.random() * (max - min) + min);

 64 

 65             }

 66 

 67 

 68 

 69             SKY_VELOCITY = 50;

 70             skyOffset = 0;

 71 

 72             C1_VELOCITY = 100;

 73             c1Offset = 0;

 74 

 75             C2_VELOCITY = 150;

 76             c2Offset = 0;

 77 

 78             C3_VELOCITY = 200;

 79             c3Offset = 0;

 80 

 81             fangxiag = 1;

 82 

 83             function drawBack() {

 84                 

 85                 //背景移位

 86                 skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0;

 87                 

 88                 //远/中/近 三处的云朵移位

 89                 c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0;

 90                 c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0;

 91                 c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0;

 92 

 93                 //绘制三朵云

 94                 content.save();

 95                 content.translate(-skyOffset, 0);

 96                 content.drawImage(sky, 0, 0);

 97                 content.drawImage(sky, sky.width, 0);

 98                 content.restore();

 99 

100                 content.save();

101                 content.translate(-c1Offset, 0);

102                 content.drawImage(c1, 50, 50);

103                 content.drawImage(c1, 600, 70);

104                 content.drawImage(c1, 1050, 50);

105                 content.drawImage(c1, 1600, 70);

106                 content.restore();

107 

108                 content.save();

109                 content.translate(-c2Offset, 0);

110                 content.drawImage(c2, 130, 120);

111                 content.drawImage(c2, 730, 170);

112                 content.drawImage(c2, 1130, 120);

113                 content.drawImage(c2, 1730, 170);

114                 content.restore();

115 

116                 content.save();

117                 content.translate(-c3Offset, 0);

118                 content.drawImage(c3, 600, 250);

119                 content.drawImage(c3, 100, 320);

120                 content.drawImage(c3, 1600, 250);

121                 content.drawImage(c3, 110, 320);

122                 content.restore();

123 

124             }

125 

126 

127             fps = 0;

128             //实现动画

129             function animate(time) {

130                 

131                 if(!pause){

132                 

133                //清楚背景

134                 content.clearRect(0, 0, canvas.width, canvas.height);

135                 //计算fps

136                 fps = geFps(time);

137 

138                 //绘制背景

139                 drawBack();

140                 

141                 //绘制即时参数

142                 content.fillText(fps.toFixed() + " fps", 20, 20);

143                 

144                 }else{

145               

146                 lastFpsUpdateTime=time;              

147               

148             }

149                 //继续下一帧动画

150                 requestAnimFrame(animate);

151             }

152 

153 

154 

155             var lastFpsUpdateTime = 0;

156             //计算fps

157             function geFps(time) {

158 

159                 fps = 1000 / (time - lastFpsUpdateTime);

160 

161                 lastFpsUpdateTime = time;

162 

163                 return fps;

164 

165             }

166         </script>

167     </head>

168     

169     <body>

170         <div id="control">

171             <input id="b1" type="button" value="暂停" />

172            

173         </div>

174         <div id="containter">

175             <canvas id="canavas" width="500" height="200"></canvas>

176         </div>

177     </body>

178 

179 </html>

 

来看效果：

你可能感兴趣的:(动画)

  • Python爬虫（57）Python数据可视化全攻略：Matplotlib从入门到三维动态图表（8000字实战教程） 一个天蝎座白勺程序猿 Python爬虫入门到高阶实战python爬虫信息可视化
    目录背景与需求分析第一章：Matplotlib基础与核心工作流1.1环境配置与基础架构1.2基础图表类型实战1.2.1折线图进阶1.2.2分组柱状图第二章：高阶可视化技术2.1子图矩阵与多面板布局2.2动态可视化与动画第三章：行业案例实战案例1：电商用户行为分析案例2：医疗影像数据可视化第四章：可视化美学与工程优化4.1配色方案实战4.2百万级数据渲染优化第五章：交互式扩展方案5.1Matplot
  • C#WPF的Style 中触发器Trigger详解 未来无限 C#WPF程序设计wpf模板styleTriggerC#触发器
    本文详解C#WPF的Style中触发器Trigger目录触发器概念基本Trigger多条件触发器MultiTrigger数据触发器DataTrigger多数据条件触发的MultiDataTrigger事件触发器EventTrigger触发器概念即当某些条件满足时会触发一个行为(比如某些值的变化或动画的发生等)。触发器比较像事件。事件一般是由用户操作触发的，而触发器除了有事件触发型的EventTri
  • WPF中依赖属性和附加属性 zzyzxb WPFwpf
    依赖属性（DependencyProperty）依赖属性是WPF中的一种特殊属性，它的实现依赖于DependencyObject类提供的基础设施。与普通的.NET属性不同，依赖属性的值可以通过多种方式确定，包括继承、样式、数据绑定和动画等。主要特点：值的多重来源：依赖属性的值可以来自于多种优先级不同的源，如本地值、样式、模板等。内存效率：依赖属性只有在值被显式设置时才会占用内存空间，否则使用元数据
  • 如何用DeepSeek做动画和视频 诸葛务农 后端深度学习
    1、DeepSeek本身不能生成视频需要结合其他AI工具如RunwayML、Pika、Labs、Sora（如果可用），或者传统软件如Blender、AdobeAfterEffects等。可以使用DeepSeek生成脚本、分镜描述或代码片段，用于其他工具的动画制作。还要注意使用友好型的AI工具，如使用Canva制作简单动画，或使用文本生成视频的工具如Synthesia。可能更适合没有专业背景的用户。
  • vue+three.js 加载fbx动画模型 资深前端之路 threeJsjavascriptvue.js前端
    嗨，我是小路。今天主要和大家分享的主题是“vue+three.js加载fbx动画模型”。在现代网页开发中，3D图形和动画的应用越来越广泛，从产品展示、虚拟展厅到游戏、教育等领域，三维技术正在不断刷新用户体验。而作为前端开发者，如何将高性能的3D动画无缝集成到Vue项目中？今天从网上找了一个fbx动画模型，然后将其加载出来，并让模型动起来。项目示意图1.FBXLoader加载器定义：主要用来加载fb
  • HarmonyOS应用开发进阶：ArkTS高效开发模式与工程实践 一键难忘 harmonyosHarmonyOS应用开发者
    文章目录HarmonyOS应用开发进阶：ArkTS高效开发模式与工程实践一、高级组件开发模式1.1自定义组合式组件二、网络通信与数据缓存2.1智能请求管理三、动态交互与动画引擎3.1手势驱动动画四、模块化工程架构4.1分层架构设计4.2动态模块加载五、多设备适配策略5.1响应式布局系统六、性能监测与优化6.1渲染性能分析七、测试与质量保障7.1自动化测试框架八、持续集成与部署8.1自动化构建流程结
  • UI前端与大数据的深度融合：打造智慧应用的新生态 前端开发与ui设计的老司机 ui前端大数据
    hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!在数字化转型的浪潮中，UI前端与大数据正逐渐成为推动智慧应用发展的核心力量。UI前端作为用户与应用程序交互的直接界面，负责提供直观、便捷且吸引人的用户体验；而大数据则凭借其强大的数据收集、分析和预测能力，为应用程序
  • 青少年编程与数学 02-022 专业应用软件简介 03 三维建模及动画软件：Autodesk Maya 明月看潮生 编程与数学第02阶段青少年编程maya编程与数学应用软件动画三维建模
    青少年编程与数学02-022专业应用软件简介03三维建模及动画软件：AutodeskMaya一、什么是三维建模二、什么是计算机动画三、三维建模及动画设计软件的发展历程（一）早期探索阶段（20世纪60年代-80年代）（二）初步发展阶段（20世纪80年代-90年代）（三）快速发展阶段（20世纪90年代-21世纪初）（四）多元化与整合阶段（21世纪初-至今）四、三维建模及动画设计软件主要产品（一）Aut
  • 从零开始：网页设计与制作基础全攻略
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、HTML——网页大厦的基石二、CSS——网页的美妆大师三、过渡和动画——让网页动起来四、原型设计与开发工具——设计师的左膀右臂五、案例分析——排雷避坑六、完整项目开发流程——步步为营前言在网页设计与制作的奇妙世界里，每一个页面都是设计师思想与技术碰撞的结晶。今天，咱们就来唠唠这其中的门道，不管你是初出茅庐的新手，还是想
  • iClone 中创建的面部动画导入 Daz 3D 子燕若水 3Ddaz3diclonecaoni
    以下是如何将iClone中创建的面部动画导入Daz3D的简要指南。简而言之，您可以通过FBX（使用3DXchange或CharacterCreator的导出工具）导出iClone面部动画，然后将其导入DazStudio并将变形或骨骼重新映射到Genesis角色上。其他流程包括使用MotionBuilder或带有Diffeomorphic附加组件的Blender作为中间步骤。1.Exportingf
  • Web Components 与 Shadow DOM 的样式隔离 海派程序猿 前端
    WebComponents和ShadowDOM：一墙之隔，天下太平？各位看官，咱们今天聊聊WebComponents里面一个挺有意思的概念——ShadowDOM。别被这名字吓到，什么“影子”，什么“领域”，听起来玄乎，其实它就是WebComponents实现样式隔离的一把利器。想象一下，你写了一个非常炫酷的日期选择器，用了自定义的颜色、字体，各种动画效果，简直完美！然后你把它扔到你的项目里，结果…
  • JS 与 CSS 的交互式开发：打造灵动的网页体验 维他奶糖61 pandas数据库前端
    在当今的网页开发领域，静态的网页早已无法满足用户日益增长的交互需求。JavaScript（JS）和层叠样式表（CSS）作为前端开发的两大支柱，它们的强强联合能够创造出令人惊叹的交互式网页效果。从简单的按钮点击变色，到复杂的动画过渡和动态页面布局变换，JS与CSS的交互式开发赋予了网页生命与活力。接下来，就让我们深入探索这一奇妙的领域。理解JS与CSS的分工与协作在开始交互式开发之前，我们需要明确J
  • android过渡动画 Sca_jie androidandroidnginx运维
    示例从左往右渐入渐出实现一在style文件中新建动画样式@anim/slide_in_right@anim/slide_out_left二在需要使用的地方调用这个style即可Dialogdialog=newDialog(this,android.R.style.Theme_Black_NoTitleBar_Fullscreen);dialog.setContentView(R.layout.di
  • 第二章、three.js开发入门与调试设置； 前端小砖er javascript开发语言ecmascript
    一、轨道控制器查看物体；1、基本概念轨道控制器（OrbitControls）可以使得相机围绕目标进行轨道运动；2、代码样例//七、创建轨道控制器（相机围绕着物体捕捉视角）constcontrols=newOrbitControls(camera,renderer.domElement,)functionrender(){renderer.render(scene,camera);//请求动画帧：渲
  • 学习三维动画心得 2501_92205961 开发语言青少年编程
    在大二学年的三维动画设计学习进程中，我围绕3dsMax和Blender两大核心软件展开深入钻研，并在此基础上探索技术应用与创新。不仅熟练掌握了基础操作，还深入到代码编写与复杂技术问题解决领域，逐步构建起系统的三维动画设计知识与技能体系，以下是详细的学习总结。一、3dsMax的深度学习与技术实践（一）高级建模与脚本优化在3dsMax的学习中，基础建模掌握后，我开始挑战高级建模技术。利用NURBS建模
  • 我的世界1.20.1forge模组开发进阶教程——Geckolib动画实体（3） lemon_sjdk java我的世界模组开发
    注意：本章涉及大量的geckolib底层代码，补充讲解了上一节没讲的，如果看不懂请去学习JavaGeoEntity////Sourcecoderecreatedfroma.classfilebyIntelliJIDEA//(poweredbyFernFlowerdecompiler)//packagesoftware.bernie.geckolib.animatable;importjavax
  • 鸿蒙 Swiper 组件解析：轮播交互与动画效果全指南 谢道韫689 鸿蒙自定义组件harmonyos交互华为
    一、引言：Swiper——动态轮播场景的核心解决方案在鸿蒙应用开发中，Swiper组件作为构建滑动轮播界面的核心容器，广泛应用于图片轮播、广告展示、多页内容切换等高频交互场景。自API7版本引入以来，其通过标准化的属性配置、丰富的动画效果及跨设备适配能力，成为开发者实现丝滑轮播体验的首选方案。从电商平台的首页Banner到新闻客户端的头条轮播，Swiper以简洁的接口实现了复杂的轮播逻辑，本文将系
  • 鸿蒙应用动画优化：流畅交互的实现方法 操作系统内核探秘 操作系统内核揭秘harmonyos交互华为ai
    鸿蒙应用动画优化：流畅交互的实现方法关键词：鸿蒙应用开发、动画优化、流畅交互、图形渲染、性能分析、VSYNC、GPU加速摘要：本文深入解析鸿蒙系统动画优化的核心技术，从动画渲染原理、性能瓶颈分析到具体优化策略，结合实战案例演示如何实现60FPS的流畅交互体验。通过剖析鸿蒙动画架构、输入处理机制和渲染管线，详细讲解帧率同步、资源调度、内存优化等关键技术，并提供基于ArkUI的代码实现和DevEcoP
  • 全局加载 loading-page 封装
    当窗口卡顿的或白屏的时候可以渲染一个loading动画，当页面恢复结束loading动画/***utils/loading-page.ts*全局加载loading-page*@methodstart创建loading*@methoddone移除loading*/exportconstloadingPage={//开始渲染loadingstart:()=>{//获取顶层body//将新创建的dc-l
  • 告别UI烦恼，效率飙升！Android UI宝藏库深度解析，让你的APP瞬间惊艳 wylee uiandroid
    前言：AndroidUI开发，你的痛点我懂！各位Android开发路上的朋友们，你们是否也曾被UI开发所困扰？重复造轮子？每次新项目，那些经典的加载动画、弹窗、导航栏，是不是都要从头开始写，或者在旧项目中翻箱倒柜？UI丑陋，缺乏美感？辛辛苦苦实现的功能，却因为UI不够精致，导致用户体验大打折扣，甚至被吐槽“像上个世纪的应用”？效率低下？为了实现一个酷炫的动画效果，不得不投入大量时间去学习复杂的动画
  • gsap动画库 请叫我斌哥哥 工具动画
    gsap动画库GSAP文档首先导入gsap动画库npmigsap-S安装好了在项目中引用importgsapfrom"gsap"普通的页面使用gsap.to('类名',{动画属性})//我们也可以使用时间线来写动画//创建一个时间线，然后再使用链式语法,做过视频剪辑的同学可能理解的更深vartl=gsap.timeline();tl.to(".box1",{rotation:27,x:100,du
  • 【高频考点精讲】前端动画库对比：GSAP、Anime.js和Motion One选型 全栈老李技术面试 前端高频考点精讲前端javascripthtmlcss面试题reactvue
    前端动画库三剑客：GSAP、Anime.js和MotionOne选型指南‍作者：全栈老李更新时间：2025年5月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端动画库这个事儿。作为"全栈老李"，我在项目里用过不少动画库，踩过坑也尝过甜头。现在市面上动画库五花八门，但真正能打的就那几个。今天重点说说GSAP、Anime.js和MotionOne这三个，帮你
  • react gsap动画库使用详解之scroll滑动动画 伍哥的传说 前端源码分享react.js前端前端框架vue.jsvue动画javascript
    简介gsap高性能的JavaScript动画库，在现代网页设计和开发中运用。安装npminstallgsapReact框架中使用可以考滤使用react-gsap-enhancer库，或者@gasp/react。类组件使用react-gsap-enhancer高阶组件，函数组件使用@gasp/react自定义Hook。npminstallreact-gsap-enhancer#oryarnaddre
  • Flutter 中封装 Dio 网络请求的详细步骤 Larry_zhang双栖 flutter
    在Flutter中，通过封装Dio网络请求，可以将请求、响应处理和错误处理的逻辑集中在一起，减少代码重复并提升代码的可维护性。我们将在RequestClient类中创建一个通用的请求方法，支持GET和POST请求，并结合EasyLoading和Lottie动画，实现更好的用户体验。步骤1：创建RequestConfig基础配置类首先定义请求的基本配置。RequestConfig类负责存放API的b
  • Python 运用 Matplotlib 绘制动画图的流程 Python编程之道 Python人工智能与大数据Python编程之道pythonmatplotlib开发语言ai
    Python运用Matplotlib绘制动画图的流程关键词：Python、Matplotlib、动画图、绘制流程、动画原理摘要：本文详细介绍了使用Python的Matplotlib库绘制动画图的完整流程。从背景知识入手，阐述了Matplotlib动画绘制的目的和适用读者群体，接着深入剖析了核心概念，包括动画的基本原理和架构。通过核心算法原理的讲解和Python源代码示例，展示了如何实现动画绘制。同
  • 使用CSS和HTML实现3D图片环绕效果 码力无边-OEC csshtml3dweb前端
    使用CSS和HTML实现3D图片环绕效果在本篇博客中，将介绍如何使用HTML和CSS实现一个3D图片环绕效果。这个效果不仅具有视觉吸引力，而且具有高度的互动性，鼠标悬停时动画会暂停。接下来将一步步讲解这个效果的实现过程。1.效果2.页面结构与布局首先，我们来看一下HTML的基本结构。该效果的核心是一个元素，它包含了多个图片的，每个div中都设置了不同的背景图片。HTML代码：3D图片环绕效果</
  • css同心圆扩散 weixin_43966308 css布局
    同心圆扩散要点：定位：每个圆形定位要相同，因为为了达到同心圆扩散的效果有一个定宽定高的圆形，剩下的圆形通过缩放和透明的改变而改变，因此必须保证定位的位置相同为了达到垂直居中的效果，可以通过transfrom(-50%,-50%),但是因为需要通过transfrom的缩放来达到扩散的效果，因此会发现之前水平垂直的效果没有达到，因为被动画中的trasnfrom缩放的语句覆盖了可以通过margin负值宽
  • css3 圆形水波纹特效 程序媛之博客 css3前端css
    需求描述：需要制作一个动画，特效从圆心开始往外扩散，然后又往回收。效果图：实现代码：.circle{width:100rpx;height:100rpx;background-color:#FF4C4C;border-radius:50%;/*圆形*/box-shadow:inset00010rpxrgba(255,255,255,0.5),/*内阴影，初始半透明圆*/inset00020rpxr
  • CSS实标题现同心圆的缩放 做一个暴躁的开发 css3html
    CSS实标题现同心圆的缩放最近学习了css动画效果，记录一下同心圆的缩放问题问题描述我先设置了两个div，外圈是class=“one”，内圈是class=“two”,代码如下：分别设置他们的div，给他们边框，并且设置成圆形.one{width:500px;height:500px;border:20pxsolidlightcoral;border-radius:50%;overflow:hidd
  • 创意Python爱心代码 卖血买老婆 Python专栏python开发语言
    目录一、用字符在控制台打印爱心图案1.1方法1：简单星号爱心说明1.2方法2：调整字符和形状二、turtle绘制爱心2.1turtle画心形及写字说明2.2动态跳动爱心三、用Matplotlib画心形曲线3.1标准心形曲线3.2LOVE动画心形（进阶）四、参数方程自定义爱心（数学美）心形参数方程公式五、更多创意：二维码嵌入、爱心表白墙六、总结完整参考目录用Python创意绘制爱心（Heart）的多
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他