小黄呀呀呀
小黄呀呀呀

html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马

1、两面翻转的盒子

思路：
先设置一个父盒子，然后添加两个子盒子，这两个子盒子都要设置为定位，因为这样这两个才能重叠起来，如果想要实现翻转的效果，需要实现将一个盒子旋转180度，不过这样是不够的，因为父盒子默认孩子盒子是关闭3d效果的，只要父亲一转，孩子就恢复原样，所以解决方法是在父盒子里设置transform-style，然后最后给父亲盒子旋转，即可。不过要给父盒子添加过渡的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 300px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 1s;
            /* 这个必须要写，否则子盒子的3D效果显示不出来。 */
            transform-style: preserve-3d;
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 200px;
            text-align: center;
            border-radius: 50%;
        }
        
        .front {
            background-color: pink;
            z-index: 1;
        }
        
        .back {
            background-color: purple;
            transform: rotateY(180deg)
        }
        
        .box:hover {
            transform: rotateY(180deg)
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">我在这里等你</div>
        </div我在这里等你>
</body>

</html>

html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马_第1张图片
2、3D导航栏

思路：
先设置一个父盒子，里面放两个孩子，都采用定位，这样两个会重叠起来到中心处，然后将一个盒子x轴负向旋转90deg面向地面，然后再移动盒子，不过这里有两个方法：
法1：将面向底的盒子向后移动高的一半，虽然是可以的，可以这样整个大的盒子的中心点就往后移动了，整个位置就偏了。
法2：将前面的盒子向前移动高的一半，这样中心点的位置还是在原来的平面上，位置仍然没有变化，那么中心点为什么没变呢？
因为原来是两个盒子都是定位的，然后在xy平面上。是2维的，中心点在xy面上。然后移动后变成立体长方体，长方体的中心点又在xy轴上，所以没变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin: 100px auto;
        }
        
        ul li {
            float: left;
            margin-right: 100px;
            list-style: none;
            width: 100px;
            height: 30px;
            perspective: 300px;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 0.8s;
        }
        
        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #fff;
        }
        
        .front {
            background-color: pink;
            transform: translateZ(15px);
        }
        
        .bottom {
            background-color: purple;
            transform: translateY(15px) rotateX(-90deg);
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">在这里等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">在这里等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">在这里等你</div>
            </div>
        </li>
    </ul>
</body>

</html>

html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马_第2张图片
3、旋转木马

思路：
简单的想，就是一个父亲盒子，里面放了6个孩子盒子，并且这6个孩子都定位，都在中心处，然后将每个盒子y轴旋转60deg，并且还向z轴移动一样的位置，然后将父亲旋转起来。不能忘的是要设置透视和transform-style

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 700px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 300px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            animation-play-state: paused;
        }
        
        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
        
        @keyframes rotate {
            0% {}
            100% {
                transform: rotateY(360deg)
            }
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

实现这类效果的思路：
1）先设置一个父亲盒子，再设置几个孩子盒子，然后将孩子盒子定位。
2）要对谁进行透视，就对这个人的对象进行设置透视。
3）如果孩子发生平移、旋转的效果，父亲发生变化时，孩子会恢复原状，所以要给父亲加上transform-style

你可能感兴趣的:(html5css3)

  • 学习推荐！！HTML5+CSS3从入门到精通 艾利克斯冰 学习html5css3
    获取方式：《HTML5CSS3从入门到精通》《HTML5+CSS3从入门到精通目录》第1章Web开发新时代第2章从HTML、XHTML到HTML5第3章创建HTML5文档第4章实战HTML5表单第5章实战HTML5画布第6章HTML5音频与视频第7章Web存储第8章离线应用第9章Workers多线程处理第10章Geolocation地理位置第11章CSS3概述第12章CSS选择器第13章文本、字体
  • （切图笔记）通用的纯css3实现 单选框radio复选框checkbox的美化 附代码 亲测好用 专注做前端 笔记css3前端
    切图笔记记录切图网日常，说到网页的表单美化通常需要用到插件，因为select，radio，checkbox比较特殊，无法通过css直接美化，这些也有比较不错的美化插件可以实现，不过这都是早几年的情况，现在浏览器日益更新升级，对于html5css3标准支持的更好，使得我们现在可以通过css3也可以进行美化，没有插件参与，就可以省事不少，同时也可以让页面代码更加简洁，用到了图片背景，不过是基于data
  • HTML5CSS3从入门到精通day01 飞不起来的飞机耶耶耶 html5css3前端
    1.H5新增标签头部导航栏侧边栏文章区域底部2.H5常用新属性placeholder：占位符提示信息autofocus：自动获取焦点multiple:支持多文件上传autocomplete:当提交过表单内容之后规定某个表单控件的提示内容关闭和打开required:必填项tabindex:指定表单控件获取焦点的顺序用户名：密码：手机号：邮箱：日期：文件：3.input新增type类型email:邮箱
  • h5、c3基础知识整理 菜鸟游游 我的博客htmlcss3apic语言html5
    HTML5HTML5广义的概念:代表着浏览器技术发展的阶段，是html5css3和js（API）一套前端技术的组合。HTML5新定义了一堆语义化标签，更有利于搜索引擎或辅助设备理解HTML页面内容。在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。低版本采用条件注释：表单：表单元素（标签）//数据列表（in
  • 从0开始学习HTML5CSS3(三) xinhongwu
    弹性布局弹性（伸缩）布局：是C3里新出的一种布局方式只是多一种布局的选择特点：1.用了弹性布局后，可以让子元素变成类似行内块元素的东西2.如果父盒子不够放，会自动伸缩子元素的大小3.给谁加display:flex，是代表让谁的子元素用弹性布局使用弹性布局会让子元素在主轴方向依次排列，默认主轴为x轴display:flex;代表让子元素用弹性布局justify-content:设置子元素在主轴方向的
  • 从0开始学习HTML5CSS3(二) xinhongwu
    css3新增内容1伪类选择器特点:都是以:开头,连在一起的写法其实是交集选择器以下这些主要是给a标签用的（hover除外）:hover鼠标悬停:active点击a标签时的样式:link尚未访问的样式:visited访问后的样式1.1xxx-child:first-child：找到第一个子元素:last-child：找到最后一个子元素:nth-child：找到某一个子元素写几就代表找到第几个写n代表
  • html-css文字特效,7款震撼人心的HTML5CSS3文字特效 号三 html-css文字特效
    1、HTML5像素文字爆炸重组动画特效今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效，我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。2、HTML5/CSS33D文字特效文字外翻效果今天我们再来分享一款很酷的HTML5/CSS33D文字特效，该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果，非常不错的一款文
  • HTML5CSS3行内块的巧妙运用（上一页下一页效果） Dowen00 css3html5css
    行内块的巧妙运用*{margin:0;padding:0;}.box{text-align:center;}.boxa{display:inline-block;width:36px;height:36px;background-color:#f7f7f7;border:1pxsolid#ccc;text-align:center;line-height:36px;text-decoration:
  • html5css3自适应开发,基于html5+css3的网页自适应布局设计 人事星球 html5css3自适应开发
    的位置。3.3三列布局也称为双飞翼布局，中间列自适应宽+左右列固定宽;中间列宽度自适应，放置主体内容，所以需要让中间列在浏览器中优先渲染，因此，在中加入如下代码：(1)当子元素处于浮动状态时，设置负margin>=子元素宽度时，子元素会叠盖到兄弟元素之上;因此sidebox-left设置为margin-left：-100%，以让其位置出现在main元素的左边，同理，sidebox-right设置为
  • html5css3新特性面试,前端面试题——HTML5和CSS3 GanHuoSir html5css3新特性面试
    1.列举3个HTML5新标签，3个CSS3新特性。HTML5新标签header,nav,article,footer,section,aside,audio,video,embedCSS3新特性border-radius,box-shadow,border-image,background-image,transition.2.HTML5实现本地临时存储和永久存贮、读取、删除一条key为c，val
  • 无标题文章 cde3ebb68d56
    高云鹏的个人简历ABOUTSKILLSEXPERIENCEPRICINGBLOGCALENDAROTHERALLDEMOShello高云鹏前端开发工程师年龄24城市北京邮箱[email protected]手机15210774923毕业时间2014、3下载简历说一段话技能HTMLJavaScriptJqueryReactVueHTTP作品集HTML5CSS3框架js
  • 2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特效 逆境清醒 前端特效前端html5css3源代码代码画兔子
    2023年春节祝福第二弹送你一只守护兔，让它温暖每一个你！【html5css3】画一只会动的兔子目录一、送你一只守护兔，效果图二、前言三、代码解释及部分特效教程（1）、css3立体字（2）、充电特效（a）、前置知识（b）、主要思路步骤及相关代码（c）、充电特效完整源代码（3）、动态爱心特效（4）、满屏花瓣飘落动画特效四、兔字的谐音祝福词五、完整源代码下载及其他内容见（下）一、送你一只守护兔，效果图
  • html5css3网站设计基础教程答案,HTML5+CSS3网站设计基础教程_动手实践源代码 李子骅 luin
    【实例简介】HTML5+CSS3网站设计基础教程_动手实践源代码chapter01到chapter10【实例截图】【核心代码】HTML5CSS3网站设计基础教程_动手实践源代码└──HTML5+CSS3网站设计基础教程_动手实践源代码├──chapter01│├──images││└──designer.jpg│└──index.html├──chapter02│├──demo.html│├──i
  • 前端找工作?真的不难 看看你会哪些（不定时更新） 阿民不加班 前端面试题Vue方面前端vue.jsjavascript
    黄色背景标记非常重要、必须熟练掌握，面试必问红色文字标记开发过程中用的最多Html5Css3静态页面还原淘宝，京东等大型网站首页。单页面即可Js掌握到事件（例如点击，鼠标、键盘），定时器，Es6新方法（面试必问）Vue2的生命周期，什么阶段做什么事（面试必问）router路由跳转，传参，子路由，路由拦截（面试必问）Vuex的使用，state，mutation，action，getter，modul
  • HTML5CSS3上-动画 转换 新特性 前端面试题部分汇总 onlooker_thinker 笔记前端html5css3动画前端javascript
    HTML5CSS3HTML5CSS3相关面试题HTML5新特性CSS3新特性列举5个以上的H5事件微信小程序与H5的区别H5的浏览器存储有哪些？简述transform，transition，animation的作用使用CSS怎么让Chrome支持小于12px的文字比如10px？（了解）1.0.HTML51.1.语义化标签1.2.多媒体标签1.2.1.audio音频标签1.2.2.video视频标签
  • html5精彩案例 小强好吃
    分享HTML5CSS3实现的精彩案例js图片轮播:VCD包装盒个性幻灯片http://download.csdn.net/download/lmj623565791/7502275纯CSS打造相册效果http://download.csdn.net/download/lmj623565791/7502277HTML5CSS3：无插件拖拽上传图片http://download.csdn.net/do
  • html5 css3 入门教程 ITDragon龙 web前端
    html5css3入门教程课程目录：个人主页：http://www.itit123.cn/更多干货等你来拿html5基础知识第一章语法html5基础知识第二章标签html5基础知识第三章表单html5基础知识第四章其他标签css3基础知识第一章语法css3基础知识第二章控制背景-字体-文本-表格css3基础知识第三章div盒子css3基础知识第四章布局css3基础知识第五章实战训练css3基础知识
  • 关于HTML5 css3 基础知识的总结 锅巴程序员 html5css3
    缘由最近几天在看HTML5css3相关的入门视频，视频是一个外国人quentinwatt在14年录制，总共有51期，每期大概6-9分钟。我大概断断续续看了3天才看完。在很久很以前，本人也认认真真的写过html代码，后来因为每天背英语4级单词，由于脑容量较小，那部分内容被清除了。个人感受HTML5做东西出来非常快。比如，在网页上播放视频、歌曲，只要一个控件就可以搞定：远比我们在androidjava
  • HTML5 CSS3伪类元素文字美化 iteye_17658 境-H5
    HTML5CSS3伪类元素文字美化*{padding:0;margin:0;}span{position:relative;font-size:5rem;color:#0099CC;}span::before{position:absolute;font-size:5rem;color:#333;content:attr(data-text);white-space:nowrap;width:50
  • 前端工具模板 whjin 前端模板工具
    HTML58个新的响应式HTML5CSS3网站模版50+个免费的响应式HTML5网站模版CSS310个由纯CSS实现的动画角色Web开发中20个很有用的CSS库CSS工具、框架、库合集(1-26)CSS工具、框架、库合集(27-54)CSS3实现18种Loading效果8个为图片添加Hover效果的CSS库8个AwesomeCSS过滤库&工具JavaScript15个最棒的JavaScript图形
  • 一些感觉挺有意思的例子 xiaozhen0610 前端
    html5css3圆形百分比加载动画特效https://www.mk2048.com/demo/demo_target_desc_hbc2jbbkaa.htmlhtml5css3loading加载动画，圆形百分比进度条加载动画，加载完成显示健康度检测得分情况。jquery仿手机外卖点餐购物车页面模板https://www.mk2048.com/demo/demo_target_desc_hbcch
  • html5 CSS3 渐变按钮 yycgis
    html5CSS3渐变按钮Cross-browserCSSgradientbuttonsdemobody{background:#e5e5e5;text-align:center;}/*----------------------------*/.button{margin:10px;text-decoration:none;font:bold1.5em'TrebuchetMS',Arial,He
  • 解决方法！：getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 熏肉大饼 html5html5域名chrome
    UncaughtSecurityError:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Thecanvashasbeentaintedbycross-origindata.最近在自学html5CSS3很推荐李刚的这个书，今天在家里测试发现canvas中的getImageData报错Failedtoexecute'getImag
  • HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合 豆约翰 css
    本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域，确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-whole.css.nav{height:30px;background-color:#f4f4f4;}.search-bar{height:134px;background-
  • HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合 [豆约翰]
    本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域，确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-whole.css.nav{height:30px;background-color:#f4f4f4;}.search-bar{height:134px;background-
  • 一篇文章教会你利用html5和css3实现3D立方体效果图 Python进阶者
    【一、项目背景】随着HTML5CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，
  • HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊 weixin_33882452
    转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客），对前台感兴趣的能够没事去看看他的博客，非常给力~这篇博客的目的是由于上篇HTML5CSS3专题
  • 一篇文章教会你利用html5和css3实现3D立方体效果图 pengdongcheng Web开发HTMLCSS
    【一、项目背景】随着HTML5CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，
  • 一篇文章教会你利用html5和css3实现3D立方体效果图 pengdongcheng Web开发HTMLCSS
    【一、项目背景】随着HTML5CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，
  • HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册 weixin_30535167
    转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客），对前台感兴趣的可以没事去看看他的博客，很给力~这篇博客的目的是因为上篇HTML5CSS3专题诱
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他