css3 走马灯效果

纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：

css3 走马灯效果

主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：

首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：

 css3 走马灯效果

红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可，所有的面均通过偏移和旋转的方式达到上图的结构，需要注意的是要保证有图案的面（本例中使用的是文字，思路一致）要向外，比如上面中间的面，在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°，所有的面同理易得。在此过程中需要牢记的一点技术是：三维坐标系中，从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。

设置结构：一个3D场景、一个走马灯的旋转面和走马灯的六个面：

<div class="wapper">        <!--场景-->

    <div class="rotate">   <!--容器-->

        <div class="item itemOne">1</div>  <!--六个面-->

        <div class="item itemTwo">2</div>

        <div class="item itemThree">3</div>

        <div class="item itemFour">4</div>

        <div class="item itemFive">5</div>

        <div class="item itemSix">6</div>

    </div>        

</div>

设置3D场景：

.wapper{

    -webkit-perspective:800;    /*观察距离800*/

    -webkit-perspective-origin:50% -100%;    /*从正前方上方斜向下观察*/

    width:400px;

    height:300px;

    margin:100px auto;

}

 设置旋转面：

@-webkit-keyframes rotation{      /*动画过程*/

    0%{-webkit-transform:rotateY(0deg);}    

    100%{-webkit-transform:rotateY(-360deg);}

}

.rotate{

    -webkit-transform-style:preserve-3d;     /*3D变换*/

    -webkit-animation: rotation 6s infinite;  /*动画名称、时间、循环动画*/

    -webkit-animation-timing-function: linear;  /*匀速动画*/

    -webkit-transform-origin:center;      /*沿中间旋转*/

    width:100%;

    height:100%;

    position:relative;   /*相对定位布局*/

}

对六个面除了位置之外的通用样式做设置：

.item{

    -webkit-transform-origin:center;  /*均沿中心旋转*/

    width:198px;

    height:300px;

    position:absolute;   /*绝对定位在旋转面上*/

    background:none;

    text-align:center;

    line-height:300px;

}

分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：

.itemOne{

    left:-50px;

    -webkit-transform:translateZ(87px) rotateY(-60deg);  /*z轴向外移动87px，沿Y轴方向旋转-60°*/

    background:#f00;

}

在鼠标悬浮在该结构上时动画停止：

.rotate:hover{

    -webkit-animation-play-state:paused;  /*设置动画状态*/

}

本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Animation Test</title>

    <style>

    *{margin:0;padding:0;}

    @-webkit-keyframes rotation{    

        0%{-webkit-transform:rotateY(0deg);}    

        100%{-webkit-transform:rotateY(-360deg);}

    }

    .wapper{

        -webkit-perspective:800;

        -webkit-perspective-origin:50% -100%;

        width:400px;

        height:300px;

        margin:100px auto;

    }

    .rotate{

        -webkit-transform-style:preserve-3d;

        -webkit-animation: rotation 6s infinite;

        -webkit-animation-timing-function: linear;

        -webkit-transform-origin:center;

        width:100%;

        height:100%;

        position:relative;

    }

    .item{

        -webkit-transform-origin:center;

        width:198px;

        height:300px;

        position:absolute;

        background:none;

        text-align:center;

        line-height:300px;

    }

    .itemOne{

        left:-50px;

        -webkit-transform:translateZ(87px) rotateY(-60deg);

        background:#f00;

    }

    .itemTwo{

        left:100px;

        -webkit-transform:translateZ(173px);

        background:#ff0;

    }

    .itemThree{

        left:250px;

        -webkit-transform:translateZ(87px) rotateY(60deg);

        background:#0ff;        

    }

    .itemFour{

        left:250px;

        -webkit-transform:translateZ(-87px) rotateY(120deg);    

        background:#0f0;

    }

    .itemFive{

        left:100px;

        -webkit-transform:translateZ(-173px) rotateY(180deg);

        background:#0ff;

    }

    .itemSix{

        left:-50px;

        -webkit-transform:translateZ(-87px) rotateY(-120deg);

        background:#00f;

    }

    .rotate:hover{

        -webkit-animation-play-state:paused;

    }

    </style>

</head>

<body>

    <div class="wapper">

        <div class="rotate">

            <div class="item itemOne">1</div>

            <div class="item itemTwo">2</div>

            <div class="item itemThree">3</div>

            <div class="item itemFour">4</div>

            <div class="item itemFive">5</div>

            <div class="item itemSix">6</div>

        </div>        

    </div>

</body>

</html>

 

你可能感兴趣的:(css3)

  • 前端面试题 大大。 前端vue.jsjavascript
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
  • 揭秘前端 CSS3 字体特效的实现方法
    #揭秘前端CSS3字体特效的实现方法>关键词：CSS3、字体特效、text-shadow、@font-face、font-feature-settings、动画效果、Web字体>摘要：本文通过生活化的比喻和实战案例，深入解析CSS3实现字体特效的核心技术。从基础文字阴影到高级字体动画，揭秘7种酷炫效果实现原理，并提供可直接复用的代码模板。##背景介绍###目的和范围本文系统讲解CSS3实现字体特效
  • CSS3文本阴影特效全攻略
    CSS3文本阴影效果实现下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。设计思路创建具有视觉吸引力的标题区域提供多种文本阴影效果实例显示对应的CSS代码以供参考添加交互元素让用户自定义效果实现代码CSS3文本阴影效果大全*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'OpenSans',sa
  • 伪类选择器:root的妙用 weixin_33921089 javascriptViewUI
    css3的元素旋转功能非常强大，也非常吸引人，但是很多时候因为浏览器使用率的问题，我们必需要想办法兼容一些低版本的浏览器，特别是ie这朵奇葩。想要实现元素旋转本来很简单的一个属性就能实现，那就是transform:rotate(xxdeg)。举个例子：实现一个层旋转270deg。#demo{width:300px;height:200px;background-color:#FF80C0;marg
  • 【CSS3】 结构性伪类选择器—root badlyForPapers
    :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。示例演示：通过“:root”选择器设置背景颜色HTML代码：:root选择器的演示CSS代码：:root{background:orange;}演示结果：“:root”选择器等同于元素，简单点说：:root{background:orange}html{backgro
  • 前端动画实现：CSS3 动画与 JavaScript 动画对比 大力出奇迹985 前端css3javascript
    一、引言：动画世界的双剑客在网页的奇妙世界里，动画就像是灵动的精灵，赋予页面生机与活力。CSS3动画和JavaScript动画，宛如两位得力的剑客，各自挥舞着独特的招式，为开发者实现绚丽动画效果提供了强大的武器。CSS3动画简洁优雅，能轻松实现一些基础且流畅的动画；而JavaScript动画则以其强大的控制能力和灵活性，在复杂动画的舞台上大放异彩。接下来，让我们走进它们的世界，一探究竟。二、语法与
  • 通过Deepseek找工作 速易达网络 人工智能
    推送的结果如下，对应的AI提示词在底部：计算机方向远程工作职位汇总整合全球远程技术岗位|支持全地域远程办公|涵盖开发、安全、云计算等方向覆盖方向：8+个技术领域薪资范围：¥10K-¥40K/月工作模式：100%远程远程技术职位列表职位名称技能要求经验要求薪资待遇工作模式WordPress开发工程师PHP,HTML5/CSS3,WordPress二次开发,SEO优化3年+1.4-1.6万/月全球远程
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果 申增浩
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
  • 06.CSS3布局 Ching_Lee
    1.弹性盒模型flexbox1）弹性容器属性flexcontainerflex-directionflex-wrap复合属性flex-flowjustify-contentalign-itemsalign-content2）弹性子元素属性flexitem3）Flexbox菜单项目实战宽度大于768px宽度大于480px小于768px宽度小于480px弹性响应式布局实现菜单栏.menu{list-s
  • css3地球转动模型（动态数据）
    参考资源：https://www.jq22.com/jquery-info24302{{!item.permission?'暂无权限':''}}{{item.name}}exportdefault{data(){return{list:[{id:"81e5f51d6ab845fca406bdc8b0c50e34",homeUrl:"/workbenches",name:'交易管理后台',img:'
  • HTML5+CSS3小实例：流星划过天际的动画效果 艾恩小灰灰
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
  • css mix-blend,详解CSS3的mix-blend-mode属性 weixin_39630813 cssmix-blend
    1、相当于加了一个图层mix-blend-mode:multiply;2、相当于加了一个滤镜mix-blend-mode:screen;3、相当于加了一个图层和滤镜mix-blend-mode:overlay;4、会使图片变暗，出现变暗效果mix-blend-mode:darken;5、这个模式与darken相反，*它的效果取决于源和背景颜色之间更浅的(色彩)。*即将两像素的RGB值进行比较后，取
  • 2019-05-16 海牙kyogre
    前端优化动画性能之requestAnimationFrame@(技术分享)在前端做动画很多人第一人的反应是用定时器，比如setInterval、setTimeout，除此之外css3可以使用transition和animation来实现。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有
  • 2014年最具人气国外WORDPRESS主题 weixin_34355715 php前端uxViewUI
    在国外，WrodPress这个博客系统极为受欢迎，使用WordPress来建站可以降低很多成本，另外还能以十分便宜的价格获得一个漂亮的WP网站模板。今天向大家分享来自Themeforest2014年最具人气的高级WrodPress主题，这些主题无论是设计还是技术上，都是目前最新最流行的。比如CSS3、扁平化、响应式设计、全屏视频背景、视差滚动特效等等。本次分享的WP主题实用性非常不错，流行的设计+
  • OracleERP云软件二次开发：业务流程管理与自定义教程 kkchenjj 工业软件二次开发全集工业软件ERP数据库开发语言
    OracleERP云软件二次开发：业务流程管理与自定义教程OracleERP云平台概览OracleERP云平台架构OracleERPCloud采用了一种多层架构设计，旨在提供高度可扩展、安全且灵活的云解决方案。其架构主要分为以下几个层次：用户界面层：提供直观的用户界面，支持多种设备访问，包括桌面、平板和手机。这一层利用了现代Web技术，如HTML5、CSS3和JavaScript，确保了良好的用户
  • html5及css有什么区别,html5和css3的区别是什么？ weixin_39788256 html5及css有什么区别
    html5和css3是什么？区别是什么？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。什么是HTML5？HTML，超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本，是当前最新版本，主要特点是支持原生的视频播放、离线存储、更多的语义
  • JS获取 CSS 中定义var变量值 前端 贾公子 tensorflow人工智能python
    目录示例代码CSS3:root选择器CSSStyleDeclarationgetPropertyValue()方法styleSheetscssRules关键特性使用示例注意事项典型应用场景WindowgetComputedStyle()方法WindowgetComputedStyle()方法和style的异同在JavaScript中，可以通过getComputedStyle()方法结合getPro
  • 第二篇 html5和css3开发基础与应用 ᝰ落念英 html5css3前端开发语言webhtmlcss
    第一章html5开发基础与应用第一节简介2014年10月28日，W3C组织公开发布HTML5标准规范。官方文档地址为：https://www.w3.org/TR/2014/REC-html5-20141028/HTML5.1文档地址：https://www.w3.org/TR/2015/WD-html51-20151008/HTML5.2文档地址：https://www.w3.org/TR/201
  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
  • CSS和CSS3区别对比
    CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：一、核心概念与版本关系CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模块化设计（如F
  • js实现百度地图的自定义marker与css3动画的交互 沈大大520 css3动画扩展自定义百度地图makerjscss3javascript前端html5
    使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
  • 原生cesium 实现 多图例展示+点聚合(base64图标)
    个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、CSDN优质创作者作者：柳晓黑胡椒❣️专栏：cesium实践(原生)若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力需求背景解决思路解决效果index.vue需求背景1.需要展示多个站点图例的图表及闪烁效果2.需要考虑层级高时，多图例的点聚合效果，且点聚合显示需要采用设计的圆形图标解决思路闪烁效果：采用css3的anim
  • CSS3 文本效果详解 lly202406 开发语言
    CSS3文本效果详解引言随着Web技术的发展，CSS3为前端设计师和开发者提供了丰富的文本效果选项。这些效果不仅能够增强网页的美观性，还能提升用户体验。本文将详细介绍CSS3中的文本效果，包括文本阴影、文本描边、文本装饰、文本换行、文本大小写等，并探讨如何在实际项目中应用这些效果。文本阴影文本阴影是CSS3中最常见的文本效果之一。它可以为文本添加阴影，使其更加立体，提升视觉效果。基本语法text-
  • html怎么设置好看的文本框,html页面输入框input的美化 PassatCC html怎么设置好看的文本框
    input输入框是网页必不可少的组件，可是每个浏览器对于输入框的显示样式各有不同例如：上图分别就是谷歌浏览器和IE浏览器自带显示的输入框，样式也不足人意，所以大多都会自己写样式以下是一个简单的文本框样式input{border:1pxsolid#ccc;padding:7px0px;border-radius:3px;/*css3属性IE不支持*/padding-left:5px;}效果图：样式属
  • html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度 weixin_39886205 html读取媒体长度
    显示网页的终端屏幕分辨率大小不一，为了能使同一网页能在不同的终端中合适显示，CSS3推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度，这主要在CSS文件中根据屏幕分辨率大小定义网页宽度。以前用百分比来根据屏幕分辨率大小确定网页宽度，但由于同样的百分比随着屏幕分辨率的增大，网页离屏幕两边的距离也随之变宽，不能很好的解决这个问题；用媒体查询media就能很好的解决这个问题
  • CSS3盒子模型
    div:nth-child(1){/*传统盒子模型=width+border+padding*/width:200px;height:200px;background-color:pink;padding:10px;border:10pxsolidred;box-sizing:content-box;}div:nth-child(2){/*有了这句话就让盒子变成CSS3盒子模型*//*paddin
  • css滑块开关的使用,CSS3制作滑块按钮
    滑块按钮-渣图.gif查看demo结构先整理一下，这个按钮的层。分层.gif样式body{background:#eee;}/*--用绝对定位让整个按钮在页面垂直居中--*/.toggle-wrapper{position:absolute;;left:50%;top:50%;overflow:hidden;margin-left:-60px;／*--按钮向左移动一半的宽度--*／margin-t
  • css3:css的3种引入方式 ksw000 csscss3html
    css基本知识你好！这是你第一次使用css所需要了解的知识点。如果你想学习如何使用css,可以仔细阅读这篇文章，了解一下css的基本语法知识。CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。一、行内样式使用style属性引入CSS样式。示例：style属性的应用直接在HTML标签中设置的样式实际在写页面时不提倡使用，在测试的时候可以使用。行内样式LeapingAboveTheWater
  • CSS3 常见选择器（属性、伪类、伪元素、组合）面试详解 1加1等于 javascript实战javascript前端css3
    本文详细介绍了日常中常用的几种选择器，包括属性选择器、伪类选择器、伪元素选择器、组合选择器等等本文目录1.属性选择器2.伪类选择器3.伪元素选择器4.组合选择器1.属性选择器属性选择器允许根据元素的属性及其值来选择元素。常见的属性选择器有以下几种形式：[attribute]：选择具有指定属性的元素。[attribute=value]：选择属性值精确等于指定值的元素。[attribute^=valu
  • 大数据项目-Django基于大数据技术实现的农产品销售系统 IT实战课堂-玲琳娜 计算机毕业设计大数据javaspark爬虫
    《[含文档+PPT+源码等]Django基于大数据技术实现的农产品销售系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利！数据库管理工具：phpstudy/Navicat或者phpstudy/sqlyog后台管理系统涉及技术：后台使用框架：Django前端使用技术：Vue,HTML5,CSS3、JavaScrip
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他