我我番茄仔仔
我我番茄仔仔

HTML5代码：超炫的粒子特效

今天在中国移动MM论坛HTML5跨平台开发讨论区看到一个不错的示例，分享给大家咯。展示一个使用HTML5的Canvas画布API制作的，具有响应鼠标动作的具有粒子特效的动画，丝毫不必flash效果差。
先来看下演示：
http://spielzeugz.de/html5/liquid-particles.html
在动画中间点击鼠标，左键按住不动，快速移动鼠标，都会出现意外的效果的 哈哈哈~
这个HTML5特效包括3部分代码，HTML部分，js部分和CSS部分，我分别给出源码的内容。
HTML5代码部分：
index.html

<!DOCTYPE html>

<html
lang="en">

<head>

<meta
charset=utf-8>

<title>粒子效果演示- www.lampbo.org canvas 教程 </title>

<meta
name="description"
content="HTML5/canvas demo, 500 particles to play around with."
/>

<meta
name="keywords"
content="html5,canvas,javascript,particles,interactive,velocity,programming,flash"
/>

<script
type="text/javascript"
src="liquid-particles.js"></script>

<link
rel="stylesheet"
type="text/css"
href="pages.css"
/>

</head>

<body>

<div
id="outer">

<div
id="canvasContainer">

<canvas
id="mainCanvas"
width="1000"
height="560"></canvas>

<div
id="output"></div>

</div>

</div>
</script>

</body>
</html>

这个HTML文档主要定义了Canvas标签
第二部分 liquid-particles.js


(function(){  

var PI_2        = Math.PI * 2;  

var canvasW     = 1000;  

var canvasH     = 560;  

var numMovers   = 600;  

var friction    = 0.96;  

var movers      = [];  

var canvas;  

var ctx;  

var canvasDiv;  

var outerDiv;  

var mouseX;  

var mouseY;  

var mouseVX;  

var mouseVY;  

var prevMouseX;  

var prevMouseY;  

var isMouseDown;  


function init(){  
        canvas = document.getElementById("mainCanvas");  


if ( canvas.getContext ){  
            setup();  
            setInterval( run , 33 );  
            trace('interact with the mouse, occasionally click or hold down the mousebutton<br>More here: <a href="http://www.lampbo.org/category/web-development/html">lampbo.org/html5</a>   |   Follow us on <a href="http://www.lampbo.org/" target="_blank">LAMPBO</a> or <a href="http://feed.feedsky.com/lampbo" target="_blank">FeedSky</a>');  
        }  

else{  
            trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");  
        }  
    }  


function setup(){  
        outerDiv  = document.getElementById("outer");  
        canvasDiv = document.getElementById("canvasContainer");  
        ctx       = canvas.getContext("2d");  

var i = numMovers;  

while ( i-- ){  

var m = new Mover();  
            m.x   = canvasW * 0.5;  
            m.y   = canvasH * 0.5;  
            m.vX  = Math.cos(i) * Math.random() * 34;  
            m.vY  = Math.sin(i) * Math.random() * 34;  
            movers = m;  
        }  

        mouseX = prevMouseX = canvasW * 0.5;  
        mouseY = prevMouseY = canvasH * 0.5;  

        document.onmousedown = onDocMouseDown;  
        document.onmouseup   = onDocMouseUp;  
        document.onmousemove = onDocMouseMove;  
    }  


function run(){  
        ctx.globalCompositeOperation = "source-over";  
        ctx.fillStyle = "rgba(8,8,12,0.65)";  
        ctx.fillRect( 0 , 0 , canvasW , canvasH );  
        ctx.globalCompositeOperation = "lighter";  

        mouseVX    = mouseX - prevMouseX;  
        mouseVY    = mouseY - prevMouseY;  
        prevMouseX = mouseX;  
        prevMouseY = mouseY;  


var toDist   = canvasW * 0.86;  

var stirDist = canvasW * 0.125;  

var blowDist = canvasW * 0.5;  

var Mrnd = Math.random;  

var Mabs = Math.abs;  

var i = numMovers;  

while ( i-- ){  

var m  = movers;  

var x  = m.x;  

var y  = m.y;  

var vX = m.vX;  

var vY = m.vY;  


var dX = x - mouseX;  

var dY = y - mouseY;   

var d  = Math.sqrt( dX * dX + dY * dY ) || 0.001;  
            dX /= d;  
            dY /= d;  


if ( isMouseDown ){  

if ( d < blowDist ){  

var blowAcc = ( 1 - ( d / blowDist ) ) * 14;  
                    vX += dX * blowAcc + 0.5 - Mrnd();  
                    vY += dY * blowAcc + 0.5 - Mrnd();  
                }  
            }  


if ( d < toDist ){  

var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;  
                vX -= dX * toAcc;  
                vY -= dY * toAcc;             
            }  


if ( d < stirDist ){  

var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * 0.00026;  
                vX += mouseVX * mAcc;  
                vY += mouseVY * mAcc;             
            }  

            vX *= friction;  
            vY *= friction;  


var avgVX = Mabs( vX );  

var avgVY = Mabs( vY );  

var avgV  = ( avgVX + avgVY ) * 0.5;  


if( avgVX < .1 ) vX *= Mrnd() * 3;  

if( avgVY < .1 ) vY *= Mrnd() * 3;  


var sc = avgV * 0.45;  
            sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );  


var nextX = x + vX;  

var nextY = y + vY;  


if ( nextX > canvasW ){  
                nextX = canvasW;  
                vX *= -1;  
            }  

else
if ( nextX < 0 ){  
                nextX = 0;  
                vX *= -1;  
            }  


if ( nextY > canvasH ){  
                nextY = canvasH;  
                vY *= -1;  
            }  

else
if ( nextY < 0 ){  
                nextY = 0;  
                vY *= -1;  
            }  

            m.vX = vX;  
            m.vY = vY;  
            m.x  = nextX;  
            m.y  = nextY;  

            ctx.fillStyle = m.color;  
            ctx.beginPath();  
            ctx.arc( nextX , nextY , sc , 0 , PI_2 , true );  
            ctx.closePath();  
            ctx.fill();       
        }  
    }  



function onDocMouseMove( e ){  

var ev = e ? e : window.event;  
        mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;  
        mouseY = ev.clientY - outerDiv.offsetTop  - canvasDiv.offsetTop;  
    }  


function onDocMouseDown( e ){  
        isMouseDown = true;  

return
false;  
    }  


function onDocMouseUp( e ){  
        isMouseDown = false;  

return
false;  
    }  



function Mover(){  

this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";  

this.y     = 0;  

this.x     = 0;  

this.vX    = 0;  

this.vY    = 0;  

this.size  = 1;   
    }  



function rect( context , x , y , w , h ){  
        context.beginPath();  
        context.rect( x , y , w , h );  
        context.closePath();  
        context.fill();  
    }  


function trace( str ){  
        document.getElementById("output").innerHTML = str;  
    }  

    window.onload = init;     
})(); 


最后一部分pages.css：



html, body {  

text-align: center;  

margin:0;  

padding:0;  

background: #000000;   

color: #666666;  

line-height: 1.25em;  
}         

#outer {  

position: absolute;  

top: 50%;  

left: 50%;  

width: 1px;  

height: 1px;  

overflow: visible;  
}         

#canvasContainer {   

position: absolute;  

width: 1000px;  

height: 560px;  

top: -280px;  

left: -500px;  
}  

canvas {   

border: 1px
solid
#333333;   
}  

a {  

color: #00CBCB;  

text-decoration:none;  

font-weight:bold;  
}  
a:hover {  

color:#FFFFFF;  
}  

#output {  

font-family: Arial, Helvetica, sans-serif;   

font-size: 0.75em;  

margin-top:4px;  
}  

#footer{  

font-size: 0.6em;  

font-family: Arial, Helvetica, sans-serif;  

position: absolute;  

bottombottom:8px;  

width:98%;  
}  


文章来源

 

你可能感兴趣的:(html5)

  • Web编辑器与Word文档的无缝对接技巧 全武凌(荆门泽优) 前端编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 针对Word文档，百度编辑器提供了哪些便捷的上传与粘贴功能？ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 大厂 H5 开发实战手册 人工智能_SYBH 课程推荐2025年前后端实战项目1024程序员节大厂H5开发实战手册
    京东凹凸实验室(Aotu.io，英文简称O2)，创立于2015年10月，为掘金最早一批联合编辑，拥有数千关注者。O2对内负责京东PC端首页、多个频道页、小程序版本京东购物、微信手Q京东购物、M端京东、各类营销活动场景HTML5活动等多个业务模块的前端开发工作，对外作为京东的多终端技术品牌一直活跃于掘金、GitHub等知名知识共享平台。O2官网：Aotu.io小册介绍这本小册
  • Canvas 示例：4种超炫的网站动画背景效果 「已注销」 前端css3html5canvas
    今天，我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势，已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中，在这里我们想向您分享几个使用JavaScript和Canvas创建不同页眉的动画示例。在线演示立即下载您可能感兴趣的相关文章网站开发中很有用的jQuery效果【附源码】分享35个让人惊讶的CSS3动画效果演示十分惊艳的8个HTML5&JavaS
  • Canvas渲染管线解析：从API调用到像素落地的全过程 沐土Arvin 信息可视化前端javascripthtmlcss
    1.Canvas基本定义★了解Canvas是HTML5提供的一个通过JavaScript来绘制图形的元素。它提供了一个空白的绘图区域，开发者可以使用JavaScript脚本在其中绘制各种图形、动画、游戏画面等。2.Canvas使用场景★了解数据可视化：绘制图表、图形等游戏开发：HTML5游戏图像处理：滤镜、像素操作动画效果：创建动态视觉效果交互式图形：绘图应用、设计工具教育演示：数学函数可视化等3
  • 分享一个让 uniapp 微信小程序支持 EventSource 的方法 魔众 uni-app微信小程序notepad++
    微信小程序不支持EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。一个替代实现方式c
  • java数据透视表插件_纯前端表格控件SpreadJS：新增数据透视表插件等，完美呈现强大的Excel数据分析能力... 天生双下巴 java数据透视表插件
    SpreadJS是一款基于HTML5的纯前端电子表格控件，兼容450种以上的Excel公式，凭借其“高性能、跨平台、与Excel高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。新版本特性:新增数据透视表插件，拥有强大的Excel数据分析能力在线表格编辑器(控件版)：更易嵌入、秒级加载、灵活定制新增迭代计算功能，可实现高精度计算支持渐进加载、HTML导出支持渐进填充、多列
  • 百度UE（编辑器）如何高效导入Word文档中的图片？ 2501_90699850 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • html初学 wgego html前端
    一.什么是HTMLHTML是用来描述网页的一种语言。HTML指的是超文本标记语言:HyperTextMarkupLanguageHTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页HTML文档包含了HTML标签及文本内容HTML文档也叫做web页面声明为HTML5文档元素是HTML页面的根元素元素包含了文档的元（meta）数据，如定义
  • HTML/CSS笔记 可能是小李吧 学习笔记csshtml
    思维导图HTML网页的基本结构文档声明，声明当前文档版本迭代网页的版本HTML4XHTML2.0HTML5...文档说明文档说明用来告诉浏览器当前的版本进制二进制十进制八进制十六进制字符编码所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读解码将二进制码转换为字符的过程称为解码
  • 22、web前端开发之html5（三） 跟着汪老师学编程 前端html5
    六.离线存储与缓存在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍ApplicationCache、localStorage、sessionStorage以及IndexedDB等技术，帮助你理解如何在不同场景下选择合适的存储和缓存策略。1、ApplicationCacheApplicati
  • 如何在网页编辑器中使用KindEditor导入Excel文件？ 2501_90699640 编辑器excelumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：KindEditor前端：vue2,vue3,react,vue-cli,html5,后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows
  • “网页编辑器新技能：UMEDITOR的WORD、PDF导入解决方案？“ weixin_52041354 编辑器wordpdfumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度UM编辑器能否支持粘贴WORD文档并自动上传图片？“ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度富文本编辑器（UMEDITOR）如何高效导入WORD内容？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “如何通过UMEDITOR将WORD文档中的图片无缝复制到网页？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • Godot引擎开发：Godot基础入门_发布与分发 chenlz2007 游戏开发godot游戏引擎性能优化网络nginx
    发布与分发在完成游戏开发后，发布和分发游戏是将您的作品展示给玩家的最后一步。Godot引擎提供了多种发布平台，包括Windows、macOS、Linux、HTML5、Android和iOS。本节将详细介绍如何在Godot引擎中准备和发布游戏，涵盖以下内容：项目设置导出模板导出设置导出游戏签名与分发部署到不同平台1.项目设置在发布游戏之前，首先需要确保项目的设置正确无误。项目设置包括但不限于标题、图
  • 探索HTML5 Canvas：创造动态与交互性网页内容的强大工具 qq39138814 html5前端html
    探索HTML5Canvas：创造动态与交互性网页内容的强大工具引言在HTML5的众多新特性中，Canvas无疑是最引人注目的元素之一。它为网页设计师和开发者提供了一个通过JavaScript和HTML直接在网页上绘制图形、图像以及进行动画处理的画布。Canvas的灵活性和强大功能，使得它成为创造动态、交互性网页内容的首选工具。本文将深入探讨HTML5Canvas的基本用法、应用场景以及如何利用它来
  • HTML5大文件分片上传/多线程上传 aryasei html5前端html
    HTML5大文件分片上传/多线程上传前端实现浏览器端大文件分片上传,VUE大文件上传和断点续传的实现，VUE–实现文件的上传-字节流下载详细过程，VUE实现大文件分片上传与断点续传到七牛云，VUE.JS实现大文件分片MD5断点续传，大文件、视频分片上传，断点续传，VUE大文件分片上传/多线程上传，大文件传输解决方案：分片上传/下载限速，原生JS上传大文件分片，浏览器批量大文件上传下载，VUE项目性
  • 深入理解 HTML5 Web Workers：提升网页性能的关键技术解析 梦想家星空 前端html5html
    深入理解HTML5WebWorkers：提升网页性能的关键技术解析引言1.什么是WebWorkers？WebWorkers的特点：2.WebWorkers的使用方式2.1创建一个WebWorker步骤1：创建Worker文件步骤2：在主线程中调用Worker3.WebWorkers的高级应用3.1使用`Blob`方式创建Worker3.2终止Worker4.WebWorkers的应用场景示例：计算
  • Vscode HTML5新增元素及属性 凌冰_ Vscodehtml5前端html
    一、‌HTML5语义化标签HTML5语义化标签（SemanticElements）是一组‌具有明确含义的HTML元素‌，通过标签名称直接描述其内容或结构的功能，而非仅作为样式容器（如或）。它们旨在‌提升网页内容对机器（搜索引擎、屏幕阅读器）和开发者的可读性‌，同时规范化页面结构的表达方式。标签‌‌完整定义‌‌典型使用场景‌‌‌定义文档或内容区块的头部区域，包含标题、导航、标志等。页面顶部导航栏、文
  • HTML5前端第六章节 NaZiMeKiY HTML5html5前端html1024程序员节
    一.标准流，浮动，flex布局1.标准流概念：标准流又叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个等等排布规则2.浮动（1）.作用：让块元素水平排列（2）.属性名：float（3）.属性值：left（左对齐），right（右对齐）.test_one{width:300px;height:300px;background-color:blueviolet;
  • HTML5 drag属性 庆新酱 html
    HTML5drag属性想要对某个元素拖拽，需要首先给元素加上draggable=“true”，默认a标签和img是可以拖动的。1.拖动事件事件分为两类：一被拖动的元素上的事件，二被放置的位置接收到的事件。一、发生在被拖动的元素上的事件事件名触发时机触发次数dragstart当拖动开始时（按下鼠标键并开始移动）触发一次1drag拖动开始后触发，在元素拖动期间会持续触发ndragend拖动结束（释放鼠
  • HTML5 Audio（音频）学习笔记 齐尹秦 HTML学习笔记html5音视频学习
    一、HTML5音频简介HTML5引入了元素，用于在网页中播放音频文件。这使得音频的嵌入变得更加简单和标准化。在HTML5之前，大多数音频是通过插件（如Flash）来播放的，但这种方式存在兼容性问题，因为并非所有浏览器都支持相同的插件。HTML5的元素为音频播放提供了一种标准方法。二、浏览器支持情况InternetExplorer9+、Firefox、Opera、Chrome和Safari都支持元素
  • HTML5 Geolocation（地理定位）学习笔记 齐尹秦 HTML学习笔记html5学习笔记
    一、HTML5Geolocation简介HTML5Geolocation（地理定位）API用于获取用户的地理位置信息。通过这个API，可以获取用户的纬度、经度、海拔等信息。由于地理定位可能涉及用户隐私，因此只有在用户同意的情况下，才能获取其位置信息。GeolocationAPI支持以下浏览器：InternetExplorer9+FirefoxChromeSafariOpera对于拥有GPS的设备（
  • wangEditor能否支持网页直接导入EXCEL文件？操作步骤是什么？ 2501_90694782 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 探索音乐之美：APlayer - 超可爱的HTML5音乐播放器 强和毓Hadley
    探索音乐之美：APlayer-超可爱的HTML5音乐播放器APlayer:lollipop:Wow,suchabeautifulHTML5musicplayer项目地址:https://gitcode.com/gh_mirrors/ap/APlayer在寻找一个既美观又功能齐全的HTML5音乐播放器吗？APlayer，以其小巧可爱的设计和强大的功能，无疑是您的理想选择。这个开源项目将为您带来前所未
  • 深入理解 HTML5 Web Workers：提升网页性能的关键技术解析 A-Kamen 前端html5html
    深入理解HTML5WebWorkers：提升网页性能的关键技术解析引言1.什么是WebWorkers？WebWorkers的特点：2.WebWorkers的使用方式2.1创建一个WebWorker步骤1：创建Worker文件步骤2：在主线程中调用Worker3.WebWorkers的高级应用3.1使用`Blob`方式创建Worker3.2终止Worker4.WebWorkers的应用场景示例：计算
  • html5炫酷3D数字时钟项目开发实践 木木黄木木 html5前端html53d前端
    炫酷3D数字时钟项目开发实践这里写目录标题炫酷3D数字时钟项目开发实践项目概述技术栈核心技术实现1.3D翻转效果实现2.数字显示与翻转动画3.霓虹灯发光效果4.时间更新逻辑技术难点与解决方案1.3D翻转动画的流畅性2.数字更新的同步性3.发光效果的性能优化项目总结项目改进方向项目概述这是一个基于HTML5、CSS3和JavaScript实现的3D数字时钟项目。项目的主要特点是通过3D翻转动画来展示
  • 有哪些使用 DHTMLX 小部件创建 JavaScript 数据透视网格的关键点？ CodeCraft Studio UI控件javascript数据分析ui
    Capterra最新的技术趋势调查将数据管理列为金融企业在采用新软件解决方案时面临的主要挑战之一。现成的工具可能不够灵活，无法满足特定要求。因此，组织考虑投资定制解决方案（如数据透视表）来满足其数据管理和分析需求是合理的。DHTMLX专注于JavaScript和HTML5UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和
  • 分享100个最新免费的高匿HTTP代理IP mcj8089 代理IP代理服务器匿名代理免费代理IP最新代理IP
      推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/     120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/
  • mysql高级特性之数据分区 annan211 java数据结构mongodb分区mysql
    mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理 分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层 表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是
  • JS采用正则表达式简单获取URL地址栏参数 chiangfai js地址栏参数获取
    GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null
  • 怎样将数据表拷贝到powerdesigner (本地数据库表) Array_06 powerDesigner
    ================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自
  • logbackのhelloworld 飞翔的马甲 日志logback
    一、概述 1.日志是啥？ 当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。 这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。 传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作
  • 新浪微博爬虫模拟登陆 随意而生 新浪微博
    转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235     近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。      现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求
  • synchronized 香水浓 javathread
        Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然
  • maven 简单实用教程 AdyZhang maven
    1. Maven介绍  1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源 见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo
  • Android 通过 intent传值获得null aijuans android
    我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){            Intent i =
  • apache 做代理 报如下错误：The proxy server received an invalid response from an upstream baalwolf response
    网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr
  • Tomcat6 内存和线程配置 BigBird2012 tomcat6
    1、修改启动时内存参数、并指定JVM时区 （在windows server 2008 下时间少了8个小时） 在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数：  window下， 在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5
  • Karam与TDD bijian1013 KaramTDD
    一.TDD         测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。         TDD的原则很简单： a.只有当某个
  • [Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States bit1129 zookeeper
    public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在
  • 【Scala十四】Scala核心八：闭包 bit1129 scala
    Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x
  • android发送json并解析返回json ronin47 android
    package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import
  • 一份IT实习生的总结 brotherlamp PHPphp资料php教程php培训php视频
    今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来
  • 据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 将重物放到天平左侧，问在两边如何添加砝码 bylijinnan java
    public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 （假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202
  • dom4j最常用最简单的方法 chiangfai dom4j
    要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要
  • 简单HBase笔记 chenchao051 hbase
     一、Client-side write buffer 客户端缓存请求 描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。 可以使用getWriteBuffer()方法来取得客户端缓存中的数据。 默认关闭。 二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使
  • mysqldump导出时出现when doing LOCK TABLES daizj mysqlmysqdump导数据
    　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　 导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决
  • CSS渲染原理 dcj3sjt126com Web
      从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？          一、浏览器的发展与CSS           
  • 《阿甘正传》台词 dcj3sjt126com
    Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol
  • Java处理JSON dyy_gusi json
    Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。 在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args)
  • win7下nginx和php的配置 geeksun nginx
    1.  安装包准备 nginx :  从nginx.org下载nginx-1.8.0.zip php： 从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口   2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p
  • 基于2.8版本redis配置文件中文解释 hongtoushizi redis
    转载自： http://wangwei007.blog.51cto.com/68019/1548167        在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文
  • 第五章 常用Lua开发库3-模板渲染 jinnianshilongnian nginxlua
    动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。   如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r
  • JZSearch大数据搜索引擎 颠覆者 JavaScript
    系统简介： 大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引
  • 10招让你成为杰出的Java程序员 pda158 java编程框架
    如果你是一个热衷于技术的  Java 程序员， 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。 　　 1. 拥有扎实的基础和深刻理解 OO 原则 　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言
  • tomcat之oracle连接池配置 小网客 oracle
    tomcat版本7.0 配置oracle连接池方式： 修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou
  • Oracle 分页算法汇总 vipbooks oraclesql算法.net
        这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他