velocity.js实现页面滚动切换效果

页面滚动切换效果

今天介绍一个Javascript的小型的动画插件velocity.js，可以方便高效的开发一个具有多页面滚动切换效果的网站。

浏览器支持

velocity.js支持IE8+、Chrome、Firefox等浏览器，并支持Andriod以及IOS。 

我们开发一个工程，里面有一组相关联系的大型页面。不能做到在一张页面中把它们展现出来，同时又希望能够有效的阅读到这些相关内容，可以通过做一些有趣的效果来帮住我们实现，通过页面滚动切换效果，可以很有效的制作一个吸引人眼球的网页。

所有的特效应用都是通过velocity.js。Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能，它是jQuery、 jQuery UI、CSS变换 在动画方面的最佳组合。Velocity.js在内部实现中使用了jQuery的$.queue()方法，因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅，其性能也高于CSS的animation属性

所有的效果在小型终端都无法实现展示，例如手机和智能手表。所以最好在web上面来展示他的功能，但是对于小型终端我们也做了相应的适配，以便于浏览

要点

  • velocity.js是jQuery的动画插件，具有更快更高效的动画切换效果
  • 2014年5月3日，julian在其GitHub上发布了velocity.js
  • velocity.js是一款小而强大的插件                      

 下面我们来研究它的具体实现方法 

为了应用动画和滚动效果，我们必须得在<body>标签中进行data-hijacking和data-animation自定义的设置来实现这一功能
  1. <body data-hijacking="off" data-animation="scaleDown">

以上代码的意思是启动动画效果data-animation为按比例缩减scaleDown，data-animation一共定义了7种不同的动画效果，分别为scaleDown,rotate,fixed,gallery,parallax,opacity,catch.我们可以根据自己的需求，进行任意一种效果的应用。并且我将示例代码做了7个页面来分别呈现它的效果。设置数据拦截属性data-hijacking为关闭，你也可以设置为on,来展示它的效果。以上两个属性均来自velocity.js

html中Dom结构

在这个结构中我们想展示5个不同的一组页面，我们把他分为五个<section>,同时定义了2个用来进行切换作用的图标按钮

  1. <body data-hijacking="off" data-animation="scaleDown">
  2. <section class="cd-section visible">
  3. <div><h2>页面滚动切换效果1</h2></div>
  4. </section>
  5. <section class="cd-section"><div>
  6. <h2>页面滚动切换效果2</h2></div>
  7. </section>
  8. <section class="cd-section">
  9. <div><h2>页面滚动切换效果3</h2></div>
  10. </section>
  11. <section class="cd-section">
  12. <div><h2>页面滚动切换效果4</h2></div>
  13. </section>
  14. <section class="cd-section">
  15. <div><h2>页面滚动切换效果5</h2></div>
  16. </section>
  17. <nav>
  18. <ul class="cd-vertical-nav">
  19. <li><a href="#0" class="cd-prev inactive">Next</a></li>
  20. <li><a href="#0" class="cd-next">Prev</a></li>
  21. </ul>
  22. </nav> <!-- .cd-vertical-nav -->
  23. </body>

  css样式添加

通过对每个<section>进行样式的设计，方便我们查看和交互，大家可以根据需求在做一些相应样式。

  1. .cd-section:first-of-type > div {
  2. background-color: #2b334f;
  3. }
  4. .cd-section:nth-of-type(2) > div {
  5. background-color: #2e5367;
  6. }
  7. .cd-section:nth-of-type(3) > div {
  8. background-color: #267481;
  9. }
  10. .cd-section:nth-of-type(4) > div {
  11. background-color: #fcb052;
  12. }
  13. .cd-section:nth-of-type(5) > div {
  14. background-color: #f06a59;
  15. }

 事件处理

当我们设定了数据拦截属性data-hijacking为关闭后，所有动画效果均按照它窗口的相对位置进行原比例缩放。当触发了动画事件之后，我们会对当前窗口页面的样式包括缩放比例由小到大，或者由大到小。以及相关透明度变化讲解。

 下面详细展开对以下代码的讲解。首先windowHeight是指你设备窗口的本身高度是一个固定值，$(window).scrollTop()是页面中滚动条的高度，是一个范围值从上往下滑动时（0～所有页面高度），从下往上滑动的时候是从（所有页面高度～0）。actualBlock.offset().top是一组固定值，代表每一个<section>页面到顶部的距离分别是（0，每张页面高度，每张页面高度＊2，每张页面高度＊3。。。）每张页面高度依据设备而定。弄明白了这些代码的意思过后，我们可以看到下面的判断语句当offset值大于负的窗口高度时，即从下往上滑动时，当前页面由大到小切换，并且透明度不改变，y轴的值不断的增加，页面逐渐退出当前视图窗口。当offset值小于窗口高度时，即从上往下滑动时，当前页面由小到大切换，并且透明度逐渐透明，y轴的值为零，进行缩放。阴影模糊半径改变。

  1. //actualBlock is the section we are animation
  2. var offset = $(window).scrollTop() - actualBlock.offset().top,
  3. windowHeight = $(window).height();
  5. if( offset >= -windowHeight && offset <= 0 ) {
  6. // section entering the viewport
  7. translateY = (-offset)*100/windowHeight;
  8. scale = 1;
  9. opacity = 1;
  10. } else if( offset > 0 && offset <= windowHeight ) {
  11. //section leaving the viewport
  12. scale = (1 - ( offset * 0.3/windowHeight));
  13. opacity = ( 1 - ( offset/windowHeight) );
  14. translateY = 0;
  15. boxShadowBlur = 40*(offset/windowHeight);
  16. }

 以上事件处理之后，还有两个点击事件，点击那两个切换按钮，进行页面直接切换，同时还有velocity.js的事件处理函数例如对动画效果 translateUp,translateDown,scaleDown等做的一些效果。

  1. $.Velocity
  2. .RegisterEffect("scaleDown", {
  3. defaultDuration: 800,
  4. calls: [
  5. [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
  6. ]
  7. });
 

 结束语

这是一个相对来说比较复杂的效果，需要大量的js事件处理和插件函数调用，大家学习起来肯定相对比较复杂。建议先整理清楚逻辑思路之后，在看文章，并且依据文章要点去阅读源代码。如果大家对velocity.js插件感兴趣，可以去了解它的其他效果作用。并且欢迎大家和我一起互动，有什么不懂的地方欢迎小伙伴们留言哦～～

原文链接：http://www.gbtags.com/gb/share/5650.htm

你可能感兴趣的:(velocity)

  • 【算法练习】IDEA集成leetcode插件实现快速刷 2401_84102892 2024年程序员学习算法intellij-idealeetcode
    ============点击右侧边leetcode->设置->配置地址、用户名、密码、存放目录、文件模板用户名要登录后在账号信息里看模板代码1.codefilename!velocityTool.camelC
  • 根据xml模板导出excel weixin_44877172 Javaxmlexcel
    依赖5.2.3org.apache.poipoi${poi.version}org.apache.poipoi-ooxml${poi.version}org.apache.poipoi-ooxml-lite${poi.version}org.apache.poipoi-scratchpad${poi.version}2.3org.apache.velocityvelocity-engine-cor
  • 一种用于航天器姿态跟踪的新型角速度观测器（三） beegreen 控制与信号处理动态规划数学建模
    一种用于航天器姿态跟踪的新型角速度观测器（三）AnewangularvelocityobserverforattitudetrackingofspacecraftISATransactions130(2022)377–388DOI:10.1016/j.isatra.2022.03.025摘要：本文提出了一种基于收缩分析的新型航天器姿态跟踪角速度观测器。观测器在惯性参考系中通过估计惯性角动量来设计，
  • 山东大学大数据管理与分析知识点总结 weixin_51565263 云计算大数据mapreduce数据仓库
    大数据概述大数据(bigdata)，或称巨量资料，指的是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产大数据指不用随机分析法（抽样调查）这样的捷径，而采用所有数据进行分析处理大数据四个本质特征大量化（volume），快速化（velocity），多样化（variety），价值化（value）；四个VVolume—数量大：数据每两年就增长一倍（大数据摩尔
  • 大数据与AI：驱动未来智能社会的双引擎 yuhaoteng666 大数据人工智能智能社会未来趋势应用案例
    一、大数据：AI的“燃料”二、AI：大数据的“引擎”三、大数据与AI的融合应用1.医疗健康：2.教育科技：3.智慧城市：4.智能制造：四、未来趋势与挑战结语一、大数据：AI的“燃料”大数据，指的是无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合。它具有“4V”特征：Volume（大量）、Velocity（高速）、Variety（多样）、Value（价值）。在AI领域，大数据为机器学
  • git基于idea的.gitignore文件内容，直接用就行 小白菜儿929 javagitjava
    在gitee中直接生成的.gitignore文件不好用，没有对idea生成文件的忽略。分享一个可用.gitignore文件*.class*.log*.lock#packagefiles#*.jar*.war*.eartarget/#idea.idea/*.iml*velocity.log*###STS###.apt_generated.factorypath.springBeans###Intel
  • SpringBoot整合MyBatis-Plus代码生成器（新） Java界第一深情 springbootmybatis后端
    1.添加依赖坐标com.baomidoumybatis-plus-generator3.5.1org.apache.velocityvelocity-engine-core2.32.创建一个Generator类，并在该类的主方法中配置代码信息packagecom.example.generator;importcom.baomidou.mybatisplus.annotation.IdType;i
  • redis(二) NoSql入门和概述(中) 21号新秀_邓肯
    2.3V+3高2.1)大数据时代的3V海量Volume多样Variety实时Velocity2.2)互联网需求的3高高并发高可扩高性能3.当下的NoSql经典应用3.1)当下的应用是sql和nosql一起使用3.2)阿里巴巴中文站商品信息如何存放3.2.1看看阿里巴巴中文网站首页以女装/女包包为例3.2.1.1架构发展历程1.演变过程image.png2.第五代image.png3.第五代架构使命
  • 【Java】电子凭证-Java生成PDF hkk666123 JavaHTML转PDFhtmlTOPDF
    文章目录背景实现思路技术方案图TemplateEngines(模板引擎)`Thymeleaf``ApacheFreemarker``GroovyTemplates``velocity``HTMLTOPDF`技术各实现对比表WKhtmlTOpdfiTextPhantomJS技术核心:HTML生成PDF背景在某些业务场景中，需要提供相关的电子凭证，比如网银/支付宝中转账的电子回单，签约的电子合同等。方
  • java web 前端开发框架和流程 韩大帅666 前端前端
    1通常JavaWeb开发框架举个例子，对于广告系统的来说，我们先不管一些job，CACHE，config...这些优化，些框架和分层可以是这样的，MVC的技术选型：V:FreeMarkervsJSP/VelocityC:SpringMVCvsStruts/WebworkM:SPRING/JPA/HibernatevsiBatis2前端V的架构前端开发刚兴起的阶段，前端开发人员的工作经常穿插在后端开
  • 面试:大数据和深度学习之间的关系是什么? 华农DrLai 大数据深度学习人工智能机器学习
    大数据与深度学习之间存在着紧密的相互关系，它们在当今技术发展中相辅相成。大数据的定义与特点:大数据指的是规模(数据量)、多样性(数据类型)和速度(数据生成及处理速度)都超出了传统数据处理软件和硬件能力范围的数据集。它具有四个主要特点，通常被称为4V:Volume(体量)、Velocity(速度)Variety(多样性)和Veracity(真实性)深度学习的概念深度学习是机器学习的一个子领域，它模拟
  • 【激光SLAM】激光雷达数学模型和运动畸变去除 趴抖 激光SLAMSLAM激光SLAM
    目录概念介绍激光雷达传感器介绍测距原理三角测距飞行时间（TOF)激光雷达数学模型介绍光束模型（beammodel）似然场模型（likelihoodmodel）运动畸变介绍畸变去除纯估计方法（ICPVariants)ICP方法VICP（VelocityestimationICP）里程计辅助方法概念介绍激光雷达传感器介绍测距原理三角测距特点：中近距离精度较高，距离越近，精度越高价格便宜远距离精度较差易
  • 使用python模拟流体力学N-S方程 环能jvav大师 python开发语言
    importmatplotlib.pyplotaspltimportnumpyasnpfromtqdmimporttqdmN_POINTS=41DOMAIN_SIZE=1.0N_ITERATONS=500TIME_STEP_LENGTH=0.001KINEMATIC_VISCOSITY=0.1DENSITY=1.0HORIZONTAL_VELOCITY_TOP=1.0N_PRESSURE_POIS
  • MP:java.lang.NoClassDefFoundError: org/apache/velocity/context/Context TODOcode
    搜狗截图20220117204725.png原因是缺少了依赖，解决方案如下：org.apache.velocityvelocity-engine-core2.0
  • 速度规划：s形曲线应用（变速 停车）opencv c++显示（3） 大风吹~~~~~ 速度规划opencvc++人工智能速度规划研究
    理论篇先看该篇，这里沿用了里面的变量。应用推导篇分为变速和停车两部分（字迹潦草，可结合代码看）代码篇变速函数入口：velocityPlannervp;vp.SetParameters(0,1);停车函数入口：ParkingVelocityPlannervp;vp.SetDistance(1,0.4);头文件：SpeedPlan.h#ifndefSPEEDPLAN_H#defineSPEEDPLAN
  • mybatis-plus代码生成器（文章最后给出了官方参考文档） 网恋褙骗八万 Mybatismybatisjava后端
    目录1、引入依赖2、demo示例3、总结1、引入依赖此时引入了mybatis-plus的相关依赖和mysql数据库依赖3.0.52.08.0.18com.baomidoumybatis-plus-boot-starter${mybatis-plus.version}org.apache.velocityvelocity-engine-core${velocity.version}mysqlmysq
  • ITSM 全球巡演精彩回顾（一） Atlassian
    “对于那些时刻准备好要摇滚起来的(团队)，我们向你们致敬。”这些可能不是AC/DC1981年热门歌曲的准确歌词，但它们确实符合11月10日Atlassian首次以ITSM为中心的虚拟会议的主题。HighVelocity：ITSMWorldTour是一场以音乐会为主题的活动，由“詹姆斯·科登深夜秀”（TheLate,LateShowwithJamesCorden）的音乐家和喜剧演员雷吉·瓦茨（Reg
  • java批量导出pdf文件_java导出pdf文件 我解决我的问题 java批量导出pdf文件
    项目中导出pdf文件，需要3个jar包iText-2.1.7.jar，iTextAsian.jar，ReportExprotPlug0.1.jar。ReportInfoinfo=newReportInfo(ReportType.PDF,"pdf.pdf");//文件格式和文件名VelocityContextvc=newVelocityContext();//velocity模版vc.put("cl
  • 代码生成器:使用 MyBatis-Plus Generator 进行代码生成 小何干Java mybatisjavatomcat
    依赖导入:生成器com.baomidoumybatis-plus-generator3.4.1模版引擎:Velocity用作模板引擎，根据预定义的模板和传入的参数，生成最终的代码文件。org.apache.velocityvelocity-engine-core2.3provided生成器相当于你使用电脑更改你的打印文档,而模板引擎就好比打印机将你写好的代码模版打印出来,生成你的实体类entity
  • 代码生成器（新）：mybatis-plus-generator使用指南 ChinaDragonDreamer #Java知识点mybatisjava
    代码生成器（新）官网后端代码：点击查看LearnElementUiAndSpringBoot提醒：LearnElementUiAndSpringBoot下载完后，在运行调试Main.java里的main方法之前，除了utils包和Main.java文件，其他包需要先删除，否则会看不出自动生成的代码快速入门一、pom.xml添加依赖org.apache.velocityvelocity-engine
  • IDC和云计算是一样的吗? 牛二狗
    首先，IDC和云计算是不同的。IDC是互联网数据中心，简称IDC机房。它是用来存放服务器的地方，也就是实体服务器的集群。它为ICP、企业、媒体和各类网站提供大规模、高质量、安全可靠的专业化服务器托管、空间租用、网络批发带宽以及ASP、EC等业务。IDC定义了大数据的四大特征——海量的数据规模（volume）、快速的数据流转和动态的数据体系（velocity）、多样的数据类型（variety）和巨大
  • Unity根据落点和抛物线运行时间，求初始力 ysn11111 unity游戏引擎
    抛物线运行时长为2秒：抛物线运行时长为4秒：原理就是：在竖直方向只受重力，做匀加速直线运动，水平不受力，做匀速直线运动。代码：publicvoidUpdate(){if(Input.GetKeyDown(KeyCode.Space)){Vector3moveDir=GetMoveDir(endTrans,moveTime);//ForceMode.VelocityChange代表着施加的力和速度大
  • 解决老项目jecgg项目启动时报无法初始化velocity 枣泥馅 tomcatjava
    报错内容：org.apache.catalina.core.StandardContextlistenerStart严重:异常将上下文初始化事件发送到类的侦听器实例.[org.jeecgframework.web.system.listener.OnlineListener]org.springframework.beans.factory.BeanCreationException:Errorc
  • 问题：Unity粒子系统（Particle System）移动时发射粒子（RateOverDistance）不起效 全新的饭
    问题期望在人物移动时生成粒子，停止移动时不再生成期望的效果.gif查到Unity的粒子系统（ParticleSystem）中有属性RateOverDistance：根据移动距离发射粒子，不移动时不发射。恰好可满足当前需求实际使用时发现，不管怎么移动都不发射粒子，但RateOverTime（随时间推移发射粒子）的功能是正常的解决方案粒子系统有一属性：EmitterVelocity，它有2种模式Tra
  • 漏洞分析|Atlassian Confluence 远程代码执行漏洞(CVE-2023-22527) AttackSatelliteLab atlassian安全
    1.漏洞描述AtlassianConfluence是一款由Atlassian开发的企业团队协作和知识管理软件，提供了一个集中化的平台，用于创建、组织和共享团队的文档、知识库、项目计划和协作内容。AtlassianConfluence的/template/aui/text-inline.vm接口处存在velocity模板注入，未经身份验证的攻击者可利用此漏洞构造恶意请求远程代码执行，可导致服务器失陷
  • 大数据-Hadoop概论 Mr.史 Hadoophadoop大数据
    文章目录大数据概论1、大数据概念2、大数据特点1、Volume(大量)2、Velocity(高速)3、Variety(多样)4、Value(低价值密度)3、大数据应用场景4、大数据部门业务流程分析5、大数据部门组织机构Hadoop1、Hadoop是什么？2、Hadoop发展史3、Hadoop三大发行版本1、ApacheHadoop2、ClouderaHadoop3、HortonworksHadoo
  • unity2D：角色左右移动、跳跃 Karon_NeverAlone unity2Dunity
    移动1.获取左右移动信息Input.GetAxis("Horizontal");//返回值为-1~1Input.GetAxisRaw("Horizontal");//返回值为-1、0、12.修改刚体的velocity，如果是水平移动就修改x轴，相对应的，如果是前后移动就修改y轴_myrb.velocity=newVector2(_myhorizontalmove*Speed*Time.deltaT
  • Unity2D_角色移动&跳跃 Rainbow_1991 Unity2Dunity
    水平移动Rigidbody2D使用Unity自带的刚体组件，通过修改刚体物品中Rigidbody2D的属性velocity速度来实现物体移动声明Rigidbody2D属性，以及角色移动速度publicfloatplayerSpeed=5f;privateRigidbody2Drigidbody2D;在Start方法中将rigidbody2D绑定上物体的对应组件voidStart(){rigidbo
  • 大数据处理技术考试题库（自主整理） 不会写代码！！ 题库人工智能hadoop
    解释大数据？（（4V特性））大量、多样、高速、价值密度低（展开论述）（1）数据量大（Volume）：大数据的起始计量单位至少是P（1000个T）、E（100万个T）或Z（10亿个T）。（2）类型繁多（Variety）：有大量的结构化和非结构化数据（3）价值密度低（Value）：信息感知无处不在，存在信息海量，但价值密度较低。（4）时效高（Velocity）：从数据生成到消耗的时间窗口非常少，可用于
  • .NET平台常用的框架整理 走在路上的霍纳奇思 aspnetcore学习之旅.netasp.net后端
    .NET平台常用的框架整理分布式缓存框架MicrosoftVelocity：微软自家分布式缓存服务框架。Memcahed：一套分布式的高速缓存系统，目前被许多网站使用以提升网站的访问速度。Redis：是一个高性能的KV数据库。它的出现很大程度补偿了Memcached在某些方面的不足。EnyimMemcached：访问Memcached最优秀的.NET客户端，集成不错的分布式均衡算法。CacheMa
  • 对于规范和实现，你会混淆吗？ 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其他