時陨星
時陨星

CSS3控制变量输出精灵图序列帧动画 frameAnime.css

frameAnime.css 【CSS精灵图序列帧动画】：


资源链接：

文档案例：http://miikio.gitee.io/frame-anime.css/
备用下载：https://pan.baidu.com/s/1n1BOR33y8aC2LtZvofaocg 丨 提取码：v2wr

简述：

  • frameAnime 是通过控制CSS变量，以CSS3动画的方式播放精灵图序列帧，达到类似于gif动图的效果。
  • 精灵图原理：https://www.cnblogs.com/evenyao/p/9262371.html
  • 序列帧原理：https://blog.csdn.net/qq_32849999/article/details/81874422
  • 兼容性：浏览器需支持W3C的CSS3规范，IE下不支持使用。
  • 优点：
    • 无损画质，将每帧画面合并到一张静态图内，可避免gif的画质压缩。
    • 性能卓越，只使用CSS3的特性来实现效果，不需经过JS来播放画面。
    • 动态呈现，使用变量控制画面属性，可灵活变动画面效果。
  • 缺点：
    • 严谨性，制作图片时每帧画面都需要很精确，稍有偏差可能会导致画面变形。
    • 封闭性，当精灵图为网格状时，每张图需填满格子不能留有空白处，否则会出现闪烁帧。
    • 维护难，在修改或调整画面时，如果尺寸大小帧数等稍有改动，一般都要重新合并图片和设置变量。

变量规则：

--step: 每秒显示帧数
--frame: 单个扫描方向轴上含有帧数
--frame-x: 单个X轴上含有帧数 (设置时生效)
--frame-y: 单个Y轴上含有帧数 (设置时生效)

--un: 图片长度单位
--size: 每帧图大小，实际帧大小公式：图片短边的长度 / 扫描方向的行列数
--wh-w: 宽大于高时使用的实际图片宽高比，示例：calc(16 / 9)
--wh-y: 高大于宽时使用的实际图片宽高比，示例：calc(9 / 16)
--w: 帧画面计算宽度
--h: 帧画面计算高度

--bx: 启用向左横向扫描 ( 0: 关闭 | 1: 开启 )
--by: 启用向下纵向扫描 ( 0: 关闭 | 1: 开启 )

--r: 图片基础旋转角度
--x: 图片X轴基础偏移
--y: 图片Y轴基础偏移
--s: 图片整体缩放大小
--sx: 图片X轴缩放大小 (设置时生效)
--sy: 图片Y轴缩放大小 (设置时生效)

--o-r: 动画原始旋转角度
--e-r: 动画结束旋转角度

--o-x: 动画原始X轴偏移
--o-y: 动画原始Y轴偏移
--e-x: 动画结束X轴偏移
--e-y: 动画结束Y轴偏移

--o-sx: 动画原始X轴图片缩放大小
--o-sy: 动画原始Y轴图片缩放大小
--e-sx: 动画结束X轴图片缩放大小
--e-sy: 动画结束Y轴图片缩放大小

--iteration-self: 自身动画重复次数
--iteration-move: 自身运动重复次数

注意事项：

  • --step 必要参数，相当于 fps/s，影响画面输出的实际帧率。
  • --frame 必要参数，表示精灵图在一行或一列中含有的帧数，影响输出到画面的帧个数和帧宽高。
  • --frame-x 用在精灵图有多行时，表示在一行中含有的帧数，从上往下按照每行从左到右逐行扫描。
  • --frame-y 用在精灵图有多列时，表示在一列中含有的帧数，从左往右按照每列从上到下逐列扫描。
  • --frame-x 或 --frame-y 用在多行或多列时会覆盖 --frame，单行或单列时不建议设置 --frame-x 和 --frame-y。
  • --un 默认为页面宽高比最小的视口单位 (自适应)，页面视口宽度大于高度时为 1vh，反之 1vw。--size 为实际帧大小时应设为 1px。
  • --size 配合 --wh-w 或 --wh-y 使用，表示图片扫描方向相反的边的长度，按照宽高比计算大小。
  • --wh-w 和 --wh-y 按照图片最长的边来设置，若宽大于高只需设置 --wh-w，反之 --wh-h，值均为 图片宽度 / 图片高度。
  • --w 和 --y 一般不需要设置，以 --wh-x 或 --wh-y, --size, --frame 计算宽高度即可。
  • --bx 和 --by 控制动画的帧扫描方向，--bx: 1; --by: 0;表示向左横向扫描，--bx: 0; --by: 1;表示向下纵向扫描。
  • --r 控制画面的基础旋转角度，--o-r, --e-r 分别表示动画开始时和结束时的旋转角度与基础旋转角度之和。
  • --s 控制画面的整体缩放大小，--sx, --sy 分别单独控制X轴和Y轴的缩放大小，负数时显示方向为反方向。
  • --x , --y 分别控制画面的X轴和Y轴的基础偏移，按照帧画面宽高百分比计算。
  • --o-x, --o-y, --e-x, --e-y 与 --o-r, --e-r 同理，均为控制自身运动的X轴和Y轴的偏移，按照帧画面宽高百分比计算。
  • --o-sx, --o-sy, --e-sx, --e-sy 与 --o-r, --e-r 同理，均为控制自身运动的X轴和Y轴的缩放大小。
  • --iteration-move 包含精灵图动画的旋转、缩放、偏移。
  • --iteration-self 仅包含精灵图动画的帧画面变化。

用法：

  • 基础用法：
    <head>
	<link rel="stylesheet" href="frameAnime.css" />
	<style>
		.img {
        
			/* frameAnime CSS变量自定义参数 */
			background-image: url(...);
		}
	style>
head>
<body>
	<div class="frameAnime img"><div>
body>
  • 暂停/停止播放动画：
    
<div class="frameAnime img pause"><div>


<div class="frameAnime img end"><div>
  • 精灵图含有多个扫描轴时初始化配置 (使用 js)：
    <div class="frameAnime _x2 img"><div>
<div class="frameAnime _y3 img"><div>


<script type="text/javascript" src="frameAnime.js">script>
<script>
	// 初始化页面内多行多列帧动画的源配置
	frameAnime_init();
script>
  • 精灵图含有多个扫描轴时亦可按需添加多行或多列动画规则 (不使用 js)：
    • 类命名规则：前缀类 frameAnime + 命名类 _x[Number] 或 _y[Number]
    • 示例命名：
      • .frameAnime._x5 : _x表示帧动画从上往下按照每行从左到右逐行扫描，5表示共逐行扫描5行
      • .frameAnime._y4 : _y表示帧动画从左往右按照每列从上到下逐列扫描，4表示共逐列扫描4列
    • 需添加的 CSS 格式 (注意 @keyframes 的规律性)：
      /* 需要注意 _x[Number] 所指向的扫描轴数量 */
.frameAnime._x5 {
         
    --frame-y: 5;  /* 表示扫描轴为X轴共5行，Y轴是每行扫描轴的叠放方向 */
    --w: calc(var(--size) * var(--wh-w) * var(--frame-y));
    --h: calc(var(--size) / var(--wh-h) * var(--frame-y));
    animation:
        frameAnime-self_x5 calc(1s / (var(--step) / var(--frame-x, var(--frame)))) steps(var(--frame-x, var(--frame))) var(--iteration-self),
        frameAnime-move calc(1s / (var(--step) / var(--frame))) steps(var(--frame)) var(--iteration-move);
}
/* 把逐行关键帧分成5份，每份的值为 100% / 5 累加 */
@keyframes frameAnime-self_x5 {
         
    0%, 20% {
          --a-self_x5: 0; }
    20.001%, 40% {
          --a-self_x5: 0.2; }
    40.001%, 60% {
          --a-self_x5: 0.4; }
    60.001%, 80% {
          --a-self_x5: 0.6; }
    80.001%, 100% {
          --a-self_x5: 0.8; }
    20.001%, 40.001%, 60.001%, 80.001% {
         
    	background-position: 0 calc(var(--un) * var(--h) * var(--a-self_x5) * -1);
	}
    20%, 40%, 60%, 80%, 100% {
         
    	background-position: calc(var(--un) * var(--w) * -1) calc(var(--un) * var(--h) * var(--a-self_x5) * -1);
	}
}

.frameAnime._y4 {
         
    --frame-x: 4;  /* 表示扫描轴为Y轴共4列，X轴是每列扫描轴的叠放方向 */
    --w: calc(var(--size) * var(--wh-w) * var(--frame-x));
    --h: calc(var(--size) / var(--wh-h) * var(--frame-x));
    --bx: 0;
    --by: 1;
    animation:
        frameAnime-self_y4 calc(1s / (var(--step) / var(--frame-y, var(--frame)))) steps(var(--frame-y, var(--frame))) var(--iteration-self),
        frameAnime-move calc(1s / (var(--step) / var(--frame))) steps(var(--frame)) var(--iteration-move);
}
@keyframes frameAnime-self_y4 {
         
    0%, 25% {
          --a-self_y4: 0; }
    25.001%, 50% {
          --a-self_y4: 0.25; }
    50.001%, 75% {
          --a-self_y4: 0.5; }
    75.001%, 100% {
          --a-self_y4: 0.75; }
    25.001%, 50.001%, 75.001% {
         
    	background-position: calc(var(--un) * var(--w) * var(--a-self_y4) * -1) 0;
	}
    25%, 50%, 75%, 100% {
         
    	background-position: calc(var(--un) * var(--w) * var(--a-self_y4) * -1) calc(var(--un) * var(--h) * -1);
	}
}

更多案例请参考文档：http://miikio.gitee.io/frame-anime.css/

你可能感兴趣的:(html,css,css3,html,html5,css,css3,javascript)

  • Reached heap limit Allocation failed - JavaScript heap out of memory 祝余、 javascript开发语言ecmascript
    问题vue3打包时提示ReachedheaplimitAllocationfailed-JavaScriptheapoutofmemory解决方法（vue3可用）npminstallcross-envincrease-memory-limit然后检查package.jons文件下“scripts”是否有“fix-memory-limit”，如果没有，手动添加如下代码"scripts"：{"fix-
  • mac+CLion+redis6.2本地源码调试 王冬的csdn redisredis
    1.下载安装CLion下载地址：https://www.jetbrains.com.cn/clion/download/other.html安装过程自行百度2.下载redis源码gitclonehttp://github.com/redis/redis.git3.添加CMakeLists.txt文件1、\redis-6.2\cmake_minimum_required(VERSION3.0FATA
  • html5 判断长按操作,移动端h5模拟长按事件 weixin_39933414 html5判断长按操作
    1、标志位vartimer='';varisLongTouch=false;//加个标志位，防止settimeout因为事件循环和实际时间有偏差vartarget=document.getElementById('target');target.addEventListener('touchstart',function(){timer=setTimeout(function(){isLongTo
  • electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了 阿毛sky electronvue前端
    由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
  • Node.js使用教程 m0_74824112 面试学习路线阿里巴巴node.jsvim编辑器
    Node.js使用教程Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它让JavaScript运行在服务器端。以下是一个简单的Node.js使用教程：一、Node.js开发环境和编译1.1安装Node.js访问Node.js官网下载并安装适合您操作系统的Node.js版本。1.2创建一个Node.js项目在您的工作目录中，创建一个新的文件夹作为项目目录，例如命名为my_
  • 【CSS】图片比例完整展示与滚动查看 Peter-Lu #CSS开发语言前端css
    文章目录一、问题背景二、问题分析为什么`100vh`会压缩图片高度？为什么固定像素高度有效？三、解决方案与改进1.页面布局代码2.样式代码3.核心点解读容器高度图片样式滚动支持在前端开发中，如何高效地展示多张图片，并确保图片保持原始比例，同时兼顾滚动查看的需求，是一个常见的问题。本文将通过一个实际案例，讲解如何解决100vh固定高度导致图片被压缩的问题，以及如何改进页面布局让滚动与展示兼顾。一、问
  • nodejs：express + js-mdict 网页查询英汉词典，能播放声音 belldeep nodejsweb服务nodejsexpressjs-mdict
    向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.
  • nodejs：express + js-mdict 网页查询英汉词典，能显示图片 belldeep nodejsjavascriptnodejsjavascriptjs-mdictexpress
    向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉
  • three.js性能优化 火辣辣- 学习总结学习笔记three.js性能优化
    本文持续更新~~~参考文章three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。在使用的时候，虽然three.js做了优化，但是在使用不恰当的代码，也会产生性能损耗。帧率越低，给人感觉就越卡。这是我在开发中自己百度总结的，有不对的可以联系我啊2019-08-22更新———————1、disppose()方法得重要性每当你创建一个three.js中的实例时，都会
  • vue字符串的常用方法，截取字符串，获取字符串长度，检索字符串 luckyext vue.jsjavascript前端
    1.使用substr方法截取字符串letstr="12345";letpart=str.substr(0,3);//截取从索引0开始到索引3的子字符串console.log(part);//"123"2.获取字符串长度JavaScript中的字符串有一个length属性，该属性可以用在VUE获取字符串的长度conststr='hello';str.length输出结果：53.检索字符串是否包含特定
  • 使用JvaScript做一个猜数字游戏And条件语句和循环语句整合 偷只猫来养 javascript游戏js
    **使用JvaScript做一个简单的猜数字游戏（这里设置的数字范围是0-100）**JavaScript是一门目前流行的面向对象的脚本语言，可以使用它来做很多事情，这里为大家分享一下如何使用js语言来写出一个猜数字游戏。1、需求用户可以控制游戏的开始和结束。在用户点击开始后，系统自动为用户生成一个0-100的随机数，用户在输入框中输入内容后点击确认后可以根据输入内容提示相关信息。2、逻辑分析使用
  • 【Jvascript 算法】-- JavaScript实现对树结构数据的增删以及树型数据与数组的相互转换 野生松
    在日常开发中我们经常会碰到树结构数据，以下是我的笔记：constarr=[{id:2,name:'部门B',parentId:0},{id:3,name:'部门C',parentId:1},{id:1,name:'部门A',parentId:2},{id:4,name:'部门D',parentId:1},{id:5,name:'部门E',parentId:2},{id:6,name:'部门F',p
  • 使用JavaScript设计一款简单的数字时钟 布啦啦李 javascript时钟
    本文目录使用JavaScript设计一款带日期显示的数字时钟效果预览1.项目概述2.HTML结构代码说明3.CSS样式代码说明4.JavaScript逻辑代码说明5.运行效果使用JavaScript设计一款带日期显示的数字时钟本文将详细介绍如何使用HTML、CSS和JavaScript设计一款带日期显示的数字时钟。我们将逐步讲解每一行代码的作用，帮助你理解如何实现一个实时更新的时钟，并扩展功能以显
  • 转：javascript获取上一访问页面 dianai7709 javascript移动开发ViewUI
    原文链接：移动端返回上一页，刚需！document.referrer详解全文如下：返回上一页，在PC端我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。这样，我们不需要上一页的url具体是什么，只要使用history一般都没啥问题。但是在移动端，如果想要返回上一页。比如从A页面跳到B页面，如果B页面想返回A页面，为了防止不会跳错，必须要有一个返回那如果
  • DPlayer + vue3 使用 是晓周哦 javascriptvue.js前端视频typescript
    帮助文档https://dplayer.diygod.dev/zh/guide.html#special-thanks安装pnpminstalldplayer--savepnpminstall@types/dplayer--save-dev使用方法import{ref,onMounted,onBeforeUnmount}from'vue';importDPlayerfrom'dplayer';im
  • qt 使用qss控制界面外观 yaofei2006 qt开发语言ui
    在Qt中，QSS（QtStyleSheets）是一种基于CSS（CascadingStyleSheets）的样式表语言，用于自定义Qt应用程序的外观。通过QSS，你可以轻松地修改控件的颜色、字体、边框、背景等属性，而无需修改代码。以下是使用QSS的详细指南：1.基本语法QSS的语法与CSS类似，由选择器和声明块组成：选择器{属性:值;属性:值;}示例QPushButton{background-c
  • 前端为什么要使用new Promise包裹一个函数 没资格抱怨 JS核心前端javascript
    在前端开发中，使用newPromise包裹一个函数主要是为了将原本不支持Promise规范的操作转化为支持Promise规范的操作，从而可以更好地处理异步操作，提升代码的可读性和可维护性。下面详细介绍这么做的常见原因和应用场景：1.封装回调风格的异步操作在JavaScript中，早期的异步操作（如setTimeout、XMLHttpRequest等）通常使用回调函数来处理结果。这种方式容易导致回调
  • 多语言实现图像生成的API调用指南 IT·小灰灰 人工智能数据挖掘深度学习语言模型图像处理AI作画
    在现代软件开发中，API（应用程序编程接口）的使用变得越来越普遍。无论是JavaScript、Python、Go还是Java，开发者们都需要与各种API进行交互以实现特定的功能。本文将通过一个具体的例子，展示如何使用不同的编程语言调用一个图像生成的API，并生成一幅描述海岛的图像。目录API获取方式正文1.JavaScript实现2.Python实现3.Go实现4.Java实现结语API获取方式前
  • Bootstrap4 信息提示框 lsx202406 开发语言
    Bootstrap4信息提示框Bootstrap是一个流行的前端框架，它提供了一系列的工具和组件来帮助开发者快速搭建响应式网站。在Bootstrap4中，信息提示框（Tooltip）是一个非常有用的组件，它可以帮助用户更好地理解页面上的元素。本文将详细介绍Bootstrap4的信息提示框组件，包括其基本用法、配置选项以及与实际应用的结合。一、基本用法1.1HTML结构要使用Bootstrap4的信
  • JavaScript系列（68）--运行时优化技术详解 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascriptjava前端
    JavaScript运行时优化技术详解今天，让我们深入探讨JavaScript的运行时优化技术。运行时优化是提升JavaScript应用性能的另一个关键环节，它关注代码在实际执行过程中的性能表现。运行时优化基础概念小知识：JavaScript运行时优化是指在代码执行过程中，通过各种技术手段来提高代码的执行效率。这包括即时编译（JIT）、内联缓存、类型特化等技术。基本优化实现//1.函数执行优化器c
  • i510300h和i78750h参数对比哪个好 妙龙 笔记本
    i510300H是笔记本平台的标准电压处理器，为四核心八线程，主频2.5GHz，睿频4.5GHz，45WTDP，8M三级缓存，passmark跑分为9026分。我的笔记本就是活动时8折抢购的https://list.jd.com/list.html?i7-8750H的规格是6核心12线程，coffcelake架构，主频2.2GHz，单核最大睿频4.1GHz，六核最大睿频3.9GHz，L3缓存9MB
  • 腾讯云通过API怎样调用deepseek ZhangJiQun&MXP 2024大模型以及算力教学智能合约语言模型人工智能自然语言处理深度学习
    腾讯云通过API怎样调用deepseek目录腾讯云通过API怎样调用deepseekhtml方式curl方式重点说明：不需要SK，仅仅使用ip和端口号html方式<metacharset=
  • Pinia入门 qincjun 前端学习指南pinia
    一、铺垫pinia官网：https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网；只不过有时候访问官网上不去；只能自己扒下来；pinia的前端使用非常简单；只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia：yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并
  • 前端开发：CSS选择器 qincjun css前端
    一、基础选择器1.1标签选择器通用型，一次将所有的同类型标签设置成相同属性；p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名；是此类名的是一样的CSS格式睡觉//一个元素可以赋予多
  • 前端框架Vue内容回顾 GISer_Jinger JavascriptVue前端框架vue.js前端
    前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试，这份详细指南将帮助你掌握Vue核心知识，助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染：Vue采用数据驱动视图的方式，通过{{}}语法或v-bind绑定数据，无需手动操作DOM。组件化开发：Vue提供了单文件组件（SFC），支持HTML、CSS、JS组合在.vue文件中，提高代码复用性和可维护性。数据驱动：Vue采
  • python自动化框架pytest_全功能Python测试框架：pytest weixin_39637646
    python通用测试框架大多数人用的是unittest+HTMLTestRunner，这段时间看到了pytest文档，发现这个框架和丰富的plugins很好用，所以来学习下pytest.image.pngpytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动
  • print不起作用 pytest_全功能Python测试框架：pytest 吕欲知 print不起作用pytest
    python通用测试框架大多数人用的是unittest+HTMLTestRunner，这段时间看到了pytest文档，发现这个框架和丰富的plugins很好用，所以来学习下pytest.pytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化
  • 【从0带做】基于Springboot3+Vue3的高校食堂点餐系统 ADFVBM 面试学习路线阿里巴巴java
    大家好，我是武哥，最近给大家手撸了一个基于SpringBoot3+Vue3的高校食堂点餐系统，可用于毕业设计、课程设计、练手学习，系统全部原创，如有遇到网上抄袭站长的，欢迎联系博主~详细介绍https://www.javaxm.cn/star/gxstdc.html项目在线体验地址体验地址：（请电脑端浏览器访问）：http://43.142.9.148:81/用户账号：aaa密码：123456系统
  • Python满屏飘字代码 Want595 趣味编程python开发语言
    系列专栏《Python趣味编程》《C/C++趣味编程》《HTML趣味编程》《Java趣味编程》系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Py
  • HTML5(十二)——一文读懂 WebSocket 原理 m0_70646989 Web前端经验分享前端前端框架
    二、WebSocket通信过程================WebSocket协议可分为两部分：握手阶段和数据通信阶段。WebSocket为应用层协议，定义在TCP/IP协议栈之上，连接服务器的url是以ws或wss开头的。ws开头的默认TCP端口为80，wss开头的默认端口为443。ws（websocket）是不安全的，容易被窃听，只要别人知道你的ip和端口号，任何人都可以去连接通讯。wss（
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩jsp文件上传
    文件的上传下载都是数据流的输入输出，大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n
  • 【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
      以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
  • spark master web ui 端口8080被占用解决方法 daizj 8080端口占用sparkmaster web ui
    spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法：   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分
  • oracle_执行计划_谓词信息和数据获取 周凡杨 oracle执行计划
      oracle_执行计划_谓词信息和数据获取(上) 一：简要说明 在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
  • spring中datasource配置 g21121 dataSource
    datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b
  • web报表工具FineReport使用中遇到的常见报错及解决办法（三） 老A不折腾 finereportFAQ报表软件
    这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width： 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
  • mysql 用户管理 墙头上一根草 linuxmysqluser
    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
  • 关于使用Spring导致c3p0数据库死锁问题 aijuans springSpring 入门Spring 实例Spring3Spring 教程
    这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
  • 百度词库联想 annan211 百度
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
  • int数据与byte之间的相互转换实现代码 百合不是茶 位移int转bytebyte转int基本数据类型的实现
    在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator *
  • 简单模拟实现数据库连接池 bijian1013 javathreadjava多线程简单模拟实现数据库连接池
    简单模拟实现数据库连接池 实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
  • 一种基于Weblogic容器的鉴权设计 bijian1013 javaweblogic
            服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
  • 【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
     任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes
  • 【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
    1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
  • 中国互联网走在“灰度”上 ronin47 管理 灰度
    中国互联网走在“灰度”上（转） 文/孕峰   第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
  • java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
    public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
  • mongoDB 用户管理 开窍的石头 mongoDB用户管理
      1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户（use admin）      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数
  • [游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
        暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天      结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气   &nb
  • java 二维数组如何存入数据库 cuiyadll java
    using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
  • 本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu javaspringlocalglobaltransaction
    Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
  • Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linuxalias
    用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常 用的长命令行变短，强制执行命令时询问等。   常用参数 格式：alias 格式：ali
  • yii2 restful web服务[格式响应] dcj3sjt126com PHPyii2
    响应格式 当处理一个 RESTful API 请求时， 一个应用程序通常需要如下步骤 来处理响应格式： 确定可能影响响应格式的各种因素， 例如媒介类型， 语言， 版本， 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组， 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]
  • MongoDB索引调优（2）——[十] eksliang mongodbMongoDB索引优化
    转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引，方式与正常
  • 当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
    拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
  • 程序员用HTML5制作的爱心树表白动画 ini JavaScriptjqueryWebhtml5css
    体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
  • 预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad预装改装windows 7windows 8
      该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！   缘由 小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
  • Nginx学习笔记 mcj8089 nginx
    一、安装nginx             1、在nginx官方网站下载一个包，下载地址是：  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工
  • mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
  • java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAOPOJODTOpoVO BO
    PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通
  • 算法复杂度 Wuaner Algorithm
    Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他