孤城浪猿
孤城浪猿

3D旋转相册代码及详细使用教程

相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法！

  • 效果展示

  • 代码展示
    1.html

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D立体动态相册title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<div id="cube">
		
			<ul>
				<li>
					<img src="img/1.jpg" >
				li>
				<li>
					<img src="img/2.jpg" >
				li>
				<li>
					<img src="img/3.jpg" >
				li>
				<li>
					<img src="img/4.jpg" >
				li>
				<li>
					<img src="img/5.jpg" >
				li>
				<li>
					<img src="img/6.jpg" >
				li>
			ul>
			
			<ol>
				<li>
					<img src="img/01.jpg" >
				li>
				<li>
					<img src="img/02.jpg" >
				li>
				<li>
					<img src="img/03.jpg" >
				li>
				<li>
					<img src="img/04.jpg" >
				li>
				<li>
					<img src="img/05.jpg" >
				li>
				<li>
					<img src="img/06.jpg" >
				li>
			ol>
		div>
	body>
html>

2.css

/*默认样式*/
*{
	margin: 0;
	padding: 0;
}
ol,ul{list-style: none;}

/*外层盒子*/
#cube{
	height: 200px;
	width: 200px;
	/* 将整个盒子至于中间 */
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	/* 这是旋转基点 */
	transform-origin: -550px 550px 100;
	/* 设置景深 */
	perspective:800px; 
	
}

#cube ul{
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	animation: rotate1 5s linear infinite;
}
#cube ul img{
	width: 200px;
	height: 200px;
}
#cube ul li{
	width: 200px;
	height: 200px;
	position: absolute;
	/* 设置过渡时间 */
	transition: 2s;
}
#cube ul li:nth-child(1){left: 0;top: 0;opacity: .4;transform: translateZ(100px);}
#cube ul li:nth-child(2){left: 100px;top: 0;transform: rotateY(90deg);opacity: .4;}
#cube ul li:nth-child(3){left: -100px;top: 0;transform: rotateY(-90deg);opacity: .4;}
#cube ul li:nth-child(4){left: 0;top: 100px;transform: rotateX(-90deg);opacity:.4;}
#cube ul li:nth-child(5){left: 0;top: -100px;transform: rotateX(90deg);opacity: .4;}
#cube ul li:nth-child(6){left: 0;top: 0;transform: translateZ(-100px) rotateY(180deg);opacity: .4;} 

/* 内层盒子*/
#cube ol{
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 50px;
	/* 给内层盒子设置3d空间 */
	transform-style: preserve-3d;
	/* 设置动画 */
	animation: rotate1 5s linear infinite;
}
#cube ol img{
	width: 100px;
	height: 100px;
}
#cube ol li{
	width: 100px;
	height: 100px;
	position: absolute;
}
#cube ol li:nth-child(1){left: 0;top: 0;opacity: .7;transform: translateZ(50px);}
#cube ol li:nth-child(2){left: 100px;top: 0px;transform-origin: left;transform:translateZ(50px) rotateY(90deg);opacity: .7;}
#cube ol li:nth-child(3){left: -100px;top: 0px;transform-origin: right;transform:translateZ(50px) rotateY(-90deg);opacity: .7;}
#cube ol li:nth-child(4){left:0px;top: 100px;transform-origin: top;transform:translateZ(50px) rotateX(-90deg);opacity: .7;}
#cube ol li:nth-child(5){left:0px;top: -100px;transform-origin: bottom;transform:translateZ(50px) rotateX(90deg);opacity: .7;}
#cube ol li:nth-child(6){left:0px;top: 0px;transform: translateZ(-50px) rotateY(180deg);opacity: .7;}

/*外层盒子鼠标移入效果*/
#cube:hover ul li:nth-child(1){transform: translateZ(200px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(2){transform:rotateY(90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(3){transform:rotateY(-90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(4){transform:rotateX(-90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(5){transform:rotateX(90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(6){transform:rotateY(180deg) translateZ(200px) scale(1.5);opacity: .6;}
/*旋转动画效果*/
@keyframes rotate1{
	0%{transform: rotateY(0);}
	100%{transform: rotateY(360deg);}
}
  • 使用方法
    1.在桌面（或磁盘内）新建一个文件夹。在这里插入图片描述
    2.在3D相册文件夹内再新建两个文件夹和一个文本文档，分别取名为css，img，index。
    在这里插入图片描述
    3.将html下的代码复制粘贴到index中，再将index后缀名改为html。
    在这里插入图片描述
    4.在css文件夹内新建一个文本文档，取名为style，将css下的代码复制粘贴到style中，再将style后缀名改为css。


    5.将12张jpg类型的照片放入img文件夹中，分别命名为01-06，1-6。（大小：只要照片宽等于高即可，推荐：01-06:100×100，1-6:200×200，序号为6的照片上下颠倒一下效果更好哦）
    6.最后双击index即可。

注：IE浏览器无法呈现效果，推荐使用其他浏览器。3、4两步改的是后缀名，请检查新建文本文档是否以.txt结尾，如果不是则后缀名隐藏了。改为显示后按上述步骤即可。

因为有许多博友按步骤操作后仍有错误，所以我把资源压缩上传到百度网盘了，需要的请点击这里链接： 浪漫相册
提取码：gclr
各位老铁，点个赞再走呗，万分感谢。

你可能感兴趣的:(web前端,3d,css,html,css3)

  • Vue中常见问题汇总及解决方案（二） 小刘哥007 Vue实战vue.js前端javascript
    目录CSSbackground引入图片打包后,访问路径错误安装模块时命令窗口输出unsupportedplatformxxxUnexpectedtabcharater这些Failedtomountcomponent:templateorrenderfunctionnotdefinedUnknowncustomelement:-didyouregisterthecomponentcorrectly?
  • web前端常见面试题 JackieDYH 程序猿面试题前端javascriptvue面试题
    html文件开头DOCTYPE作用DOCTYPE（文档类型）是HTML文档的开头，它指定了HTML文档使用的HTML版本及文档类型，告诉浏览器以哪种规范来解析HTML文档。它的作用有以下几个方面：声明HTML版本：DOCTYPE声明可以让浏览器知道使用哪个HTML版本来解析当前文档，从而根据规范来处理文档中的元素和属性。帮助浏览器正确解析文档：DOCTYPE声明可以确保浏览器以标准模式渲染页面，而
  • 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽黑客鹏哥 web安全CTF网络安全大赛pythonLinux
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 【现代前端框架中本地图片资源的处理方案】 Gazer_S 前端框架前端缓存javascriptchrome
    现代前端框架中本地图片资源的处理方案前言在前端开发中，正确引用本地图片资源是一个常见但容易被忽视的问题。我们不能像在HTML中那样简单地使用相对路径，因为JavaScript模块中的路径解析规则与HTML不同，且现代构建工具对静态资源有特殊的处理机制。本文将详细探讨在webpack和Vite等构建工具中处理本地图片引用的各种方法。传统方式的局限性在传统开发中，我们可能习惯这样引用图片：constl
  • STL两级空间配置器＜128kb（内存池+自由链表）与一级空间配置器(mmap(),allocate()) zjkzjk7711 c++链表开发语言
    STL的两级空间配置器（Two-LevelAllocator）STL（标准模板库）中的两级空间配置器（Two-LevelAllocator）是SGISTL（SiliconGraphicsSTL）设计的内存管理机制，用于提高小对象（≤128B）和大对象（>128B）的分配效率。1.什么是两级空间配置器？在SGISTL的__default_alloc_template（SGISTL的默认分配器）中，采
  • javaweb将上传的图片保存在项目文件webapp下的upload文件夹下 yuren_xia 后端技术前端技术webappjavatomcateclipse
    前端HTML表单(upload.html)首先，创建一个HTML页面，允许用户选择并上传图片。图片上传上传图片注意：表单的method设置为"post"，enctype需设置成"multipart/form-data"2.后端Servlet(UploadServlet.java)接下来，创建一个Servlet来处理文件上传请求，并将上传的图片保存到webapp/load目录下。packagecom
  • Unity（游戏）中五种数据存储的方法 别皱眉inging unity3d游戏存储存储方式
    Unity（游戏）中五种数据存储的方法一、PlayerPrefsunity3d提供了一个用于本地持久化保存与读取的类-------PlayerPrefs.工作原理很简单，以键值对的形式将数据保存在文件中，然后程序可以根据这个名称取出上次保存的数值（注：PlayerPrefs运用起来很方便，随时都可以存取与读取）。Playerprefs类支持3中数据类型的保存和读取，分别是浮点型、整型和字符串型：P
  • spring boot、spring cloud、spring cloud alibaba 之间的版本对应关系 薄荷街的兔比先生 springbootspringcloudjava
    大家在引用pom的时候还是要以官方推荐版本为主，不然容易出现未知的问题。1.springboot和springcloud的版本关系官方提供的版本对照表https://start.spring.io/actuator/info{"git":{"branch":"93e528fc7e79e41a513e493d057499401a15eb67","commit":{"id":"93e528f","ti
  • Cuppa CMS任意文件读取漏洞（CVE-2022-25401） 风中追风-fzzf #文件读取安全web安全
    一、漏洞概述CuppaCMSv1.0中文件管理器的复制功能允许将任何文件复制到当前目录，从而授予攻击者对任意文件得读取权限，/templates/default/html/windows/right.php文件存在任意文件读取漏洞。二、影响范围v1.0三、访问页面四、漏洞复现1、访问接口POST接口/templates/default/html/windows/right.phpPOST/temp
  • 前端开发中的常见问题与疑惑：解析与应对策略 lina_mua javascriptvue.jshtml前端es6
    1.引言1.1前端开发的复杂性前端开发涉及HTML、CSS、JavaScript等多种技术，同时还需要考虑性能优化、跨浏览器兼容性、用户体验等问题。随着前端技术的快速发展，开发者面临的挑战也越来越多。1.2本文的目标本文旨在总结前端开发中常见的问题与疑惑，并提供相应的解决方案和应对策略，帮助开发者更好地应对挑战。2.HTML/CSS常见问题2.1布局问题：如何实现复杂的页面布局？问题描述：实现复杂
  • 驱动开发系列39 - Linux Graphics 3D 绘制流程（二）- 设置渲染管线 黑不溜秋的 GPU驱动专栏驱动开发
    一：概述Intel的Iris驱动是Mesa中的Gallium驱动，主要用于IntelGen8+GPU（Broadwell及更新架构）。它负责与i915内核DRM驱动交互，并通过Vulkan（ANV）、OpenGL（IrisGallium）、或OpenCL（Clover）来提供3D加速。在Iris驱动中，GPUPipeline设置涉及多个部分，包括编译和上传着色器、设置渲染目标、绑定缓冲区、配置固定
  • 【四】3D Object Model之测量Features——area_object_model_3d()/distance_object_model_3d()算子 cqy阳 #【四】3DObjectModel3d
    欢迎来到本博客Halcon算子太多，学习查找都没有系统的学习查找路径，本专栏主要分享Halcon各类算子含义及用法，有时间会更新具体案例。具体食用方式：可以点击本专栏【Halcon算子快速查找】–>搜索你要查询的算子名称；或者点击Halcon算子汇总博客，即可食用。支持：如果觉得博主的文章还不错或者您用得到的话，可以悄悄关注一下博主哈，如果三连收藏支持就更好啦！这就是给予我最大的支持！文章目录学习
  • 【四】3D Object Model之测量Features——get_object_model_3d_params()算子 cqy阳 #【四】3DObjectModel3d图像处理计算机视觉halcon
    欢迎来到本博客Halcon算子太多，学习查找都没有系统的学习查找路径，本专栏主要分享Halcon各类算子含义及用法，有时间会更新具体案例。具体食用方式：可以点击本专栏【Halcon算子快速查找】–>搜索你要查询的算子名称；或者点击Halcon算子汇总博客，即可食用。支持：如果觉得博主的文章还不错或者您用得到的话，可以悄悄关注一下博主哈，如果三连收藏支持就更好啦！这就是给予我最大的支持！文章目录学习
  • 最通用的跨平台引擎：ShiVa 3D引擎 pizi0475 图形图像其它文章图形引擎游戏引擎引擎跨平台脚本服务器sslsoap
    ShiVa3D引擎是最通用的跨平台引擎，可以在Web浏览器运行并且也支持Windows，Mac，Linux，Wii，iPhone，iPad，Android，WebOS和AirplaySDK。该引擎支持SSL–securized插件扩展，很像PhysX引擎，FMOD声音库，ARToolkit和ScaleformHUD引擎。ClassicGeometry经典的图形处理支持多边形网，其中包括：-静态网格
  • halcon三维点云数据处理（九）create_shape_model_3d_ignore_part_polarity mm_exploration Halcon3dhalcon图像处理点云处理
    目录一、create_shape_model_3d_ignore_part_polarity例程代码二、代码理解一、create_shape_model_3d_ignore_part_polarity例程代码这个示例程序展示了如何使用基于形状3D匹配来计算瓷砖垫片的3DPose。因为背景是强纹理的，设置’ignore_part_polarity’可以加快查找速度。下面是create_shape_m
  • Houdini：Houdini程序化建模与VEX脚本_2024-07-16_01-51-39.Tex chenjj4003 游戏开发houdiniphp开发语言cinema4d材质贴图blender
    Houdini：Houdini程序化建模与VEX脚本Houdini基础Houdini界面介绍Houdini是一款由SideEffectsSoftware开发的高级3D动画软件，以其强大的程序化建模和视觉特效能力而闻名。Houdini的界面主要由以下几个部分组成：菜单栏：位于窗口顶部，提供文件操作、编辑、视图控制、渲染设置等命令。工具架：包含常用的工具按钮，如创建、编辑、选择工具等。视图区：主要的3
  • Farm3D- Learning Articulated 3D Animals by Distilling 2D Diffusion论文笔记 Im Bug 3d论文阅读
    Farm3D:LearningArticulated3DAnimalsbyDistilling2DDiffusion1.Introduction最近的研究DreamFusion表明，可以通过text-imagegenerator提取高质量的三维模型，尽管该生成模型并未经过三维训练，但它仍然包含足够的信息以恢复三维形状。在本文中，展示了通过文本-图像生成模型可以获取更多信息，并获得关节模型化的三维对
  • 【3D格式转换SDK】HOOPS Exchange技术概览（一）：3D 数据处理高效能与定制化 工业3D_大熊 3DCAD开发工具3d3D建模3D模型轻量化3D模型Web可视化3D数据格式转换3D格式转换CAD格式转换
    HOOPSExchange是一款专为3D工程应用开发而设计的SDK，旨在助力开发者便捷地访问和重用由CAD与BIM设计应用所生成的3D数据，为3D产品运营提供了强大的数据基础。借助单一且集成化的界面，HOOPSExchange能够高效地导入、转换以及导出超过30种原生及标准格式的3D数据，具体涵盖以下格式：机械计算机辅助设计（MCAD）领域：CATIA、NX、Creo、SOLIDWORKS、Inv
  • Geo3D城市引擎大规模建筑植被渲染 苹果园dog WebGLGIS3d
    import*asGeo3Dfrom"../src";importInitHelperfrom"./InitHelper";//3D场景初始化constsceneControl=InitHelper.init3D();constcontainer=document.querySelector("#map")asHTMLElement;container&&sceneControl.render(c
  • halcon三维点云数据处理（二十八）reconstruct_3d_object_model_for_matching mm_exploration Halcon3dhalcon图像处理点云处理
    目录一、reconstruct_3d_object_model_for_matching代码第一部分二、reconstruct_3d_object_model_for_matching代码第二部分三、reconstruct_3d_object_model_for_matching代码第三部分四、reconstruct_3d_object_model_for_matching代码第四部分五、reco
  • 【Python】7天-python实现缓存-day01 qq_40375355 Python-7天小项目pythonpython缓存开发语言
    使用Python实现类似redis的缓存，原文是使用go实现的，本文使用python实现，用来比较两者的区别，方便从python转go的开发者比较二者的不同。PS：原文链接是：https://geektutu.com/post/geecache-day1.htmlPS:预计在完成前还会对本文多次修改仅作参考PS:测试代码也会在后续补充一、LRU和LRU-K原文使用的是LRU算法，这里改成LRU-K
  • Django模板系统深入 jay丿 djangosqlite数据库
    Django模板系统深入模板继承和重用Block标签在Django模板中，{%block%}标签允许你定义一个“块”，这个块可以在子模板中被重写或填充。{%blocktitle%}MySite{%endblock%}Welcometomysite{%blockcontent%}{%endblock%}{%extends"base.html"%}{%blocktitle%}MyChildPage{%
  • drupal如何查看已有网页的源码 dev.null 前端前端
    在Drupal中查看已有网页的源码（HTML源代码），你可以通过以下几种方法：方法1：使用浏览器的开发者工具打开网页：访问你想查看源代码的页面。右键点击页面：在页面的任意空白处，右键点击，然后选择查看页面源代码（ViewPageSource）或者检查（Inspect）选项（具体名称取决于浏览器）。查看源代码：如果选择了“查看页面源代码”，浏览器将会显示该页面的HTML源码。如果选择了“检查”，会打
  • Python爬虫实战（一）：翻页爬取数据存入SqlServer_python爬虫翻页 2401_84563438 程序员python爬虫sqlserver
    print(str(e))#关闭游标，断开数据库cursor.close()db.close()#实现主要逻辑defrun(self):fortype_numinrange(1,46):#1.拼接网页获取每个类别的页数pageurl=self.baseurl%(1,type_num)html_str=self.parse_url(url)page=self.get_page_num(html_st
  • Kali Linux信息收集工具 dechen6073
    http://www.freebuf.com/column/150118.html可能大部分渗透测试者都想成为网络空间的007，而我个人的目标却是成为Q先生！看过007系列电影的朋友，应该都还记得那个戏份不多但一直都在的Q先生（由于年级太长目前已经退休）。他为007发明了众多神奇的武器，并且总能在关键时刻挽救大英雄于危难之间。但是与Q先生相比我很惭愧。因为到目前为止我还没有发明出什么可以与他相比的
  • Vue.js组件开发：从基础到进阶 码上飞扬 vue.js
    在现代前端开发中，Vue.js因其简洁、灵活和易上手的特点，成为了众多开发者首选的框架之一。组件化是Vue.js的核心思想之一，它让我们能够更高效、模块化地开发应用。在本文中，我们将从Vue.js的组件开发的基础知识开始，逐步探索如何通过Vue.js进行高效的组件化开发。一、Vue.js组件的基础Vue.js中的组件可以理解为一个具有特定功能的代码块，它通常包含视图（HTML）、样式（CSS）和逻
  • hive迁移补数脚本细粒度 表名-分区唯一键 我要用代码向我喜欢的女孩表白 hivehadoop数据仓库
    假设我通过对数脚本发现，这些表对不上。假设检测出来是这样的（这些表存在于源端，但不存在目标端）我们需要从源端迁移过去。diff.txtads_xx1dt=20250219ads_xx2dt=20250217ads_xx2dt=20250218ads_xx2dt=20250219ads_xx3dt=20250217ads_xx4dt=20250217bak_xx1dt=20250109bak_xx1
  • 基于SpringBoot+Vue驾校理论课模拟考试系统源码(自动化部署) .whl Java学习进阶毕设源码springbootvue.js自动化
    DrivingTestSimulationUnity3DProject,subjecttwo,simulateddrivingtest【更新信息】更新时间-2021-1-17解决了方向盘不同机型转动轴心偏离更新时间-2021-2-18加入了手刹系统待更新-2021-6-19（工作太忙少有时间更新，先指出问题）解决了在REC回放下偶然出现的物体回放错位BUG（每一个挂ReplayEntity.cs的
  • 常用的HTML标签及属性 微剑 python前端开发htmlcss
    前端开发常用的HTML标签和属性较为丰富，以下是一些常用的HTML标签和属性：1.标题标签：h1、h2、h3、h4、h5、h6；属性：id、class、style2.段落标签：p；属性：id、class、style3.图像标签：img；属性：src、alt、title、width、height、border、align4.超链接标签：a；属性：href、target、title、id、class、
  • freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号 weixin_39970689
    原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他