Yalishizhude
Yalishizhude

css3绘制3d翻页效果

css3绘制3d翻页效果_第1张图片

核心内容：

1.css3的transition属性来制作简单的动画

transition属性可以为指定的css属性添加动画效果，这个动画用到的是transform属性

transition: property duration timing-function delay;

复杂的动画效果可以用keyframes来绘制

2.css3绘制3d图形旋转效果

transform属性一看名字就知道是用来改变图形形状的，包括位移translate，旋转rotate，缩放scale。所谓的3d效果一般是由图形旋转拼凑而成的，所以这里用到了transform中的rotate值，绕着y轴旋转，定义旋转轴transform-origin: right center;绘制3d图像前要在外层设置一个3d的景深和样式perspective: 800;transform-style: preserve-3d;


源代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition绘制翻页效果</title>
	<style>
		.btn{
			margin:40px;	
		}
		#book{
			background-color: black;
			margin: 40px;
			width: 400px;
			height: 200px;
			padding: 0;
			perspective: 800;
			transform-style: preserve-3d;
			-webkit-perspective: 800;
			-webkit-transform-style: -webkit-preserve-3d;
		}
		#page1{
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: grey;
			transform-origin: right center;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			-webkit-transform-origin: right center;
		}
		#page2, #page3, #page4{
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: grey;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			transform-origin: right center;
			-webkit-transform-origin: right center;
			transform: rotateY(180deg);
			-webkit-transform: rotateY(180deg);
		}

		#left{
			float: left;
			background-color: black;
			margin-left: 40px;
			width: 200px;
			height: 200px;
			padding: 0;
			overflow: hidden;
			perspective: 800;
			transform-style: preserve-3d;
			-webkit-perspective: 800;
			-webkit-transform-style: -webkit-preserve-3d;
		}
		#right{
			float: left;
			background-color: black;
			width: 200px;
			height: 200px;
			padding: 0;
			overflow: hidden;
			perspective: 800;
			transform-style: preserve-3d;
			-webkit-perspective: 800;
			-webkit-transform-style: -webkit-preserve-3d;
		}
		#pagel1,#pagel2,#pagel3,#pagel4{
			position: absolute;
			width: 158px;
			height: 158px;
			background-color: grey;
			padding: 20px;
			transform-origin: right center;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			-webkit-transform-origin: right center;
			border: 1px solid red;
		}
		#pagel2,#pagel3,#pagel4{
			transform: rotateY(180deg);
			-webkit-transform: rotateY(180deg);
		}
		#pager1,#pager2,#pager3,#pager4{
			position: absolute;
			width: 158px;
			height: 158px;
			background-color: grey;
			padding: 20px;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			transform-origin: left center;
			-webkit-transform-origin: left center;
			border: 1px solid red;
		}
		#pager1{
			z-index: -10;
		}
		#pager2{
			z-index: -20;
		}
		#pager3{
			z-index: -30;
		}
		#pager4{
			z-index: -40;
		}
	</style>
</head>
<body>
	<div id="book">
		<div id="page1">1</div>
		<div id="page2">2</div>
		<div id="page3">3</div>
		<div id="page4">4</div>
	</div>
	<div class="btn">
		<a href="javascript:prev()">上一页</a>  <a href="javascript:next()">下一页</a>
	</div>

	<div id="left">
		<div id="pagel1">第1页</div>
		<div id="pagel2">第3页</div>
		<div id="pagel3">第5页</div>
		<div id="pagel4">第7页</div>
	</div>
	<div id="right">
		<div id="pager1">第2页</div>
		<div id="pager2">第4页</div>
		<div id="pager3">第6页</div>
		<div id="pager4">第8页</div>
	</div>
	<div style="clear:both;"></div>
	<div class="btn">
		<a href="javascript:prev2()">上一页</a>  <a href="javascript:next2()">下一页</a>
	</div>
	<script>
		var curIndex = 1;
		function prev(){
			if(1==curIndex) return;
			var lPage = document.getElementById("page"+curIndex);
			var llPage = document.getElementById("page"+(curIndex-1));
			var rPage = document.getElementById("page"+(curIndex+1));
			if(llPage)llPage.style.zIndex = 100;
			if(rPage)rPage.style.zIndex = 0;
			lPage.style.transform = "rotateY(180deg)";
			lPage.style.webkitTransform = "rotateY(180deg)";
			curIndex--;
		}
		function next(){
			if(4==curIndex) return;
			curIndex++;
			var lPage = document.getElementById("page"+curIndex);
			var rPage = document.getElementById("page"+(curIndex+1));
			if(rPage)rPage.style.zIndex = 100;
			lPage.style.transform = "rotateY(0deg)";
			lPage.style.webkitTransform = "rotateY(0deg)";
		}
		var curPage = 1;
		function prev2(){
			if(1===curPage) return;
			//左边翻页
			var lPage = document.getElementById("pagel" + curPage);
			lPage.style.transform = "rotateY(180deg)";
			lPage.style.webkitTransform = "rotateY(180deg)";
			//右边翻页
			var rPage = document.getElementById("pager" + (curPage-1));
			rPage.style.transform = "rotateY(0deg)";
			rPage.style.webkitTransform = "rotateY(0deg)";
			curPage--;
		}
		function next2(){
			if(4===curPage) return;
			//左边翻页
			var lPage = document.getElementById("pagel" + (curPage+1));
			lPage.style.transform = "rotateY(0deg)";
			lPage.style.webkitTransform = "rotateY(0deg)";
			//右边翻页
			var rPage = document.getElementById("pager" + curPage);
			rPage.style.transform = "rotateY(-180deg)";
			rPage.style.webkitTransform = "rotateY(-180deg)";
			curPage++;
		}
	</script>
</body>
</html>

这里绘制了两个图形，第一个是绕中轴进行的翻页效果，这样有个问题，就是翻页后文字内容全部反了，第二个就是为了解决这个问题，做了两个3d翻页效果拼凑起来形成一个翻书的效果

你可能感兴趣的:(css3,3D图像)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • 密码正则验证：大小写字母、数字、特殊字符至少8位 qq_21875331 渐进式的成长
    正则表达式：密码必须包含大写字母、数字、特殊字符（四种里至少三种，且至少8位）写法一：/((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^
  • 48. 旋转图像 - 力扣（LeetCode） Fiee-77 #数组leetcode算法python数据结构数组
    题目：给定一个n×n的二维矩阵matrix表示一个图像。请你将图像顺时针旋转90度。你必须在原地旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。示例1：输入：matrix=[[1,2,3],[4,5,6],[7,8,9]]输出：[[7,4,1],[8,5,2],[9,6,3]]示例2：输入：matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,
  • MotionLCM 部署优化 踩坑解决bug AI算法网奇 aigc与数字人深度学习宝典文生motion
    目录依赖项windowstorchok：渲染黑白图问题解决：humanml3d：sentence-t5-large下载数据：报错：Nomodulenamed'sentence_transformers'继续报错：fromtransformers.integrationsimportCodeCarbonCallback解决方法：推理相关转mesh：module‘matplotlib.cm‘hasno
  • 力扣面试题07 - 旋转矩阵 茶猫_ leetcode矩阵算法c语言
    题目：给你一幅由N×N矩阵表示的图像，其中每个像素的大小为4字节。请你设计一种算法，将图像旋转90度。不占用额外内存空间能否做到？示例1:给定matrix=[[1,2,3],[4,5,6],[7,8,9]],原地旋转输入矩阵，使其变为:[[7,4,1],[8,5,2],[9,6,3]]示例2:给定matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,7],[15,14,12,
  • D2早课与活力链接 亲爱的lingling
    宇宙法则是：关注什么，什么就会变大。所以时刻关注自己在想什么，听什么，看什么！感恩今天早晨醒来的第一个意识是，真好，美好的一天开始了，我要越来越漂亮。起床做感恩冥想，呼吸法，喝一杯白开水，贴牛奶面膜。谢谢真我，感觉真好！感恩今天芳哥哥做的爱心早餐，给我煎了鸡蛋，谢谢芳哥的付出。谢谢！感恩我能够越来越清晰自己要做什么，越来越清楚知道自己想要的是什么，更加宁静与喜悦。今天早晨我听到我的高级智慧的声音，
  • js操作样式 郝加升
    DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
  • D124:如何训练独立思考力？ 大栗子_
    当我们要判断一个理论或者思想是否正确，需要有三个层次，分别是体验、解释和分析。首先看体验。很多时候，我们会相信“听上去、感觉是对的”的事情。我们之前讲的太空笔的故事之所以大多数人都认为是对的，就是有一些看似真实的关键词，比如美国，NASA，设计等，这些词看起来非常权威，但是离我们又遥远，这时候我们的大脑就会放松警惕了。于是，我们毫不犹豫就接受了。说到这里，你有没有发现之前的电视广告中的各种高让我们
  • 用代码生成艺术字：设计个性化海报的秘密
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
  • 2024最新微信红包封面序列号大全+领取时间表(持续更新) 全网优惠分享
    微信红包封面序列号兑换码，每天，我们都在奔波于现实的雾霾里。工作、生活、压力、困扰，如同无尽的泥潭，让我们时刻感到疲惫不堪。然而，在这个被喧嚣包围的世界，我们是否还能保持内心的宁静和平淡？微.信搜索:「封面院」关注公众号可领取红包封面序列号。最新微信红包封面序列号：先到先得，抢完为止：1、pdiqgLsY1lR2、vC8tY0VRf3D3、j0kzzrfwl6Y4、dqRCUZ0lwmJ5、ldT
  • AIGC内容生成实战：如何用ChatGPT+DALL·E打造高转化内容 AI大模型应用工坊 AI大模型开发实战AIGCchatgptai
    AIGC内容生成实战：如何用ChatGPT+DALL·E打造高转化内容关键词：AIGC、ChatGPT、DALL·E、内容生成、高转化营销、多模态协同、提示词工程摘要：随着AIGC（人工智能生成内容）技术的爆发式发展，ChatGPT（文本生成）与DALL·E（图像生成）的组合已成为内容创作领域的“黄金搭档”。本文将深度解析二者的协同原理，结合实战案例演示从需求分析到内容落地的全流程，并揭示提升内容
  • D13-0729-阿凡提 阿凡提在冰川
    D13D13-0729-阿凡提如何避开听力训练中的常见坑——Zoe分享听力训练中的常见坑听力训练中的常见坑看不懂，写不出：生词障碍，背景知识能看看懂，写不出：口音、语音现象（连读、弱读、爆破等）、语法一些语音现象失去爆破：两个爆破音连在一起，前面的失去爆破击穿：辅音、爆破音后面接h一般不发音，Youkown听力练习最大的坑听完不复习表现：：听完不对材料进行复习，仅仅对一些错词进行更正，不做进一步拓
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 2018年4月21日 真昼之月
    因为之前周末都是一起床就玩FM然后就不知不觉沉迷，所以这次试着先玩兰斯10试试（。）总之战力稳步增强中，但是直到13T退潮都没遇到海战路线选择，难道这次又要进魔王凯布利斯BE了？！之后打FIFA的联机联赛，新阵容感觉就那样吧，找到感觉后D4轻松升级，但是D3还是会输。之后TOTS活动出来后估计阵容劣势会进一步放大（←无氪党），估计今年是没法再上D1了……以及防守还是做不好，头疼。晚饭前后玩了会儿F
  • 亲子共读D31｜鼠小弟的生日 入户锁门
    文/入户锁门图片发自App这是日本作家中江嘉男（文）和上野纪子（图）所作的一本绘本。鼠小弟要过生日了，鼠小妹给它准备了生日礼物。可是给礼物打包难住了鼠小妹。小鸭子来了，看到了这一情况，问鼠小妹在干什么，鼠小妹说送给鼠小弟的礼物怎么也包不好。小鸭子马上说：我来帮你吧。可是他俩也包不好。小猪又来了，问他们干什么呢，他们说送给鼠小弟的礼物怎么也包不好。小猪也马上说：我来帮你吧。可是他也包不好。小马、狮子
  • PDF转Markdown - Python 实现方案与代码 Eiceblue PythonPythonPDFpdfpython开发语言vscode
    PDF作为广泛使用的文档格式，转换为轻量级标记语言Markdown后，可无缝集成到技术文档、博客平台和版本控制系统中，提高内容的可编辑性和可访问性。本文将详细介绍如何使用国产Spire.PDFforPython库将PDF文档转换为Markdown格式。技术优势：精准保留原始文档结构（段落/列表/表格）完整提取文本和图像内容无需Adobe依赖的纯Python实现支持Linux/Windows/mac
  • Python Gradio：实现交互式图像编辑 PythonAI编程架构实战家 Python编程之道python开发语言ai
    PythonGradio：实现交互式图像编辑关键词：Python,Gradio,交互式图像编辑,计算机视觉,深度学习,图像处理,Web应用摘要：本文将深入探讨如何使用Python的Gradio库构建交互式图像编辑应用。我们将从基础概念开始，逐步介绍Gradio的核心功能，并通过实际代码示例展示如何实现各种图像处理功能。文章将涵盖图像滤镜应用、对象检测、风格迁移等高级功能，同时提供完整的项目实战案例
  • 2021-01-19 长孙俊明
    curl-H"Content-Type:application/json"-XPUT127.0.0.1:9200/_all/_settings-d'{"index.max_result_window":"5000000"}'
  • 《4D卓越团队》习书笔记 第十六章 创造力与投入 Smiledmx
    《4D卓越团队-美国宇航局的管理法则》（查理·佩勒林）习书笔记第十六章创造力与投入本章要点：务实的乐观不是盲目乐观，而是带来希望的乐观。用真相激起希望吉姆·科林斯在《从优秀到卓越》中写道：“面对残酷的现实，平庸的公司选择解释和逃避，而不是正视。”创造你想要的项目1.你必须从基于真相的事实出发。正视真相很难，逃避是人类的本性。2.面对现实，你想创造什么？-我想利用现有资源创造一支精干、高效、积极的橙
  • 11月16日 真假相依 止于至善 H_xy
    下午，和AB去工作室看看，策划活动方案。刚进去门，便被条形木制隔断后的一盆花吸引住了。最是它的花朵吸睛。仿佛鸟儿的红红头，顶部有四个羽冠，靠近尖尖嘴巴处是黑色，剩余为黄色，黄色顶端染了指甲大小的红色。它的颜值惊艳到我。我小心翼翼地摸了摸她，恐怕伤害到。那料到，结束谈论，去会议室开会，它被转移到那里。又成了众人瞩目的对象！谁知C说它是假的，并拔了出来验证。D过来，严肃地说：怎么把花拔了。此刻，有说真
  • 如何学好图像处理——从小白到大神？ chentengkui 图像处理
    如何学好图像处理——从小白到大神？标签：图像处理学习方法2016-02-2617:4818439人阅读评论(25)收藏举报分类：学习方法与方法论（13）版权声明：本文为博主原创文章，未经博主允许不得转载。什么是数字图像处理？历史、以及它所研究的内容。说起图像处理，你会想到什么？你是否真的了解这个领域所研究的内容。纵向来说，数字图像处理研究的历史相当悠久；横向来说，数字图像处理研究的话题相当广泛。数
  • 4D卓越团队-习书C3 林晔0302
    第三章4D系统-----神奇坐标的诞生一诞生背景：1物理学背景简化的二乘二矩阵，坐标系；2荣格1905年发表的人的性格发展理论；词汇参考MBTI指标坐标轴X：作出决策是用情感还是逻辑坐标轴Y：获取信息是靠直觉还是感觉。五感：视觉听觉嗅觉味觉触觉占70%二4D系统分析领导力领导者特征四维度：情感与直觉----绿色培养型情感与感觉---黄色包容型逻辑与直觉---蓝色展望型逻辑与感觉--橙色指导型三4D
  • 我觉知我感恩感恩百日行D37 亲爱的梁子
    图片发自App图片发自App图片发自App图片发自App图片发自App图片发自App
  • 【计算机网络】细说IP 问道飞鱼 计算机网络计算机网络tcp/ip网络协议
    文章目录概述IP地址的组成IP地址的分类IP地址的作用分类一、A类IP地址二、B类IP地址三、C类IP地址四、D类IP地址五、E类IP地址协议报文子网掩码一、定义与功能二、表示方法三、子网掩码与IP地址的关系四、子网掩码的设置与配置五、实例说明IPv6一、定义与背景二、地址格式与特点三、优势与功能四、过渡与部署五、应用与发展IPv6协议报文有了IPv6还需要子网掩码吗概述IP，全称Internet
  • C 语言实例 - 判断素数 智慧浩海 C语言c语言算法开发语言
    质数（primenumber）又称素数，有无限个。质数定义为在大于1的自然数中，除了1和它本身以外不再有其他因数，这样的数称为质数。实例#includeintmain(){intn,i,flag=0;printf("输入一个正整数:");scanf("%d",&n);for(i=2;iintmain(){intlow,high,i,flag;printf("输入两个整数:");scanf("%d%
  • 显示硬件发展与视频开发系列(2)----2D时代 短视频技术 显示与视频技术gdi/gdi+图形学软件开发c++
    3、2D时代几十年工艺改进，解决了基本制造问题，计算机开始向应用过渡。显示问题是首当其冲的问题，多年的思辨与实践，2D技术横空出世，完善发展，为计算机的应用推广做出了卓越的贡献。双色显示的星星之火，在2D时代终于熊熊燃烧，计算机走向民间的时代到来了。下面从公司产品的角度，回顾2D时代的图形图像编程。3.1、公司3.1.1、AmigaAmiga是80年代图形性能最强大的电脑之一，拥有专门处理图形的芯
  • window显示驱动开发—Direct3D 11 视频设备驱动程序接口 (DDI) 程序员王马 windows图形显示驱动开发音视频
    这些设备驱动程序接口(DDI)是新的或针对Windows8更新的：CalcPrivateCryptoSessionSizeCalcPrivateAuthenticatedChannelSizeCalcPrivateVideoDecoderOutputViewSizeCalcPrivateVideoDecoderSizeCalcPrivateVideoProcessorEnumSizeCalcPri
  • window显示驱动开发—支持 Direct3D 版本 10.1
    1.Direct3D10.1的版本标识(1)版本号与头文件定义API版本号:D3D10_1_SDK_VERSION(在d3d10_1.h中定义)运行时检测:通过ID3D10Device::CheckFeatureSupport查询D3D10_FEATURE_LEVEL_10_1支持。D3D10_FEATURE_LEVELfeatureLevel=D3D10_FEATURE_LEVEL_10_1;i
  • window 显示驱动开发-Direct3D 呈现性能改进（四） 程序员王马 windows图形显示驱动开发驱动开发
    调用资源创建、映射和取消映射函数的行为更改对于WDDM1.3及更高版本驱动程序实现的这些函数，Direct3D运行时为映射默认方案提供一组受限的输入值。这些受限值仅适用于支持功能级别11.1及更高版本的驱动程序。CreateResource(D3D11)函数—这些输入D3D11DDIARG_CREATERESOURCE结构成员受到限制：调用资源创建、映射和取消映射函数的行为更改对于WDDM1.3及
  • 基于深度学习的目标检测算法综述：从RCNN到YOLOv13，一文看懂十年演进！ 人工智能教程 深度学习目标检测算法人工智能自动驾驶YOLO机器学习
    一、引言：目标检测的十年巨变2012年AlexNet拉开深度学习序幕，2014年RCNN横空出世，目标检测从此进入“深度时代”。十年间，算法从两阶段到单阶段，从Anchor-base到Anchor-free，从CNN到Transformer，从2D到3D，从监督学习到自监督学习，迭代速度之快令人目不暇接。本文将系统梳理基于深度学习的目标检测算法，带你全面了解技术演进、核心思想、代表算法、工业落地与
  • Java实现的简单双向Map，支持重复Value superlxw1234 java双向map
    关键字：Java双向Map、DualHashBidiMap     有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。   数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。   即：既要根据Key找Value，又要根据Value
  • PL/SQL触发器基础及例子 百合不是茶 oracle数据库触发器PL/SQL编程
      触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似 过程函数必须要调用,   一个表中最多只能有12个触发器类型的,触发器和过程函数相似 触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发
  • [时空与探索]穿越时空的一些问题 comsci 问题
          我们还没有进行过任何数学形式上的证明,仅仅是一个猜想.....       这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理
  • easy ui datagrid上移下移一行 商人shang js上移下移easyuidatagrid
    /** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {
  • Java反射 oloz 反射
    本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教 首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都
  • springMVC 使用JSR-303 Validation验证 杨白白 springmvc
    JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。 登录需要验证类 public class Login { @NotEmpty
  • log4j 香水浓 log4j
    log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4
  • 使用ajax和history.pushState无刷新改变页面URL agevs jquery框架Ajaxhtml5chrome
    表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过
  • centos中文乱码 AILIKES centosOSssh
    一、CentOS系统访问 g.cn ，发现中文乱码。 于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。       后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.
  • 触发器 baalwolf 触发器
    触发器(trigger)：监视某种情况，并触发某种操作。 触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before 
  • JS正则表达式的i m g bijian1013 JavaScript正则表达式
            g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。         i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。         m:表示
  • HTML5模式和Hashbang模式 bijian1013 JavaScriptAngularJSHashbang模式HTML5模式
            我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode         一个布尔值，标识$location服务是否运行在HTML5模式下。 ha
  • [Maven学习笔记六]Maven生命周期 bit1129 maven
    从mvn test的输出开始说起   当我们在user-core中执行mvn test时，执行的输出如下：   /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs
  • 【Hadoop七】基于Yarn的Hadoop Map Reduce容错 bit1129 hadoop
    运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A
  • 记一次数据推送的异常解决端口解决 ronin47 记一次数据推送的异常解决
    　　 需求：从db获取数据然后推送到B         程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。 　　  自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。 　　　service iptables stop
  • 巧用视错觉-UI更有趣 brotherlamp UIui视频ui教程ui自学ui资料
    我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。 视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。 格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。 在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，
  • 线段树-poj1177-N个矩形求边长（离散化+扫描线） bylijinnan 数据结构算法线段树
    package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177
  • HTTP协议详解 chicony http协议
    引言                                 
  • Scala设计模式 chenchao051 设计模式scala
    Scala设计模式                我的话： 在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译
  • 安装mysql daizj mysql安装
    安装mysql   (1)删除linux上已经安装的mysql相关库信息。rpm  -e  xxxxxxx   --nodeps (强制删除)      执行命令rpm -qa |grep mysql 检查是否删除干净   (2)执行命令  rpm -i MySQL-server-5.5.31-2.el
  • HTTP状态码大全 dcj3sjt126com http状态码
    完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request
  • asihttprequest上传图片 dcj3sjt126com ASIHTTPRequest
    NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se
  • C语言中，关键字static的作用 e200702084 C++cC#
    在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。 一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访
  • win7/8使用curl geeksun win7
    1.  WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。 下载地址：  http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包   2.  可以给Windows增加c
  • Creating a Shared Repository; Users Sharing The Repository hongtoushizi git
    转载自：   http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p
  • Java实现字符串反转的8种或9种方法 Josh_Persistence 异或反转递归反转二分交换反转java字符串反转栈反转
    注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768   /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /**
  • 代码实现任意容量倒水问题 home198979 PHP算法倒水
    形象化设计模式实战             HELLO!架构                     redis命令源码解析   倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C
  • Druid datasource zhb8015 druid
    推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。 它最重要的特点是：监控、扩展和性能。 下载和Maven配置看这里： http
  • 两种启动监听器ApplicationListener和ServletContextListener spjich javaspring框架
    引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器   ServletContextListener  特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements
  • JavaScript Rounding Methods of the Math object 何不笑 JavaScriptMath
        The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(),  Math.floor(), and  Math.round() — handle rounding in differen
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他