相约在一年四季
相约在一年四季

CSS3 中3D转换--旋转正方体，滚动照片墙的写法

首先给父元素加两个属性，把父元素变成3D空间。
(1)transform-style:preserve-3d; （观察的场所 3D空间）
(2)perspective:1000px;（近大远小–景深prespective，元素距离观察点的距离也就是物体和眼睛的距离，通常在900-1200之间。）

然后利用3D转换的属性
transform


<html>
    <head>
        <meta charset="UTF-8">
        <title>立方体title>
        <style type="text/css">
            *{margin:0;padding:0;}
            li{list-style:none;}
            a{text-decoration:none;}
            @keyframes move{
                0%{transform: rotatey(0deg);}
                10%{transform: rotate(36deg);}
                20%{transform: rotatey(72deg);}
                30%{transform: rotate(108deg);}
                40%{transform: rotatey(144deg);}
                50%{transform: rotate(180deg);}
                60%{transform: rotate(216deg);}
                70%{transform: rotatey(252deg);}
                80%{transform: rotate(288deg);}
                90%{transform: rotatey(324deg);}
                100%{transform: rotate(360deg);}    
            }
            /*以上动画效果是旋转，至于如何旋转可以自己设计，你可以自己设计一个炫酷的效果*/
            .box{width:300px;height:300px;transform-style: preserve-3d;perspective: 1000px;margin: 50px auto;}
            ul{width:200px;height:200px;position: relative;transform-style: preserve-3d;margin: 50px auto;animation:move 15s linear infinite ;}
            ul li{width:200px;height:200px;background: #f00;position: absolute;top:0;left: 0;}
            /*以下为重点内容，重点在于每个面是如何进行转换的*/
            ul li:first-child{background: #f00;transform: translateZ(100px);}
/*将第一个面沿Z轴正方向（一般不沿着Z轴的负方向平移）（在正常情况下，Z轴永远朝着自己）平移100px，也就是向前平移100px，此面为面向自己的面*/
            ul li:last-child{background: #00f;transform:rotateY(180deg) translateZ(100px);}
/*将最后一个面旋转180度，然后Z轴就反过来了（在正常情况下，Z轴永远朝着自己）而现在Z轴反过来，Z轴就背对着自己，也就是向后平移100px，此面为后面的面*/
            ul li:nth-child(2){background:#ff0;transform:rotateY(90deg) translateZ(100px);}
/*将第二个面沿Y轴旋转90度，旋转后z轴方向向左，然后再沿Z轴正方向平移100px,此面是左边的面，*/
            ul li:nth-child(3){background: #0f0;transform:rotateY(-90deg) translateZ(100px);}}
/*同理，将第三个面沿Y轴旋转-90度，旋转后z轴方向向右，然后再沿Z轴正方向平移100px,此面是右边的面，*/
            ul li:nth-child(4){background: #f0f;transform:rotateX(90deg) translateZ(100px);}}
/*将第四个面沿X轴旋转90度，旋转后z轴方向向下，然后再沿Z轴正方向平移100px,此面是下边的面，*/
            ul li:nth-child(5){background: #0ff;transform:rotatex(-90deg) translateZ(100px);}
/*将第五个面沿X轴旋转-90度，旋转后z轴方向向上，然后再沿Z轴正方向平移100px,此面是上边的面，*/
        style>
    head>
    <body>
        <div class="box">
        <ul>
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
            <li>6li>
        ul>
        div>
    body>
html>

下面是滚动照片墙案例；
原理相同先旋转角度后再平移。
以下是源代码


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            li{list-style: none;}
            a{text-decoration: none;}
            img{display: block; border:0;}
            @keyframes move{
                0%{transform: rotateY(0deg);}
                10%{transform: rotateY(36deg);}
                20%{transform: rotateY(72deg);}
                30%{transform: rotateY(108deg);}
                40%{transform: rotateY(144deg);}
                50%{transform: rotateY(180deg);}
                60%{transform: rotateY(216deg);}
                70%{transform: rotateY(252deg);}
                80%{transform: rotateY(288deg);}
                90%{transform: rotateY(324deg);}
                100%{transform: rotateY(360deg);}   
            }

            .box{width: 300px;height:300px;transform-style: preserve-3d; perspective: 1000px;margin:100px auto;}
            ul{width:200px;height:200px;position: relative;transform-style: preserve-3d;margin:100px auto;animation: move 20s linear infinite;transform: rotateX(30deg);}
            ul li{width:100px;height:200px;overflow: hidden;position: absolute;top:0;left: 0; overflow: hidden;transition: 1s all ease;}
            ul li img{width:100px;height:200px;}
            ul li:hover img{width:120px;height:220px;}
            ul li img{width:100px;height:200px;}

            ul li:nth-child(1){transform: rotateY(30deg) translateZ(200px);}
            ul li:nth-child(2){transform: rotateY(60deg) translateZ(200px);}
            ul li:nth-child(3){transform: rotateY(90deg) translateZ(200px);}
            ul li:nth-child(4){transform: rotateY(120deg) translateZ(200px);}
            ul li:nth-child(5){transform: rotateY(150deg) translateZ(200px);}
            ul li:nth-child(6){transform: rotateY(180deg) translateZ(200px);}
            ul li:nth-child(7){transform: rotateY(210deg) translateZ(200px);}
            ul li:nth-child(8){transform: rotateY(240deg) translateZ(200px);}
            ul li:nth-child(9){transform: rotateY(270deg) translateZ(200px);}
            ul li:nth-child(10){transform: rotateY(300deg) translateZ(200px);}
            ul li:nth-child(11){transform: rotateY(330deg) translateZ(200px);}
            ul li:nth-child(12){transform: rotateY(0deg) translateZ(200px);}    
        style>
    head>
    <body>
        <div class="box">
            <ul>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
                <li><a href="#"><img src="img/hai.png"/>a>li>
            ul>
        div>
    body>
html>

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

  • html animation 属性,css3学习--css3动画详解一(animation属性） 蜗牛老湿 htmlanimation属性
    ***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
  • css3动画延迟运行 animation-delay 努力，加油，奋斗 笔记
    1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
  • Html、Css3动画效果 蔚一 htmlcss3前端
    文章目录第九章动画9.1transform动画9.2transition过渡动画9.3定义动画第九章动画9.1transform动画transform2D变形translate()：平移函数，基于X、Y坐标重新定位元素的位置scale()：缩放函数，可以使任意元素对象尺寸发生变化rotate()：旋转函数，取值是一个度数值skew()：倾斜函数，取值是一个度数值div{transform:tran
  • CSS特效——图标图片悬浮旋转一周 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效——图标图片悬浮旋转一周引言基本概念CSS3动画基础示例一：简单的无限循环旋转HTML结构CSS样式代码解释示例二：添加延迟和方向控制CSS样式代码解释示例三：使用伪元素增强视觉效果CSS样式代码解释示例四：结合过渡效果CSS样式代码解释示例五：响应式设计CSS样式代码解释功能使用思路思路一：结合JavaScript控制动画思路二：利用数据属性动态设置动画思路三：多图标同步动画实际开发中
  • CSS3动画——飞行的小精灵 懒羊羊大王呀 css3css3css前端
    CSS3动画——飞行的小精灵今天的这段代码通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。效果如下：（视频正在审核）源代码如下：飞行的小精灵*{padding:0;margin:0;}body{background-color:rgb(15,17,29);width:100%;overflow:hidden;}div{width:150p
  • 520表白html5爱心代码 youyouxiong html5css前端
    在HTML5中创建一个带有爱心动画的表白页面，可以通过结合CSS3动画和JavaScript来实现。以下是一个简单的示例代码，展示了如何制作一个带有动态爱心效果的表白页面：520表白@keyframesheartBeat{0%{transform:scale(1);}25%{transform:scale(1.1);}50%{transform:scale(1);}75%{transform:sc
  • css3夜晚星空 苦逼的猿宝 html+csscss3前端css
    css3动画*{margin:0;padding:0;}.container{width:100vw;height:100vh;background-color:#000;}.moon{width:100px;height:100px;border-radius:50%;background-color:#F5FFFA;box-shadow:0060px#F5FFFA;position:absol
  • CSS3新特性和CSS3动画 css3
    CSS3的新特性1.选择器：（1）属性选择器：[属性名][属性名=属性值][属性名^=属性值][属性名$=属性值][属性名*=属性值]（2）伪类选择器：为特定状态的元素添加样式，例如:hover、:active、:visited。（3）伪元素选择器：选择特定部分的元素，例如::before、::after。（4）多重选择器：使用逗号分隔来同时选择多个元素，例如element1,element2。2
  • css+动画优化,css3动画性能优化--针对移动端卡顿问题 影子的覆盖 css+动画优化
    一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为.png或者.jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API(依靠事件和定时器更新)；由于在canvas上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。2.cs
  • Nextjs styled-jsx animation aibinMr
    Nextjs自带的styled-jsx（v3.2.1）可能是不支持css3动画中@keyframes，多次尝试失败，现在采用把@keyframes写入css文件中，通过页面入口引入，（注意，在组件内部使用Head组件会编译出错）importReactfrom'react'importHeadfrom'next/head'classIndexextendsReact.Component{render
  • 用HTML5实现动画 软件技术爱好者 JavaScrip技术HTML5与CSS3html5前端
    用HTML5实现动画要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。一、CSS动画CSS3动画：使用CSS3的动画属性和关键帧（keyframes）来创建动画效果。通过定义动画的开始状态、结束状态和过渡效果，可以实现平滑的动画效果。先看一个简单的例子：在HTML5中用CSS3实现简单动画.box{
  • [HTML]Web前端开发技术23（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用,animation,text-shadow,word-wrap——喵喵画网页 猫佛 喵喵画网页html前端html5计算机学习javascriptcss3
    希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言CSS3动画animationCSS3动画animation子属性设置CSS3多列属性CSS3文本效果1．文本阴影text-shadow属性2．文本换行text-wrap属性3．控制换行word-wrap属性4．文本溢出text-overflow属性
  • [HTML]Web前端开发技术22（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，animation ，@keyframes，Transition——喵喵画网页 猫佛 喵喵画网页html前端html5计算机学习javascriptcss3
    希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言CSS3转换transform属性2．CSS33D转换CSS3过渡transition属性Transition子属性设置语法CSS3动画animation1．CSS3动画animation基本语法2．@keyframes规则定义总结前言冲冲冲！！！C
  • 解决css3卡顿和性能优化 zz77zz
    今天遇到一个比较棘手的问题css3的动画卡顿比较厉害于是找各种方法并一一去试学会简单的处理方法和部分渲染原理是否启用硬件加速GPU(GraphicsProcessingUnit)?“用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能导致后者。开启硬件加速在webkit中有神奇的万金油：opacity:1;或者-webkit-backface-visibility:hidden;。尽
  • 03-HTML5&CSS3 璐璐熙可
    课程目标:HTML5新标签与特性新增表单属性多媒体标签熟练掌握CSS3选择器熟练掌握CSS3过渡熟练掌握CSS3转换熟练掌握CSS3动画熟练掌握CSS3布局文档类型设定documentHTML5sublime输入html:5字符设定：HTML与XHTML中建议这样去写：HTML5的标签中建议这样去写常用新标签w3c手册中文官网:http://w3school.com.cn/header：定义文档的
  • CSS 2D转换 3D动画 3D转换 爱踢粪球的虫 css前端
    目录2D转换(transform):移动translate:旋转rotate:缩放scale：CSS3动画（transform）：动画常用的属性：将长图片利用盒子实现动画的效果：3D转换：透视perspective：旋转rotate3d：3D呈现transform-style：2D转换(transform):2d转换的综合写法：注意：先旋转和位移，有影响最终位置效果。移动translate:tra
  • CSS3 Mon trésor.88 css3前端javascript
    目录二，CSS32D转换3，缩放-scale图片放大案例：案例：分页按钮：2D转换综合写法：三，CSS3动画1，页面一打开，一个盒子从左边走到右边：2，/*动画序列*/：3，动画常用属性：编辑4，热点图案例：5，速度曲线之steps步长：案例：奔跑的熊大四，CSS33D转换三维坐标系！！！！：1，3D位移：translate3d（x,y,z）2，3D旋转：rotate3d(x,y,z)3，透视：p
  • 绘制太极图（CSS） 万物之恋 html+css+js习题集csshtmlcss3
    绘制太极图（CSS）预览图思路html布局代码部分CSS样式部分Hello！大家好，这里是万物之恋。今天给大家带来的是CSS3动画制作一个旋转的太极图案。预览图貌似有些卡顿是录制软件的锅。。。思路先在页面中绘制出一个大的白色圆形，再将其分为两个一黑一白的半圆。然后各自延伸出一个大小适合的同颜色小圆，里面居中绘制一个对立颜色的中心圆，最后利用css3动画让其旋转。html布局代码部分CSS样式部分.
  • 跟着pink老师前端入门教程-day17 axiu呀 前端自学前端开发语言html5css3学习
    2、CSS3动画动画（animation）是CSS3中就要有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果2.1动画的基本使用制作动画分为两步1.先定义动画2.再使用（调用）动画1.1用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{width:100px;}10
  • html 实现页面加载进度,网页加载进度条实现方案 小狐狸的帽子123 html实现页面加载进度
    原标题：网页加载进度条实现方案这次源码时代H5学科老师跟大家一起来总结下在web应用中常见的加载进度条实现方案。随着html5的普及，各种css3动画及js特效在网页中也是层出不穷，PC端加载数据的速度还是比较快的，但是对于移动端设备而言则相对要慢不少，如果图片或者脚本没有加载完，用户在操作中就可能发生各种问题，因此我们需要对数据加载进行侦测，以更加人性化的方法将网页程序内容展现给用户，实现更佳的
  • animate.css Daeeman
    animate.css–齐全的CSS3动画库演示下载简介animate是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达60多种动画效果，几乎包含了所有常见的动画效果。虽然借助animate.css能够很方便、快速的制作CSS3动画效果，
  • css3（过渡和动画） 种一棵树吧 前端css3
    html和css的基础知识内容就正式结束啦！下面是css3内容篇记得上次发过接着更新过渡与动画概念理解css3过渡化用菜鸟教程的说法，CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1.指定要添加效果的CSS属性。2.指定效果的持续时间。css3动画化用菜鸟教程的说法，CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新
  • css3中的动画特效--跳动的篮球 好喜欢前端 css3动画前端
    一.利用css3动画实现一个小球跳动效果CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展
  • CSS3动画的属性有哪些？ luocaihui css
    css3动画：animation特点：不需要事件触发，调用“关键帧”即可。关键帧：计算机动画术语，帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。制定关键帧第一种写法：@keyframe
  • CSS3动画产生圆圈由小变大向外扩散的效果 我小叮当还能说点啥cium
    CSS3动画产生圆圈由小变大向外扩散的效果涉及到CSS3的动画（animation）、2D转换（transform:scale），具体如代码所示。无标题文档@keyframeswarn{0%{transform:scale(0);opacity:0.0;}25%{transform:scale(0);opacity:0.1;}50%{transform:scale(0.1);opacity:0.3
  • WOW.js+animate.css让页面滚动时显示动画，使页面更有趣 AMONTOP
    官网：http://mynameismatthieu.com/WOW/bootstrapCDN服务：http://www.bootcdn.cn/wow/1.wow.js实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。2.Animate.css非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画使用方法1、引入文件2、HTML//可以加入data-wow-dur
  • day13 CSS3动画（animation） 亦昭昭 记录前端学习css3前端
    CSS3@keyframes规则@keyframes规则是创建动画，在该规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。animation：所有动画属性的简写属性。animation-name：规定@keyframes动画的名称。animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是0。animation-timing-function：规定动画的速度曲
  • 使用 SVG + CSS 实现动态霓虹灯文字效果 火锅小王子00
    使用SVG+CSS实现动态霓虹灯文字效果来源：segmentfault.com「React开发者」优达学城硅谷大学，提供Airbnb、Netflix的前端内容，中文项目审阅，立即抢座>>>早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：[图片上传失败...(image-df60b3-1512696500160)]刚开始以为是gif动画之类的，审查元素发现居然是用SVG+CSS3动画实现的
  • ng执行css3动画 一封未寄出的信rocky
    在组件html中侧边栏弹出侧边框隐藏侧边框显示与隐藏css中:#aside{width:200px;height:100%;position:absolute;right:0;top:0;background-color:#000;color:#fff;transform:translate(100%,0);transition:all2s}ts中showaside(){varasideDom:a
  • css3简单动画效果 海娩
    前记：嘤嘤嘤，原本是想写很多其他干货的笔记的。。然而，，看到css3动画就停不下来，哎，总是经不起诱惑，大概就是自己拿不到想要的offer的原因吧哭泣。。其他的笔记后来再补上吧来源：30SecondofCSS加载条之前呢，在做公司项目的时候，为了显示进度，需要有回调来显示进度，所以用js控制了这个css3，今天看到一个加载的，觉得实在是太简单了！！！！.donut{width:50px;heigh
  • 设计模式介绍 tntxia 设计模式
    设计模式来源于土木工程师 克里斯托弗 亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。 亚历山大与萨拉-石川佳纯和穆雷 西乐弗斯坦合作
  • android高级组件使用(一) 百合不是茶 androidRatingBarSpinner
    1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。 使用AutoCompleteTex
  • [网络与通讯]路由器市场大有潜力可挖掘 comsci 网络
              如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题.....        这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入  &nbs
  • 自写简单Redis内存统计shell 商人shang Linux shell统计Redis内存
    #!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem
  • 单例模式(饿汉 vs懒汉) oloz 单例模式
    package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《 懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva
  • springMvc json支持 杨白白 json springmvc
    1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() {
  • android播放，掃描添加本地音頻文件 小桔子
            最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，
  • oracle常用命令 aichenglong oracledba常用命令
    1 创建临时表空间 create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m  autoextend on  next 50m maxsize 20480m  extent management local
  • 25个Eclipse插件 AILIKES eclipse插件
    提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了
  • Spring MVC拦截器+注解方式实现防止表单重复提交 baalwolf spring mvc
    原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。   1.新建注解：   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  • 《Javascript高级程序设计(第3版)》闭包理解 bijian1013 JavaScript
    “闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》         看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f
  • AngularJS Module类的方法 bijian1013 JavaScriptAngularJSModule
            AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。 一.Main方法在哪里         如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所
  • [Maven学习笔记七]Maven插件和目标 bit1129 maven插件
    插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标   使用插件和目标使得我们可以干预
  • 【Hadoop八】Yarn的资源调度策略 bit1129 hadoop
    1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度   2. 多用户资源共享的调度
  • Nginx使用Linux内存加速静态文件访问 ronin47
    Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。 先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下：
  • 关于Unity3D中的Shader的知识 brotherlamp unityunity资料unity教程unity视频unity自学
    首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S
  • CopyOnWriteArrayList vs ArrayList bylijinnan java
    package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO
  • 内存中栈和堆的区别 chicony 内存
    1、内存分配方面：     堆：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收 。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。     栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中
  • 回答一位网友对Scala的提问 chenchao051 scalamap
    本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。 问题 写道 对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢    先回答一点，在实际使用中，Scala毫无疑问就是这么简单。
  • mysql 取每组前几条记录 daizj mysql分组最大值最小值每组三条记录
    一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a  WHERE 3> (SELECT COUNT(*) FROM  tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE
  • HTTP深入浅出 http请求 dcj3sjt126com http
      HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We
  • 判断MySQL记录是否存在方法比较 dcj3sjt126com mysql
    把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。 　　我这里总结了判断记录是否存在的常用方法： 　　sql语句： select   count ( * )  from  tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。
  • 对HTML XML的一点认识 e200702084 htmlxml
    感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 Node 层次
  • jquery分页插件 genaiwei jqueryWeb前端分页插件
    //jquery页码控件// 创建一个闭包    (function($) {      // 插件的定义      $.fn.pageTool = function(options) {        var totalPa
  • Mybatis与Ibatis对照入门于学习 Josh_Persistence mybatisibatis区别联系
    一、为什么使用IBatis/Mybatis         对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、
  • C中怎样合理决定使用那种整数类型？ 秋风扫落叶 c数据类型
    如果需要大数值(大于32767或小于32767), 使用long 型。 否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。 除此之外, 就使用 int 型。 如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。 但是, 要注意在表达式中混用有符号和无符号值的情况。    &nbs
  • maven问题 zhb8015 maven问题
      问题1： Eclipse 中 新建maven项目 无法添加src/main/java 问题    eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。     按照maven目录结构，添加src/main/ja
  • (二)androidpn-server tomcat版源码解析之--push消息处理 spjich javaandrodipn推送
    在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。 先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc
  • 用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题 中华好儿孙 JavaScriptAjaxWeb上传文件FormData
    var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca
  • mybatis常用jdbcType数据类型 ysj5125094 mybatismapperjdbcType
      MyBatis 通过包含的jdbcType 类型 BIT         FLOAT      CHAR          
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他