孤城浪猿
孤城浪猿

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)

  • 从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南 软件职业规划 springspringbootvue.js后端
    一、准备工作1.开发环境搭建安装JDK（JavaDevelopmentKit）：前往Oracle官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html，以JDK11为例）下载适合你操作系统的JDK安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过java-version命令查看到正
  • spring security配置详解 anzai561156 java
    1.IS_AUTHENTICATED_ANONYMOUSLY表示的是匿名用户也可以访问。转载于:https://www.cnblogs.com/Aaronqcd/p/4848517.html
  • 基于ARM的智能灯光控制系统（1）项目介绍 国产化创客 嵌入式项目Linux应用Linux驱动armhtmlc语言linux驱动网络编程
    基于ARM的智能灯光控制系统（1）项目介绍项目实践说明：本实践项目是嵌入式开发培训（阶段2）底层系统开发视频课程的综合实践项目。项目开发使用的技术知识点包括：C语言编程，文件编程，串口编程，网络编程，多线程编程，进程间通信，嵌入式交叉开发，嵌入式Web服务器开发，HTML编程，Linux驱动程序开发。嵌入式开发培训（阶段2）底层系统开发视频地址智能灯光控制系统视频地址系统功能智能灯光系统是对灯光进
  • JS在HTML页面内动态创建SVG元素 一粒马豆 html5JavaScript数据可视化SVGJSD3WEB
    最近在学习数据可视化，深入了解了如何在网页上实现数据的动态可视化。比如D3.JS主要应用JS在HTML页面内动态生成SVG元素并绑定数据。以下是我的例程：//通过createElementNS创建svg元素并设置属性varsvg=document.createElementNS('http://www.w3.org/2000/svg','svg');svg.setAttribute("style"
  • Element-ui el-tree 父节点不显示复选框 子节点显示复选框 鱼一直下m Js前端
    需求：父节点不显示复选框子节点显示复选框一.父节点不显示复选框子节点显示复选框(如图)二.改后效果(如图)三.上代码(如图)添加css样式.el-tree.el-tree-node.is-leaf+.el-checkbox.el-che
  • 初识 内嵌iframe 家里有只小肥猫 iframevue前端
    iframe的基本介绍与使用介绍iframe（内嵌框架）是HTML中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。基础使用标签的基本用法如下：例如：属性除了src属性，还可以使用其他属性来设置iframe的行为和样式，如allow、allowfullscreen、class、frame
  • Multi-Planar U-Net: 开源3D医疗图像分割项目推荐 郝茜润Respected
    Multi-PlanarU-Net:开源3D医疗图像分割项目推荐MultiPlanarUNetMulti-PlanarUNetforautonomoussegmentationof3Dmedicalimages项目地址:https://gitcode.com/gh_mirrors/mu/MultiPlanarUNet1.项目基础介绍及编程语言Multi-PlanarU-Net是一个开源项目，旨在实
  • Pex 项目使用教程 任翊昆Mary
    Pex项目使用教程pexPexisajavascript3dlibrary/engineallowingforseamlessdevelopmentbetweenPlaskandWebGLinthebrowser.项目地址:https://gitcode.com/gh_mirrors/pex/pex1.项目的目录结构及介绍Pex项目的目录结构如下：pex-gl/├──assets/├──lib/├
  • PEX 开源项目教程 束静研Kody
    PEX开源项目教程pexPexisajavascript3dlibrary/engineallowingforseamlessdevelopmentbetweenPlaskandWebGLinthebrowser.项目地址:https://gitcode.com/gh_mirrors/pex/pex项目介绍PEX（PolyethyleneExchange）是一个基于高密度聚乙烯（HDPE）的管道和
  • ASP.NET Core MVC AAA猪饲料批发李师傅 .NETmvc.netcorec#
    项目结构控制器由Controller类实现，视图一般是扩展名为cshtml的文件，而模型则是只有属性的普通C#类。控制器类的名字一般以Controller结尾，并且被放到Controllers文件夹下。控制器的名字为控制器的类名去掉Controller。视图一般被放到Views文件夹下的控制器名字的文件夹下。视图→浏览器端提交的请求→模型→控制器→处理→模型→视图。渲染：Render。案例演示一个
  • CSS快速入门 Annaday 前端css前端
    CSS引入方式CSS样式文件有两种引入方式，既可以写在HTML文件内，也可以作为独立的以.css结尾的文件存在方式一：使用独立的CSS文件引入当CSS样式作为单独的文件时，需要在HTML文件的标签中使用link标签来引入该CSS文件。例如，假设有一个名为styles.css的CSS文件，要将其引入到HTML文件中，需按以下方式在标签内添加link标签：在上述代码中：rel="stylesheet"
  • elementUI Table组件实现表头吸顶效果 热忱1128 elementuivue.js前端
    需求描述当table内容过多的时候，页面上滑滚动，表头的信息也会随着被遮挡，无法将表头信息和表格内容对应起来，需要进行表头吸顶开始编码环境：vue2.6+、elementUIstep1：给el-table__header-wrapper加上样式//style/sticky-table-header.scss.el-table[is-sticky]{overflow:initial;--sticky
  • 桌面应用程序开发：跨平台方案方案有什么？ 柚米汇 开发语言
    目前市面上最流行的桌面开发程序框架和工具包括以下几种：1.Electron简介：使用Web技术（HTML、CSS、JavaScript）开发跨平台桌面应用，结合Node.js和Chromium。优点：广泛使用的Web技术，开发门槛低。丰富的插件和生态系统支持。许多成功的应用案例（如VisualStudioCode、Slack、Discord）。工具：VisualStudioCode、Atom。2.
  • PHP htmlspecialchars()函数详解 小彭爱学习 phpphp
    PHPhtmlspecialchars()函数详解htmlspecialchars函数多常用于防止xss攻击，htmlspecialchars函数要转义单引号需要设置第二个参数为ENT_QUOTES，转义双引号需要设置第二个参数为ENT_NOQUOTES一、定义和用法htmlspecialchars()函数把一些预定义的字符转换为HTML实体。预定义的字符是：&(&符号)=============
  • 微信小程序中实现背景图片完全覆盖显示，可以通过设置CSS样式来实现 徊忆羽菲 微信-小程序微信小程序css小程序
    wxml页面代码wxss样式代码/*pages/beiJing/beiJing.wxss*/.beijing{background-image:url("https://www.qipa250.com/qipa.jpg");/*定位：绝对定位*/position:absolute;/*上下左右都定位到0*/top:0;left:0;right:0;bottom:0;/*给它足够低的层次*/z-in
  • 编译器概述 Tiantangbujimo7 编译原理学习编程语言
    什么是编译器：编译器是一个程序，核心功能是把源代码翻译成目标代码。源代码：c/c++,Java,c#,html,sql,…目标代码:x86,IA64,ARM,MIPS,…编译器的核心功能：源代码经过编译器的翻译，生成了目标代码，这里的静态计算意思是编译器在对目标程序进行编译的过程中并不去执行这个代码，而是尝试以静态的方式对目标程序进行理解，理解的原因是编译器所生成的目标程序和源程序必须语义相同。生
  • 如何解决VMware上Ubuntu显示黑屏问题 长门有希的忧郁 ubuntulinux运维
    本问题版本：VMware为17.5Ubuntu为24.04解决方法：关闭3D图形加速原因为显卡驱动问题
  • 深度强化学习在高频交易中的动态策略优化与收益提升 二进制独立开发 非纯粹GenAIGenAI与Pythonpython人工智能神经网络自然语言处理生成对抗网络金融数据挖掘
    文章目录1.高频交易的核心挑战与强化学习的适应性1.1高频交易中的核心问题1.2强化学习的适配性分析2.基于深度Q网络（DQN）的高频交易策略设计2.1状态空间构建：从LOB到特征工程2.2动作空间与奖励函数设计2.3DQN模型架构与训练优化3.业务视角下的策略优化与风险管理3.1策略有效性验证3.2实时部署与延迟优化3.3合规与伦理考量4.实验：基于NASDAQLOB数据的策略对比4.1数据集与
  • 【Pytest】基础到高级功能的理解使用 卜及中 Python基础pytest学习python开发语言python3.11
    文章目录第一部分：Pytest简介1.1什么是Pytest？1.2Pytest的历史1.3Pytest的核心概念1.4Pytest的特点1.5为什么选择Pytest？第二部分：Pytest的基本使用2.1安装Pytest2.2编写第一个测试用例2.2.1创建一个简单的测试函数2.2.2运行测试2.3测试报告和输出2.3.1简单输出2.3.2显示详细的失败信息2.3.3生成HTML报告2.4组织和运
  • 转帖-在Eclipse中开发JSF ren_z_q JSFEclipseBeanJSPOracle
    (转自http://www.blogjava.net/gaofeng/articles/127842.html作者:Java.net)Eclipse3.3刚刚发布,正在学习JSF,于是使用Eclipse3.3做了一个JSF的Demo,很简单,主要是页面的跳转、组件和Bean的绑定等基础...1、工具准备:Eclipse3.3WTP2.0(最好下载一个all-in-one的版本..省的麻烦)...依
  • C语言条件语句if-else和switch-case练习 Smoke filled ゞ away c语言算法开发语言
    下面的一段程序的输出结果为()#includeintmain(){if(-1)printf("1");elseprintf("2");if(0)printf("3");elseprintf("4");return0;}A.23B.24C.13D.14由于非零即为真，所以选择D选项。()设ints=100，要输出字符串"s的值是100"应使用下列哪个语句？(山东精电电气)A.printf("s的值是
  • Windows系统安装Docker环境详细教程 江湖有缘 Docker小白快速入门windowsdocker容器
    Windows系统安装Docker详细教程一、相关名词解释1.1WSL2简介1.2WSL安装版本要求1.3Docker简介二、本次实践介绍三、启用虚拟机功能3.1打开以PowerShell3.2开启虚拟化四、安装DockerDesktop工具4.1下载DockerDesktop4.2安装DockerDesktop4.3重启系统4.4接受协议4.5安装设置工作4.6进入DockerDesktop主界
  • 前端构建工具 光影少年 前端软件构建
    前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速
  • Vue.js如何阻止事件冒泡 JhzDev vue.js前端javascriptVue.Js
    事件冒泡是指当一个元素上的事件被触发时，该事件会从该元素开始向上层元素逐级触发，直至到达文档根节点。在Vue.js中，我们可以使用事件修饰符来阻止事件冒泡。下面我将详细介绍如何在Vue.js中实现事件冒泡的阻止。首先，让我们创建一个简单的Vue.js应用程序，以便演示事件冒泡的问题和解决方案。在HTML中，我们将创建一个包含两个嵌套元素的div，每个元素都绑定了点击事件。当点击内部元素时，我们希望
  • Python爬虫技术 第16节 XPath hummhumm python爬虫开发语言flaskjavamavenjava-ee
    XPath是一种在XML文档中查找信息的语言，尽管XML和HTML在语法上有区别，但XPath同样适用于HTML文档的解析，尤其是在使用如lxml这样的库时。XPath提供了一种强大的方法来定位和提取XML/HTML文档中的元素和属性。XPath基础XPath表达式由路径表达式组成，它们指定了文档中的位置。下面是一些基本的XPath语法：根节点：/表示绝对路径的开始，指向文档的根节点。//表示从当
  • 2.渲染管线——应用阶段 无敌最俊朗@ 渲染管线unity
    渲染管线的应用阶段（ApplicationStage）是渲染流程的第一步，负责准备和提交渲染所需的数据。这个阶段由应用程序（如游戏引擎、3D建模软件）控制，开发者在这里定义场景中的物体、材质、灯光、相机等，并将这些数据传递给图形API（如OpenGL、DirectX、Vulkan），以便进入后续的渲染管线。认真讲解：应用阶段的核心任务场景数据的准备：应用程序需要加载3D模型、纹理、材质、灯光等信息
  • 小马模拟器-第三方全街机游戏模拟器 私人珍藏库 游戏
    链接：https://pan.xunlei.com/s/VOHSiB6st-f3RWlIK01MS2fUA1?pwd=44v7#1.小马模拟器是一款完全免费的游戏模拟器软件，支持街机（FBA,MAME,PGM2）,3DS,WII,NGC,DC,SS,DOS,MD,WSC,NDS,JAVA,PCE,FC,SFC,GBA,GBC,PSP,PS,N64等多种游戏机，后续还将不断增加中。软件内集成了ROM
  • Python Web开发 twc829 Python
    Web开发介绍一、Web开发概述1C/S结构和B/S结构C/S—Client/Server，即客户机/服务器结构B/S—Browse/Server，即浏览器/服务器结构2B/S结构的优势2.1不用通知客户端安装某个软件2.2不用通知客户端升级2.3可轻松地实现跨平台3访问网站过程用户向服务器发起请求，服务器将HTML文件返回给用户，浏览器将HTML文件渲染成用户看到的网站；4分类4.1静态网站用户
  • 高清（200万像素）多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA weixin_30846599 php
    DH-IPC-HFW5200-IRA-0722Ahttp://download.dahuatech.com/instruction_download.php?classOne=3907&classTwo=3912&keyword=DH-IPC-HFW5200-IRA-0722Ahttp://www.dahuatech.com/product_detail-449.html转载于:https://w
  • 浏览器中实现3D全景浏览 snawy three.js全景图WebGL
    如果你用过网页版的百度地图，你大概3D全景图浏览是一种怎样的酷炫体验：在一个点可以360度环顾周围的建筑、景色，当然也可以四周移动，就像身临其境。科普全景图共分为三种：①球面全景图利用一张全景图围成一个球，自身位置位于球体内。由于图片是矩形，所以最上和最下的缝合处很明显就能够看得出来。球面全景图是最接近人眼的构建模式，若利用多个立面构建，拼接方法繁琐，性能消耗高。因此，本文介绍的是上述通过一张全景
  • 项目中 枚举与注解的结合使用 飞翔的马甲 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其他