chen106106
chen106106

css3 animation 学习

 

css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation )来完成。

 

他们的详细解释可以参考 W3CSCHOOL

 

下面是效果图：



 

 

类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。

 

<html lang="zh" >
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style>
	
body{
	overflow: hidden;
}

.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: Arial, sans-serif;
}

/*put the “navigation” at the top of the page by giving it a fixed position*/

.st-container > input,
.st-container > a {
    position: fixed;
    top: 0;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}
 
.st-container > input {
    opacity: 0;
    z-index: 1000;
}
 
.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #e23a6e;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	text-decoration: none;
}

/*It will have the same background color like the link elements:*/
.st-container:after {
    content: '';
    position: fixed;
    width: 100%;
    height: 34px;
    background: #e23a6e;
    z-index: 9;
    top: 0;
}

/*give input and links  respective left values*/
#st-control-1, #st-control-1 + a {
    left: 0;
}
 
#st-control-2, #st-control-2 + a {
    left: 20%;
}
 
#st-control-3, #st-control-3 + a {
    left: 40%;
}
 
#st-control-4, #st-control-4 + a {
    left: 60%;
}
 
#st-control-5, #st-control-5 + a {
    left: 80%;
}

/*define a “selected” state for the link elements.*/
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
    background: #821134;
}

/*add a little triangle using the pseudo-class :after and give it the same color:*/

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
    top: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #821134;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}

/*define a hover state for the link element:*/
.st-container > input:hover + a{
    background: #AD244F;
}
 
.st-container > input:hover + a:after {
    border-bottom-color: #AD244F;
}

/*define scroll panel style*/

.st-scroll,
.st-panel {
    position: relative;
    width: 100%;
    height: 100%;
}
 
.st-scroll {
    top: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;
     
    /* Let's enforce some hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
	border: solid 1px #ccc;
}
 
.st-panel{
    background: #fff;
    overflow: hidden;
} 

/**define the positions for the st-scroll wrapper for each checked radio button*/

#st-control-1:checked ~ .st-scroll {
    -webkit-transform: translateY(0%);
	background-color: green;
}
#st-control-2:checked ~ .st-scroll {
    -webkit-transform: translateY(-100%);
	background-color: green;
}
#st-control-3:checked ~ .st-scroll {
    -webkit-transform: translateY(-200%);
	background-color: green;
}
#st-control-4:checked ~ .st-scroll {
    -webkit-transform: translateY(-300%);
	background-color: green;
}
#st-control-5:checked ~ .st-scroll {
    -webkit-transform: translateY(-400%);
	background-color: green;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
    -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards;
}

/** define animation for the scroll panel*/ 
@keyframes moveDown{
    0% { 
        -webkit-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -webkit-transform: translateY(0px);  
        opacity: 1;
    }
}

.st-panel h2 {
    color: #e23a6e;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    position: absolute;
    font-size: 54px;
    font-weight: 900;
    width: 80%;
    left: 10%;
    text-align: center;
    line-height: 50px;
    margin: -70px 0 0 0;
    padding: 0;
    top: 50%;
    -webkit-backface-visibility: hidden;
}

.st-panel p {
    position: absolute;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: #8b8b8b;
    z-index: 2;
    padding: 0;
    width: 50%;
    left: 25%;
    top: 50%;
    margin: 10px 0 0 0;
    -webkit-backface-visibility: hidden;
}

</style>
<body>
        <div class="container">
		
			<div class="st-container">
			
				<input type="radio" name="radio-set" checked="checked" id="st-control-1">
				<a href="#st-panel-1">Serendipity</a>
				<input type="radio" name="radio-set" id="st-control-2">
				<a href="#st-panel-2">Happiness</a>
				<input type="radio" name="radio-set" id="st-control-3">
				<a href="#st-panel-3">Tranquillity</a>
				<input type="radio" name="radio-set" id="st-control-4">
				<a href="#st-panel-4">Positivity</a>
				<input type="radio" name="radio-set" id="st-control-5">
				<a href="#st-panel-5">Passion</a>
				
				<div class="st-scroll">
				
					<!-- Placeholder text from http://hipsteripsum.me/ -->
					
					<section class="st-panel" id="st-panel-1">
						<h2>Serendipity</h2>
						<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
					</section>
					
					<section class="st-panel st-color" id="st-panel-2">
						<h2>Happiness</h2>
						<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
					</section>
					
					<section class="st-panel" id="st-panel-3">
						<h2>Tranquillity</h2>
						<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
					</section>
					
					<section class="st-panel st-color" id="st-panel-4">
						<h2>Positivity</h2>
						<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
					</section>
					
					<section class="st-panel" id="st-panel-5">
						<h2>Passion</h2>
						<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
					</section>

				</div><!-- // st-scroll -->
				
			</div><!-- // st-container -->
			
        </div>
</body>
</html>

 

你可能感兴趣的:(css3,animation,transition,trasnform)

  • 前端面试题 大大。 前端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实现字体特效
  • Unity 的UI动画调节 深圳市由你创科技 游戏设计unityui游戏引擎
    在游戏开发中，精美的UI动画能极大提升用户体验。Unity提供了强大的动画系统，让开发者可以轻松创建流畅的界面动效。本文将介绍UI动画的核心概念、制作流程和实用技巧。一、核心动画组件Animation窗口-可视化创建关键帧动画Animator组件-控制动画状态和过渡Animator控制器-管理动画状态机二、创建UI动画的步骤创建动画剪辑选中UI元素>菜单栏Window>Animation>Anim
  • 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
  • CSS动画实例 隆海博客 web前端#CSScsscss3
    CSS动画实例一、进度条二、涨水三、纯CSS实现轮番播图一、进度条html代码css代码.d1{width:400px;height:20px;background-color:gray;}.bar{width:10%;height:20px;background-color:blue;animation-name:jindu;animation-duration:3s;}@keyframesji
  • 【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万/月全球远程
  • 初级网安作业笔记3
    内容：自行搭建前端页面并分析运行成功界面：代码：用户登录|系统名称/*全局样式重置与基础设置*/:root{--primary-color:#1a73e8;--primary-hover:#1557b0;--error-color:#d93025;--text-color:#5f6368;--border-color:#dadce0;--bg-color:#f0f2f5;--transition-
  • 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
  • vscode 的 settings.json Lovely Ruby #工作vscodejsonide
    基本的配置在antfu基础上更改了command按键的功能字体白天黑夜的主题更改{//==========Visuals=========="editor.cursorSmoothCaretAnimation":"on","editor.fontFamily":"Input","editor.guides.bracketPairs":"active","editor.lineNumbers":"i
  • UE5保姆级基础教程（第五章） 不爱说话的采儿 ue5游戏引擎课程设计经验分享其他
    第五章：动画蒙太奇与IK系统——从技术实现到电影级表现的深度打磨一、动画蒙太奇（AnimationMontage）全流程——从单段动画到连击系统（扩展详解）动画蒙太奇是UE5中连接“动画资源”与“交互逻辑”的核心枢纽，其灵活性不仅体现在连击系统，还能实现技能连招、剧情QTE等复杂场景。以下从“精细化配置”“逻辑深挖”“故障排除”三个维度展开：1.蒙太奇资产的精细化配置（补充细节）（1）片段分割与时
  • Js进阶案例合集 在逃的吗喽 javascriptcss前端
    案例一：渲染商品CSS代码*{margin:0;padding:0;box-sizing:border-box;}.list{width:990px;margin:0auto;display:flex;flex-wrap:wrap;}.item{width:240px;margin-left:10px;padding:20px30px;transition:all.5s;margin-bottom
  • 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
  • Android bootanimation动画制作和验证 小姜的android之旅 Androidbootanimationbootanimation
    Android开机动画使用bootanimation程序显示开机画面，只需按格式要求做bootanimation.zip包，放在系统的/system/media目录中。开机画面主要是由一个zip格式的压缩包bootanimation.zip组成，压缩包里面包含数张png格式的图片，还有一个desc.txt的文本文档，开机时按desc.txt里面的指令，屏幕上会按文件名称顺序连续的播放一张张的图片，
  • CSS中的transform 骑驴看星星a css前端javascript开发语言ecmascriptlinux学习
    在CSS中，transform是用于用于用于对元素进行几何变换的属性，可实现旋转、缩放、平移、倾斜等效果，且不会影响其他元素的布局（不会触发重排）。以下是其核心用法和特性：1.基本语法element{transform:变换函数1(参数)变换函数2(参数);/*多个变换可叠加*/transform-origin:x-axisy-axis;/*变换原点（默认中心）*/transition:trans
  • ReactNative 0.69发布 wayne214 前端
    ReactNative0.69正式版发布了，主要带来如下几点：1.React18的支持2.默认绑定引擎HermesReact18ReactNative0.69是第一个支持React18的正式版本。React18提供了更多提升，比如新的hookapi，userId等。此外，React18包括新的并发特性，例如useTransition或完整的Suspense支持。React18的更新后全面支持Sus
  • 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值进行比较后，取
  • swiper js无缝滚动---解决播放总是有间隔、动画一闪一跳的问题 StrongerIrene javascript开发语言ecmascript
    搜了很多，没找到解决方案，ai也不知道，那个delay=0也不管用后面自己抓css，发现先设置freemode（可以无限滚动滑的那个）然后会发现他有这个css，把这个改成linear就行了:global(.swiper-free-mode>.swiper-wrapper){transition-timing-function:linear!important;}还有就是得设置宽高、必须设置宽高之后
  • Vue3 - 实现一个雨水滴落的动画效果 程序员的成长之路 Vue3html5javascriptvue
    在Vue3中实现一个雨水滴落的动画效果，可以使用HTML5的元素和JavaScript来绘制和控制动画。以下是一个实现雨水滴落效果的示例：创建一个Vue3项目首先，确保你已经创建了一个Vue3项目。如果还没有，可以使用VueCLI来创建：vuecreaterain-animationcdrain-animation添加Canvas组件创建一个新的Vue组件来包含我们的元素和动画逻辑。创建一个名为R
  • 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，确保了良好的用户
  • 手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏09之sprite动画 __豆约翰__
    项目源码项目源码sprite动画上一节，我们可以控制sprite移动了，但sprite的移动就是平移，比较呆板；这一节我们给sprite添加动画效果。Animation类继承Transform，这样就具备了平移和缩放的能力。主要思想是：1.包含一个图片的列表（动画的本质就是多张图片的连续播放）2.内部有个定时器，不断更换图片。@OverridepublicvoidactionPerformed(A
  • html5及css有什么区别,html5和css3的区别是什么？ weixin_39788256 html5及css有什么区别
    html5和css3是什么？区别是什么？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。什么是HTML5？HTML，超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本，是当前最新版本，主要特点是支持原生的视频播放、离线存储、更多的语义
  • 如何用css画三角形&太极 阿小经
    一、如何用css画一个三角形搜索学习资源：Google>>csstricksshape>>画一个如下图这样的三角形三角形htmltrianglecss1.先设置div元素，为它上下边界设置不同颜色，方便改动2.使其高度、宽度为03.使其上边界值为0（蓝色部分）4.使绿色和红色区域变成透明色就可以得到我们要的三角形了。5.简化代码二、如何用css画一个太极(带animation动效)静态效果图用到伪
  • vue-router和锚点冲突问题 TaoLandd
    传统的锚点定位会与vue-router中的路由设置存在冲突，都是使用'#'进行的，所以这里使用一直方法来模拟锚点跳转，并使用tween.js达到动态的过度效果不使用原生锚点，使用这种方式解决import'../static/js/animation.js'import'../static/js/tween.js'xxxxmethods:{anchor:function(e){letid='anch
  • 对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
    昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
  • android 网络 百合不是茶 网络
    android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
  • [读书笔记]读法拉第传 comsci 读书笔记
          1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
  • 随机数的产生 沐刃青蛟 随机数
    c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<
  • PHP检测函数所在的文件名 IT独行者 PHP函数
    很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs
  • 银行各系统功能简介 文强chu 金融
    银行各系统功能简介 　 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系
  • Python学习1(pip django 安装以及第一个project) 小桔子 pythondjangopip
        最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
  • php 数组 aichenglong PHP排序数组循环多维数组
    1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
  • 安装python2.7 AILIKES python
    安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2
  • java异常的处理探讨 百合不是茶 JAVA异常
    //java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常  
  • getElementsByName实例 bijian1013 element
    实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
  • 探索JUnit4扩展：Runner bijian1013 java单元测试JUnit
            参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20
  • [MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
    1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2
  • 【Spark八十一】Hive in the spark assembly bit1129 assembly
    Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
  • Nginx问题定位之监控进程异常退出 ronin47
    nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
  • No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
    方法一：常用方法   关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=
  • Netty源码学习-DefaultChannelPipeline bylijinnan netty
    package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
  • MYSQL数据库常用备份及恢复语句 chicony mysql
    备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
  • 小白谈谈云计算--基于Google三大论文 CrazyMizzz Google云计算GFS
        之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n
  • hadoop 平衡空间设置方法 daizj hadoopbalancer
    在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g
  • Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
  • Android学习之路 dcj3sjt126com Android学习
    转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视
  • java 遍历Map的四种方法 eksliang javaHashMapjava 遍历Map的四种方法
    转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
  • 【精典】数据库相关相关 gengzg 数据库
    package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
  • 自动补全 huyana_town 自动补全
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
  • jquery在线预览PDF文件，打开PDF文件 天梯梦 jquery
    最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
  • ViewPager刷新单个页面的方法 lovelease androidviewpagertag刷新
      使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
  • 利用按位取反（~）从复合枚举值里清除枚举值 草料场 enum
    以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果，
  • Linux系统新手学习的11点建议 刘星宇 编程工作linux脚本
    　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
  • hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAOHibernate
    /** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他