佚名
佚名

一款利用html5和css3实现的3D立方体旋转效果教程

如何利用CSS3实现3D变换、立方体旋转效果，本文为大家分享实现思路，供大家参考，具体内容如下

3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d;
transform-style(preserve-3d)建立3D空间
perspective视镜
perspective-origin视镜基点
x:left/center/right/length/%
y:top/center/bottom/length/%
transform新增函数
rotateX():如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。
rotateY():如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。
rotateZ():rotateZ()函数指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同，
translateZ();让元素在Z轴进行位移，当其值越大时，元素离观看者越近，视觉上元素放大，反之元素缩小。
scaleZ(),scaleZ()在单独使用时，没有任何效果，需要配合其它的变形函数一起使用才会有效果。
transform-orign:旋转的基准点
x:left/center/right/length/%
y:top/center/bottom/length//%
z:length

**3D位移：**CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
**3D旋转：**CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
**3D缩放：**CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
**3D矩阵：**CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()

格式：
舞台(perspective)
容器(3D, preserve-3d)
内容

3D实现立方体盒子：

第一步：先布局好div的位置。

一款利用html5和css3实现的3D立方体旋转效果教程_第1张图片

第二步：对每个平面旋转。旋转之前的准备工作：
给舞台加上视镜,perspective(设为800px到1200px之间)
给容器加上3D效果;transform-style:preserve-3d;
上面和下面绕着X轴旋转。左面和右面绕着Y轴旋转，前面在Z轴上移动。旋转时，要设置旋转的基准点，上面以下边为旋转基准，旋转90deg,下面以上边为旋转基点，旋转90deg,左面以右边为旋转基点，旋转90deg,右边以左边作为旋转基点，旋转90deg.然后将前面沿着Z轴方向平移。
如果将视镜加给容器，在容器旋转时，就可以看到异常，如果不给容器加上transform-style:preserve-3d;那么旋转时，就只看到平面在旋转

XML/HTML Code 复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Titletitle>  
  6.     <style>  
  7.         .stage{perspective: 800px;}   
  8.         .container{width: 150px;height:150px;margin: 200px auto; position: relative;   
  9.             transform-style: preserve-3d;height:200px;transition:5s;transform-origin: center center 75px;}   
  10.         .container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}   
  11.         .left{left:-152px;transform: rotateY(90deg);transform-origin: right;}   
  12.         .right{left:152px;transform: rotateY(-90deg);transform-origin: left;}   
  13.         .top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}   
  14.         .bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}   
  15.         .front{transform: translateZ(152px);z-index:2;}   
  16.         .back{z-index:1;}   
  17.         .container:hover{transform: rotateY(360deg)}   
  18.     style>  
  19. head>  
  20. <body>  
  21.     <div class="stage">  
  22.         <div class="container">  
  23.             <div class="side front">前div>  
  24.             <div class="side back">后div>  
  25.             <div class="side left">左div>  
  26.             <div class="side right">右div>  
  27.             <div class="side top">上div>  
  28.             <div class="side bottom">下div>  
  29.         div>  
  30.     div>  
  31. body>  
  32. html>  

一款利用html5和css3实现的3D立方体旋转效果教程_第2张图片

第三步：实现3D立方体的旋转

给容器设置旋转中心,我设置的是盒子的正中心进行旋转。这样一个3D立方体的旋转效果就完成了。

为了更好的展示，我们可以将每个面换成是一张图片。

XML/HTML Code 复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Titletitle>  
  6.     <style>  
  7.         .stage{perspective: 800px;}   
  8.         .container{width: 150px;height:150px;margin: 200px auto; position: relative;   
  9.             height:200px;transition:5s;transform-origin: center center 75px;transform-style: preserve-3d;backface-visibility: hidden;}   
  10.         .container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}   
  11.         .left{left:-152px;transform: rotateY(90deg);transform-origin: right;background: url(../images/photo5.jpg);background-size:100% 100%;}   
  12.         .right{left:152px;transform: rotateY(-90deg);transform-origin: left;background: url(../images/photo4.jpg);background-size:100% 100%;}   
  13.         .top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;background: url(../images/photo3.jpg);background-size:100% 100%;}   
  14.         .bottom{top:152px;transform: rotateX(90deg);transform-origin: top;background: url(../images/photo2.jpg);background-size:100% 100%;}   
  15.         .front{transform: translateZ(152px);z-index:2;background: url(../images/photo1.jpg);background-size:100% 100%;}   
  16.         .back{z-index:1;background: url(../images/photo.jpg);background-size:100% 100%;}   
  17.         .container:hover{transform: rotateY(360deg)}   
  18.     style>  
  19. head>  
  20. <body>  
  21. <div class="stage">  
  22.     <div class="container">  
  23.         <div class="side front">div>  
  24.         <div class="side back">div>  
  25.         <div class="side left">div>  
  26.         <div class="side right">div>  
  27.         <div class="side top">div>  
  28.         <div class="side bottom">div>  
  29.     div>  
  30. div>  
  31. body>  
  32. html>  

但是这个在旋转时，有一个问题，不该看到的平面也会被看到：

一款利用html5和css3实现的3D立方体旋转效果教程_第3张图片

相反，如果通过另一种方式来实现，则不会有这个问题。不修改容器的旋转中心，通过将后面，上下左右面沿着Z轴向后平移宽度的一般，然后再将前面向前移动宽度的一般，那么旋转中心就是盒子的中心。
如下：

XML/HTML Code 复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Titletitle>  
  6.     <style>  
  7.         .stage{perspective: 800px;}   
  8.         .container{width: 150px;height:150px;margin: 200px auto; position: relative;   
  9.             transform-style: preserve-3d;height:200px;transition:5s;}   
  10.         .container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}   
  11.         .left{left:-152px;transform: translateZ(-75px) rotateY(90deg);transform-origin: right;background: url(../images/photo5.jpg);background-size:100% 100%;}   
  12.         .right{left:152px;transform: translateZ(-75px) rotateY(-90deg);transform-origin: left;background: url(../images/photo4.jpg);background-size:100% 100%;}   
  13.         .top{top:-152px;transform: translateZ(-75px) rotateX(-90deg);transform-origin: bottom;background: url(../images/photo3.jpg);background-size:100% 100%;}   
  14.         .bottom{top:152px;transform:translateZ(-75px)  rotateX(90deg);transform-origin: top;background: url(../images/photo2.jpg);background-size:100% 100%;}   
  15.         .back{transform:translateZ(-75px);z-index:1; background: url(../images/photo2.jpg);background-size:100% 100%;}   
  16.         .front{z-index:2;transform:translateZ(75px);background: url(../images/photo.jpg);background-size:100% 100%;}   
  17.         .container:hover{transform: translateZ(-75px) rotateY(360deg);}   
  18.     style>  
  19. head>  
  20. <body>  
  21. <div class="stage">  
  22.     <div class="container">  
  23.         <div class="side front">div>  
  24.         <div class="side back">div>  
  25.         <div class="side left">div>  
  26.         <div class="side right">div>  
  27.         <div class="side top">div>  
  28.         <div class="side bottom">div>  
  29.     div>  
  30. div>  
  31. body>  
  32. html>  
  33.   

在旋转过程中，一切正常：

一款利用html5和css3实现的3D立方体旋转效果教程_第4张图片

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文地址：http://blog.csdn.net/liuyan19891230/article/details/51233866

你可能感兴趣的:(一款利用html5和css3实现的3D立方体旋转效果教程)

  • 深入解析：Tableau在数据可视化中的高级应用 Echo_Wish 实战高阶大数据信息可视化数据分析数据挖掘
    深入解析：Tableau在数据可视化中的高级应用引言在大数据时代，数据可视化已成为数据分析中不可或缺的一部分。作为一款广受欢迎的数据可视化工具，Tableau以其强大的功能和灵活性，赢得了众多数据分析师的青睐。然而，许多人在使用Tableau时，仅停留在基本操作层面，未能充分发挥其潜力。本文将深入探讨Tableau的高级应用，展示其在复杂数据分析中的强大能力，并以具体实例说明其实际应用效果。数据预
  • 深度学习在医疗影像分析中的革命性应用 Echo_Wish 人工智能前沿技术深度学习人工智能
    深度学习在医疗影像分析中的革命性应用引言医疗影像分析是现代医学中不可或缺的一部分，特别是在疾病诊断和治疗过程中发挥了至关重要的作用。随着深度学习技术的发展，医疗影像分析的效率和准确性得到了显著提升。本文将探讨如何利用深度学习技术，特别是Python编程语言，来优化医疗影像分析，展示具体的代码实例，并举例说明其实际应用效果。深度学习与医疗影像分析深度学习（DeepLearning）是一种基于人工神经
  • 无人机避障——配置新NX Perishell 无人机
    TerminalUbuntu安装Terminator及设置为默认终端_ubuntu安装terminator-CSDN博客谷歌拼音基于ubuntu20.4安装谷歌拼音中文输入法_ubuntu安装google输入法-CSDN博客JetsonOrin和Xaviernx的风扇调节Orinnx的默认风扇速度太慢，nx发烫的厉害，需要调节风速https://zhuanlan.zhihu.com/p/66558
  • 【CVPR 2021】Knowledge Review：知识蒸馏新解法 BIT可达鸭 深度学习人工智能计算机视觉模型压缩知识蒸馏
    【CVPR2021】KnowledgeReview：知识蒸馏新解法论文地址：主要问题：主要思路：符号假设：具体实现：实验结果：关注我的公众号：联系作者：论文地址：https://jiaya.me/papers/kdreview_cvpr21.pdf主要问题：目前大部分关于KD的方法都是基于相同层或者相同Block之间的知识迁移。但是Teacher往往深层表示抽象的语义信息，底层表示简单的知识的信息
  • vue3+vite 自动引入export default的包 大橙子- vue.js前端
    importautoImportfrom'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[vue(),vueJsx(),autoImport({imports:['vue','vue-router','pinia',{//相当于importuseRouterStackStorefrom'@/store/modules/r
  • 前端超长列表，虚拟滚动实现 大橙子- 前端cssjavascript
    虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main
  • ECharts 柱状图X轴或Y轴空值无数据不占位不渲染不展示 大橙子- echarts前端javascript
    效果查看：将option复制到echarts解析垂直方向：//垂直方向代码示例option={legend:{//这里data省略echarts会自动匹配，也可自行配置},xAxis:[//关键点：多个X轴进行匹配{type:'category',position:'bottom',data:['2021','']//空字符串则不会展示},{type:'category',position:'bo
  • DeepSeek使用中的问题及解决方案（部分） WeiLai1112 DeepSeek人工智能
    1.模型部署与配置问题问题1：环境依赖冲突现象：安装模型依赖库时出现版本不兼容（如Python、PyTorch版本冲突）。解决方案：使用虚拟环境（如conda或venv）隔离依赖。严格按照官方文档的版本要求安装依赖，例如：condacreate-ndeepseekpython=3.9condaactivatedeepseekpipinstalltorch==2.0.1transformers==4
  • vue制作导航栏html,Vue实现导航栏菜单 DataQueen vue制作导航栏html
    本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
  • python whoosh clisy python开源搜索
    原文地址：http://whoosh.ca/wikiWhoosh:高效的纯python全文搜索组件Whoosh是一个纯python实现的全文搜索组件。Whoosh不但功能完善，还非常的快。Whoosh的作者是MattChaput，由SideEffectsSoftware公司开发。项目的最初用于Houdini（SideEffectsSoftware公司开发的3D动画软件）的在线帮助系统。SideEf
  • 如何更好的设计测试用例？ 爱如 少年 笔记
    测试用例设计的最基本要求：覆盖住所要测试的功能。这是再基本不过的要求了，但别看只是简单的一句话，要能够达到切实覆盖全面，需要对被测试产品功能的全面了解、明确测试范围(特别是要明确哪些是不需要测试的)、具备基本的测试技术(如：等价类划分等)等。那么满足了上述这条要求是不是设计出来的测试用例就是好的测试用例了呢?答案：在理论上是，但在实际工程中还远远不是。之所以理论和实际会有这样的差别，是因为在理论上
  • 钉钉酷应用开发 死神黑夜降临 项目酷应用
    钉钉酷应用开发注意事项背景介绍注意事项1开发注意2授权注意3上线注意背景介绍钉钉针对应用进行微化的一种升级，与应用是绑定一起的。注意事项1开发注意钉钉应用分为三方应用和企业内部应用，酷应用依托于钉钉应用，故其也存在三方应用和内部应用的区分二者的不同点，三方酷应用想在手机端调试或者电脑端调试，需要提交发布申请，提交后，填写的访问地址链接不能修改；内部应用不存在这个问题，是可以随时修改的，这点很重要，
  • 勒索病毒攻击：如何应对和恢复 测试者家园 网络安全软件测试质量效能web安全安全网络运维项目管理病毒
    近年来，勒索病毒（Ransomware）已经成为全球信息安全领域最具破坏力的威胁之一。无论是个人用户，还是大中型企业，甚至政府机构，勒索病毒的攻击频率和破坏性日益增加。2020年及2021年，勒索病毒攻击不仅数量激增，且其攻击手法、目标和传播方式也变得更加复杂、精密和具有针对性。勒索病毒是一种恶意软件，它通过加密受害者的文件、系统或网络，迫使受害者支付赎金以恢复访问权限。虽然支付赎金可能暂时解决问
  • vue3 项目如何接入 AI 大模型 代码搬运媛 人工智能
    以下是在Vue3项目中接入AI大模型的一般步骤：准备工作确定要接入的AI模型，如OpenAI的gpt-3.5-turbo、科大讯飞的星火大模型等。选择AI模型及获取API密钥：注册对应AI平台的账号，进入账户设置页面找到“ViewAPIKeys”或类似选项，创建属于自己的API密钥，并妥善保存。创建Vue项目并安装依赖打开命令行，使用vuecreate项目名命令创建一个新的Vue项目，按照提示完成
  • vue-router 中滚动行为设置的妙用 代码搬运媛 vue.jsjavascript前端
    在vue-router里，滚动行为设置能够对路由切换时的页面滚动位置进行控制，这在单页面应用（SPA）里十分有用，能够为用户带来更流畅、更符合预期的浏览体验。下面为你详细介绍滚动行为设置的作用和使用方法。作用恢复滚动位置当用户在某个页面滚动到特定位置后，再导航到其他页面，之后又返回到该页面时，滚动行为设置可以让页面恢复到之前的滚动位置。这在浏览长页面或者列表页时非常实用，用户无需重新滚动到之前查看
  • Java集合之ArrayList（含源码解析 超详细） &星辰入梦来& Java集合javapython开发语言
    1.ArrayList简介ArrayList的底层是数组队列，相当于动态数组。与Java中的数组相比，它的容量能动态增长。在添加大量元素前，应用程序可以使用ensureCapacity操作来增加ArrayList实例的容量。这可以减少递增式再分配的数量。ArrayList继承于AbstructList，实现了List，RandomAccess，Cloneable，Java.io.Serializa
  • 设计模式-模板方法实现 阿绵 设计模式java开发语言
    文章目录模式结构模式特点示例代码输出结果关键点解析模式的优缺点使用场景总结模板方法模式（TemplateMethodPattern）是一种行为型设计模式，它定义了一个操作中的算法骨架，而将某些步骤的实现延迟到子类中。通过这种方式，模板方法模式可以让子类在不改变算法结构的情况下，重新定义算法中的某些步骤模式结构模板方法模式的结构包括以下几个关键部分：抽象类（AbstractClass）：定义算法的骨
  • 数据库基础以及 MySQL 知识点 阿绵 计算机基础数据库mysql
    文章目录1、基本概念2、主键和外键的区别2.1、使用外键的优劣3、数据库范式4、drop、delete与truncate区别？5、MySQL1、基础概念2、存储引擎2.1、InnoDB和MyISAM区别2.2、InnoDB如何保持事务的四大特性（实现事务的原理）3、锁机制与InnoDB锁算法3.1、表级锁和行级锁对比4、事务4.1、ACID特性4.2、并发事务带来的问题4.3、事务隔离级别1、基本
  • LLM论文笔记 14: The Impact of Positional Encoding on Length Generalization in Transformers Zhouqi_Hua 大模型论文阅读论文阅读人工智能深度学习笔记语言模型
    Arxiv日期：2023.12.15机构：McGillUniversity/IBM/Facebook/ServiceNow关键词长度泛化位置编码CoT核心结论1.decoder-only中不显式使用位置编码（NoPE）可以提高长度泛化性能2.（证明了）decoder-onlytransformer如果NoPE同时具备绝对APE和RPE的能力3.暂存器（cot）对于长度泛化和任务相关，同时关注短期和
  • mid-360|环境配置及传感器特定方向点云数据提取 yangjh542426 px4rosubuntuubuntu无人机
    本文将使用mid360实现简单的识别前方有障碍物时无人机悬停功能环境配置新建文件夹用于存储SDK以及ROS包gitclonehttps://github.com/Livox-SDK/Livox-SDK2.gitcdLivox-SDK2mkdirbuildcdbuildcmake..makesudomakeinstall完成sdk的安装根目录下gitclonehttps://github.com/L
  • Linux基础（2）：APT及YUM包管理工具及apt命令 lishing6 linuxubuntu
    在windows操作系统中，我们要想安装某个软件的时候，只要点开相应的exe文件，一直按“下一步”，最后点“完成”，这样就可以在我们电脑上使用这个软件了。前面我们也提到过，Ubuntu提供了一个软件商店，虽然它也可以提供软件的下载，并且能够自动安装，但是有些软件并不一定能够在里面搜索得到，那只能以源码的方式来安装软件。采用源码的安装方式，都需要检测当前的系统环境，设置编译的参数，如加入/剔除某个模
  • 学习路之微服务--PHP中实现微服务几种方式 hopetomorrow 微服务学习微服务php
    学习路之微服务--PHP中实现微服务实现微服务是一种将应用程序拆分成小型、独立的服务，每个服务都专注于完成特定的业务功能。通过这种方式，可以实现系统的高可伸缩性、可靠性和可维护性。在PHP中实现微服务可以采用以下几种方法：使用框架和组件：PHP提供了许多流行的框架和组件，如Laravel、Symfony和Lumen等，这些框架提供了许多开箱即用的功能，可以简化微服务的开发。可以使用这些框架来创建独
  • Python性能优化：懒加载与其他高级技巧 车载testing pytest数据驱动框架开发pythonpython数据库开发语言
    Python性能优化：懒加载与其他高级技巧在软件开发中，我们经常会遇到一些需要大量资源或时间来初始化的对象。如果这些对象在程序的整个生命周期中只被使用一次或很少使用，那么在程序启动时就立即初始化它们将是一种资源浪费。什么是懒加载？懒加载是一种设计模式，它推迟了对象的初始化直到其被实际需要的时候。这种方式可以提高程序的启动速度，减少内存消耗，并在某些情况下提高性能。实现懒加载的步骤定义类和属性：首先
  • Click：构建Python命令行界面的利器 车载testing pythonpythonlinux开发语言
    Click：构建Python命令行界面的利器Click是一个Python包，它允许开发者以最少的代码创建出美观、功能丰富的命令行界面（CLI）。它以其高度的可配置性、合理的默认设置以及简洁的API而受到广泛欢迎。本文将详细介绍Click的核心API组件，并提供示例代码，帮助你快速掌握Click的基本用法。1.Decorators（装饰器）装饰器是Click中用于定义命令和参数的强大工具。click
  • Python 队列的使用：掌握先进先出的数据结构 车载testing python
    Python队列的使用：掌握先进先出的数据结构队列是一种先进先出（FIFO）的数据结构，它在多种编程场景中都非常有用，比如任务调度、事件处理等。在Python中，我们可以通过标准库中的queue模块来实现队列。本文将详细介绍如何使用Python的queue模块来创建和操作队列。导入Queue模块使用queue模块之前，我们需要先导入它：fromqueueimportQueue创建队列创建一个队列实
  • Whoosh: 一个功能强大的纯Python全文搜索引擎 富珂祯
    Whoosh:一个功能强大的纯Python全文搜索引擎whooshWhooshisafast,featurefulfull-textindexingandsearchinglibraryimplementedinpurePython.项目地址:https://gitcode.com/gh_mirrors/wh/whooshWhoosh是一个快速且功能丰富的全文索引和搜索库，完全使用Python实现
  • pycdc 安装和配置指南 左洋蔷Rory
    pycdc安装和配置指南pycdcC++pythonbytecodedisassembleranddecompiler项目地址:https://gitcode.com/gh_mirrors/py/pycdc1.项目基础介绍和主要的编程语言项目名称:pycdc项目简介:pycdc是一个用C++编写的Python字节码反编译器和反汇编器。它的目标是帮助开发者将编译后的Python字节码（.pyc文件）
  • Whoosh：一款优秀的纯Python全文搜索库 沈书苹Peter
    Whoosh：一款优秀的纯Python全文搜索库whooshPure-Pythonfull-textsearchlibrary项目地址:https://gitcode.com/gh_mirrors/who/whooshWhoosh是一个快速、功能丰富的全文索引和搜索库，完全使用Python编写。它允许程序员轻松地将搜索功能添加到他们的应用程序和网站中。项目基础介绍Whoosh是一个纯Python项
  • 高并发系统架构设计全链路指南 power-辰南 java技术架构师成长专栏系统架构分布式高并发springcloud
    第一章：架构优化核心目标：提升系统高并发&高可用能力，优化架构，提高吞吐量。1.1微服务高可用优化解决问题：微服务可能存在单点故障、扩展性差、调用效率低等问题。1.1.1服务无状态化目的：让服务实例可以随时扩缩容、快速恢复，避免单点故障。可能的问题现象影响本地存储Session，导致用户粘连某个实例实例挂掉后，用户重新登录订单等业务逻辑依赖本地缓存容器扩缩时数据丢失静态文件（Excel/图片）存本
  • 【dingding】钉钉应用开发总结 小墨鱼_z dingding钉钉数学建模servlet
    对接钉钉应用的开发过程中遇到的问题1、在header里放入钉钉监控中心代码块varisDingtalk=navigator&&/DingTalk/.test(navigator.userAgent);varisProductEnv=window&&window.location&&window.location.host&&window.location.host.indexOf('127.0.0
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他