S_mile1992
S_mile1992

CSS animation动画

1. 概述

1.1 说明

在项目过程中，有时候需要使用动画效果来展现某一效果，实现动画效果的方式有很多种，而css3提供的animation属性则可直接使用样式进行控制动画效果。

1.2 动画使用

　　注意：IE10以前版本不支持animation属性

1.2.1  animation 集合使用

　　示例：div横向移动效果

DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:divmove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes divmove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
style>
head>
<body>
<div>div>
body>
html>
    • animation: name duration timing-funtion delay iteration-count direction fill-mode play-state;
      • name  对应animation-name单独属性，作用是指定要绑定到选择器的关键帧(即为@keyframes 动画指定一个名称)的名称
      • duration 对应animation-duration单独属性，定义动画完成一个周期需要多少秒(s)或毫秒(ms)，即动画播放完成花费时间。
      • timing-function 对应animation-timing-function单独属性，设置动画将如何完成一个周期(如从开始到结束以相同的速度播放动画)
      • delay 对应animation-delay单独属性，设置动画在启动前的延迟时间。
      • iteration-count 对应animation-iteration-count单独属性，定义动画的播放次数
      • direction 对应animation-direction单独属性，定义是否循环交替反向播放动画
      • fill-mode 对应animation-fill-mode单独属性，规定当动画不播放时(当动画完成或当动画有一个延迟未开始播放)，要应用到元素的样式
      • play-state 对应animation-play-state单独属性，指定动画是否正在运行或已暂停

1.2.2  animation 单独使用

　　示例：div横向移动效果

DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:divmove;
    animation-duration:5s;
    animation-iteration-count:infinite;
    -webkit-animation-name:mymove; /*Safari and Chrome*/
    -webkit-animation-duration:5s; /*Safari and Chrome*/
    -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
}

@keyframes divmove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
style>
head>
<body>
<div>div>
body>
html>
    • animation-name 为@keyframes动画指定名称；
      • animation-name: keyframename | none ;  keyframename要绑定到选择器的关键帧的名称，none指定有没有动画
    • animation-duration 定义动画完成一个周期需要多少秒或毫秒
      • animation-duration: time; time指定动画播放完成花费的时间，默认值为0，表示没有动画效果
    • animation-timing-function 指定动画将如何完成一个周期
      • animation-timing-function: linear; 动画从头到尾的速度时相同的
      • animation-timing-function: ease; 默认，动画以低速开始，然后加快，在结束前变慢
      • animation-timing-function: ease-in; 动画以低速开始
      • animation-timing-function: ease-out; 动画以低速结束
      • animation-timing-function: ease-in-out; 动画以低速开始和结束
      • animation-timing-function: cubic-bezier(n,n,n,n);    在cubic-bezier(n,n,n,n)函数中的值的范围是从0到1的数值
    • animation-delay 动画开始前等待多长时间，可以为负值(负值为进入立即开始，并且跳过设置的值进入动画)
      • animation-delay: time;定义动画开始前等待的时间，以秒或者毫秒为单位。默认值0
    • animation-iteration-count 定义动画应该播放多少次
      • animation-iteration-count: n;  n为数字，定义应该播放多少次动画
      • animation-iteration-count: infinite; 播放此时无限次

 2. 代码

2.1 代码示例

　　警报灯

<template>
  <div class="warning-warp">
    <div class="warning-item warning-content">
      <span class="bulb">span>
      <span class="bulb">span>
      <span class="bulb">span>
      <span class="bulb">span>
      <span class="bulb">span>
      <span class="bulb">span>
    div>
    <div class="warning-bottom">div>
  div>
template>

<script>
  export default {
    name: "warning"
  }
script>

<style scoped>
  .warning-warp {
    margin: 100px auto;
    width: 900px;
    display: flex;
    flex-direction: column;
  }

  .warning-warp .warning-item {
    height: 130px;
    width: 100px;
    float: left;
    margin: 0 5px;
    position: relative;
    padding: 20px 10px;
  }

  .warning-warp .warning-item.warning-content {
    border-radius: 50px 50px 0 0;
  }

  .warning-warp .warning-item.warning-content {
    background: #f00;
    box-shadow: 0 0 50px 10px #f00, inset 0 0 10px #f99;
    animation-name: warningLight;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
  }

  .warning-warp .warning-item.warning-content .bulb {
    float: left;
    width: 10px;
    height: 10px;
    margin: 10px 15px;
    background: #ffe5e5;
    box-shadow: 0 0 20px 8px white;
    border-radius: 20px;
    opacity: 0.8;
    animation-name: bulb;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
  }

  @keyframes bulb {
    0% {
      background: #ffe5e5;
      box-shadow: 0 0 20px 8px white;
    }
    50% {
      background: #ffe5e5;
      box-shadow: 0 0 40px 20px white;
    }
    100% {
      background: #ffe5e5;
      box-shadow: 0 0 20px 8px white;
    }
  }

  @keyframes warningLight {
    0% {
      box-shadow: 0 0 0 0 #f00;
    }
    50% {
      box-shadow: 0 0 50px 10px #f00, 0 0 200px 20px #f00;
      z-index: 10;
    }
    100% {
      box-shadow: 0 0 0 0 #f00;
    }
  }
  .warning-bottom {
    width: 110px;
    height: 30px;
    background: #000;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
  }
style>

2.2 结果示例

　　结果类似(自制gif)

 CSS animation动画_第1张图片

2.3 CodePen示例

转载于:https://www.cnblogs.com/ajuan/p/10867801.html

你可能感兴趣的:(CSS animation动画)

  • CSS3学习教程，从入门到精通，CSS3 布局语法知识点及案例代码（15） 知识分享小能手 编程语言如门前端开发网页开发css3学习css前端html5htmlJava后端开发
    CSS3布局知识点及案例代码一、盒模型知识点CSS盒模型是理解CSS布局的基础，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。content：盒子的内容区域，定义宽度和高度。padding：内容与边框之间的空间，可控制内容与边框的距离。border：围绕内容和内边距的边框，可设置边框的样式、宽度和颜色。margin：边框与其他元素之间
  • CSS3学习教程，从入门到精通，CSS3 盒子模型语法知识点及案例代码（13） 知识分享小能手 编程语言如门前端开发网页开发css3学习前端csshtml5htmlJava后端开发
    CSS3盒子模型语法知识点及案例代码CSS3盒子模型概述CSS3盒子模型是用于控制网页元素布局和外观的重要工具。它包括标准盒子模型、IE盒子模型以及CSS3引入的弹性盒子模型和网格布局模型。一、标准盒子模型（StandardBoxModel）语法selector{width:value;height:value;padding:value;border:value;margin:value;}wi
  • CSS3学习教程，从入门到精通，CSS3 背景样式语法知识点及案例代码（11） 知识分享小能手 编程语言如门前端开发网页开发css3学习前端csshtml5JavaJava后端开发
    CSS3背景样式语法知识点及案例代码一、背景颜色（background-color）/*设置元素的背景颜色*/selector{background-color:color-value;}selector：选择器，指定要设置背景颜色的元素。color-value：颜色值，可以是颜色名称、十六进制颜色代码、RGB颜色值或HSL颜色值等。案例：.box{width:200px;height:200px
  • CSS3学习教程，从入门到精通，CSS3 图像属性知识点及案例代码（16） 知识分享小能手 前端开发网页开发编程语言如门css3学习前端csshtml5javascriptcss前端开发
    CSS3图像属性知识点及案例代码一、图像属性概述CSS3提供了丰富的图像属性，可以控制图像的显示方式、大小、位置、滤镜效果等。以下是一些常用的图像属性：二、常用图像属性1.background-image作用:设置元素的背景图像。语法:background-image:url("image.jpg");案例:.box{width:300px;height:200px;background-imag
  • 【2017-2024】Adobe AN多功能的动画制作软件安装 HIosng adobe
    AdobeAN软件简介AdobeAnimate（简称AdobeAN）是由AdobeSystems开发的一款多功能的动画制作软件。它不仅可以用来设计二维动画，也支持创建交互性内容，为网络、游戏和应用程序提供了丰富的媒介。AdobeAnimate是创造动画、交互式内容与动态图形的强大工具，广受动画师、游戏开发者和设计师的欢迎。安装包https://pan.baidu.com/s/1BCK34EJWWu
  • CSS 创建 智慧浩海 CSScss前端
    当读到一个样式表时，浏览器会根据它来格式化HTML文档。如何插入样式表插入样式表的方法有三种:外部样式表(Externalstylesheet)内部样式表(Internalstylesheet)内联样式(Inlinestyle)外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（
  • CSS基础知识 Toreme csscss3html
    基础教程使用css和不使用比较不使用css不使用css给每一个单元格加上背景颜色就需要给每一个td元素加上bgcolor属性使用css使用css给每一个单元格加上背景颜色，只需要在最前面写一段css代码，所有的单元格都有背景颜色了，这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到不同的td有不同的背景色选择器语法css的语法selector{property:value;}即选择器{属
  • 使用vite+react+ts+Ant Design开发后台管理项目（五） 吕彬-前端 react.jsjavascript前端
    前言本文将引导开发者从零基础开始，运用vite、react、react-router、react-redux、AntDesign、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。项目gitee地址：lbking666
  • React性能优化的8种方式 Mr.BoBo. 前端#Reactreact.js性能优化前端
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言1、Reac.memo缓存组件2、使用useMemo缓存大量的计算3、避免使用内联对象4、避免使用匿名函数5、延迟加载不是立即需要的组件6、调整CSS而不是强制组件加载和卸载7、使用React.Fragment避免添加额外的DOM8、使用React.PureComponent,shouldComponentUpdate9、
  • 【React】List使用QueueAnim动画效果不生效——QueueAnim与函数组件兼容性问题 Yvette-W Reactreact.jslist前端前端框架javascript
    版本：“antd-mobile”:“^5.37.1”,“rc-queue-anim”:“^2.0.0”,问题在使用QueueAnim时，如果动画的子元素是AntDesignMobile中的组件（如List.Item），可能会遇到动画不生效的问题，并且会看到类似以下警告：Warning:Functioncomponentscannotbegivenrefs.Attemptstoaccessthisr
  • 前端实例：轮播图效果 2301_81535770 前端
    利用HTML、CSS和JavaScript实现轮播图效果。一、轮播图原理：通过给窗口设置position属性和overflow属性，使得超出窗口范围的部分被隐藏，表面可见范围只包含窗口，但实际上其内部空间很大；调整胶卷相对于窗口的位置，使得整个胶卷向左移动；调用JS中的定时器，实现轮播效果。流程图如下：二、实现自动切换效果1、HTML搭建基础框架分为图片展示窗口和上下页切换按键两部分>2、CSS设
  • css filter属性详解 pengfeixc CSScsscss3webdevelopment
    cssfilter属性详解文章中codepen例子，无法实时预览，可以在这里获得更好阅读体验。最近琢磨着把网站主题色更改一下，看到了一篇文章DarkModeinOneLineofCode，作者讲述了如何用一句代码将网站主题色更改成相反色，这样网站就可以拥有有白天模式和黑夜模式了。html{filter:invert(1);}使用上面的代码，可以很方便的将页面颜色反转，达到黑夜模式的效果。但是我并不
  • 使用hel-micro微服务实现在jsp项目中引入react组件 小灰灰学编程 微服务微服务react.jsjsphel-micro
    以下是一个完整的示例，涵盖React子应用配置、JSP主应用集成以及样式隔离的实现细节。我们将通过CSSModules和ShadowDOM确保React样式与JSP样式互不干扰。一、React子应用配置1.项目结构react-module/├──src/│├──index.js#模块入口文件│├──App.js#React组件│└──App.module.css#组件样式（CSSModules）├
  • MotionLayout（二）：MotionLayout是什么？MotionLayout调试技巧、KeyFrame关键帧等等 前期后期 androidkotlin学习
    一、MotionLayout是什么？●定位：AndroidJetpack中的高级布局容器，继承自ConstraintLayout。●核心功能：通过状态（State）和过渡（Transition）定义复杂的界面动画，支持手势交互、路径动画等。●优势：简化动画开发流程，替代传统Animator或TransitionManager，适合处理多视图联动、复杂转场效果。1.1应用场景使用MotionLayo
  • 使用 Python 绘制爱心图形（高级版） 徐浪老师 徐浪老师大讲堂python开发语言
    以下是一段使用Python绘制高级“爱心”图案的代码，结合数学公式生成精美的爱心形状，并附加一些交互式的效果，比如渐变颜色或动态展示：动态渐变爱心importnumpyasnpimportmatplotlib.pyplotaspltimportmatplotlib.animationasanimation#设置爱心的数学公式defheart_shape(t):x=16*np.sin(t)**3y=
  • Electron打包文件生成.exe文件打开即可使用 糕冷小美n electronjavascript前端
    1、Electron打包，包括需要下载的内容和环境配置步骤注意：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架首先需要电脑环境有Node.js和npm我之前的文章有关nvm下载node的说明也可以去官网下载检查是否有node和npm环境命令node-vnpm-v输出版本号，说明安装成功2、创建Electron项目2.1创建项目目录打开命令行工具，创建一
  • Three.js世界中的三要素：场景、相机、渲染器 Front_Yue 3D技术实践指南javascriptthree.js3d
    一、Three.js简介Three.js是一个基于WebGL的JavaScript库，它允许开发者在网页上创建和显示复杂的3D图形和动画，而无需用户安装任何额外的插件或软件。Three.js在Web开发中的地位非常重要，它通过提供简单直观的API，极大地降低了3D图形开发的门槛，使得开发者可以更专注于实现创意。Three.js广泛应用于游戏开发、虚拟现实、数据可视化、艺术创作等多个领域。二、场景：
  • 致现在的我与未来的我：编程长河中的摆渡手札 星糖曙光 后端语言（nodejavascriptvue等等）笔记学习深度学习人工智能网络
    致现在的我与未来的我：编程长河中的摆渡手札一、技术积累：从萤火微光到星河初现（约3000字）前端的启蒙：HTML/CSS与"所见即所得"的魔法“代码是诗，但诗未必能成为产品”，初学编程时，我如《禅与摩托车维修艺术》中追寻"良质"的探索者，在W3School的教程中笨拙地敲下第一行。记得仿写京东首页时，一个浮动布局的错位让我通宵调试，最终发现竟是未闭合的标签——这让我想起《代码大全》中的警示：“计算
  • C++在线OJ负载均衡项目 平凡的小y c++开发语言
    1.演示项目项目源码链接：2.项目所用技术和开发环境所用技术C++STL标准库Boost准标准库(字符串切割)cpp-httplib第三方开源网络库ctemplate第三方开源前端网页渲染库jsoncpp第三方开源序列化、反序列化库负载均衡设计MySQLCconnectAce前端在线编辑器html/css/js/jquery/ajax开发环境Ubuntu云服务器vscodeMysqlWorkben
  • 众多主播都在用的超有趣桌面小宠物！ 开开心心_Every 宠物virtualenveclipsepythondjangopygamejava
    BongocatMver是一款主播直播必备萌系插件，是一款开源软件。软件由国外一个高中生kuroni开发出来，让手鼓猫中的手臂可以跟随鼠标，按键的操作而发生动作。萌系的猫咪造型以及键盘映射的交互动画，十分适合游戏主播、绘画主播、音游主播在直播时使用的虚拟造型插件，可以给你的直播间或视频带来无限的元气。软件采用Live2d模型来实现自定义形状，用户可以根据自己的设定来更换不同形状的猫。精准的面部捕捉
  • 大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版） FFF-X html5javascript
    需求背景在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动态比例缩放，通过以下关键步骤实现：基准比例锁定：基于设计稿宽高比（16:9）建立基准比例视口实时检测：通过resize事件监听窗口变化智能比例判断：当视口更宽时：保持高度基准，
  • Font Awesome 的使用 FFF-X
    第一种直接使用命令npminstallfont-awesome--save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了入口js中引入import'font-awesome/css/font-awesome.min.css'然后就可以使用了，例如下面这样第二种cdn要使用FontAwesome图标，请在HTML页面的部分中添加以下行：1、国内推荐CDN：2、海外推荐CDN推荐第二
  • 187.HarmonyOS NEXT系列教程之列表切换案例交互实现详解 harmonyos-next
    温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！HarmonyOSNEXT系列教程之列表切换案例交互实现详解效果演示1.交互系统概述1.1交互类型//支持的交互类型1.长按拖动排序2.左滑删除3.点击选择4.拖拽动画1.2手势配置//组合手势配置.gesture(GestureGroup(GestureMod
  • 程序代码篇---Pyqt的密码界面 Ronin-Lotus 程序代码篇上位机知识篇pyqt数据库pythonubuntu
    文章目录前言一、代码二、代码解释2.1用户数据库定义2.2窗口初始化2.3认证逻辑2.5角色处理2.6错误处理优化2.7功能扩展说明2.7.1用户类型区分管理员普通用户其他用户2.7.2安全增强建议三、运行效果四、运行命令五、界面改进建议5.1密码显示5.2用户头像显示5.3输入框动画效果5.4加载进度显示5.5键盘快捷键前言本文简单介绍了在Ubuntu系统上使用Python的Pyqt创建密码登录
  • 前端性能优化-知识点 甲亿 前端性能优化
    Web性能优化意义1.减少整体加载时间：减小文件体积、减少HTTP请求、使用预加载。2.使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载。3.平滑和交互性：使用CSS替代JS动画、减少UI重绘。4.加载表现形式：使用加载动画、进度条、骨架屏等过渡信息，让用户感觉到页面加载更快。5.性能监测：性能指标、性能测试、性能监控持续优化等Web性能指标RAIL性能模型Response(响应)：快速
  • 性能优化中如何“避免链接关键请求” 混血哲谈 性能优化
    在性能优化中，“避免链接关键请求”是指通过优化资源加载顺序和依赖关系，减少关键渲染路径中的链式请求（CriticalRequestChains），从而加速页面加载。以下是具体策略及实施步骤：一、什么是“关键请求链”？定义：关键请求链是浏览器在渲染首屏内容时必须按顺序加载的资源序列。例如：HTMLCSSFont浏览器需先下载HTML，解析后请求CSS，CSS解析后发现需要字体文件，再请求字体。问题：
  • 实时光线追踪技术：Ray Tracing_2024-07-21_02-55-16.Tex chenjj4003 游戏开发python算法人工智能矩阵线性代数骨骼绑定开发语言
    实时光线追踪技术：RayTracing实时光线追踪技术教程基础知识光线追踪原理光线追踪是一种渲染技术，它通过模拟光线在场景中的传播和反射来生成图像。在实时光线追踪中，这一过程被优化以在有限的时间内完成，通常用于游戏和实时动画。其核心原理是逆向追踪，即从观察者（摄像机）发出光线，而不是从光源发出，这样可以减少计算量。示例：光线追踪的基本算法#Python示例代码，展示如何计算光线与场景中物体的交点c
  • .net 4.0 webServices 的使用，从前端到后端，代码超全。 静静香甜 .net前端后端c#
    1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin
  • 鸿蒙5开发：Ark-TS UI 动效设计指南：让你的应用界面 “活” 起来 harmonyos-next
    在鸿蒙5应用开发中，Ark-TSUI不仅能让你快速构建漂亮的界面，还提供了丰富的动效功能，让界面交互更加流畅和有趣。今天咱们聊聊Ark-TSUI的动效设计，看看如何用几行代码实现按钮点击动画、页面过渡效果等，让你的应用“眼前一亮”。一、Ark-TSUI动效的核心玩法：简单又强大Ark-TSUI的动效设计基于Animator类和内置的过渡效果，无需复杂的第三方库，就能实现多种动画效果。比如：按钮点击
  • HTML+CSS案例展示(CSS3D效果旋转相册) hacalili htmlcss前端css3
    参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其
  • 异常的核心类Throwable 无量 java源码异常处理exception
    java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu;
  • mongoDB 游标（cursor） 实现分页 迭代 开窍的石头 mongodb
    上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询      如何声明一个游标        var mycursor = db.user.find({_id:{$lte:5}});       迭代显示游标数
  • MySQL数据库INNODB 表损坏修复处理过程 0624chenhong tomcatmysql
    最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -
  • 剖析如何与设计人员沟通 不懂事的小屁孩 工作
    最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 那应该如何与设计人员沟通呢？ 我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，
  • qq空间刷评论工具 换个号韩国红果果 JavaScript
    var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l
  • S2SH整合之session 灵静志远 springAOPstrutssession
    错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
  • xmp标签 a-john 标签
    今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr"><span class="user-name">' + user + '</span>' + text + '</div></li>'; ulComme
  • Ajax的常用技巧（2）---实现Web页面中的级联菜单 aijuans Ajax
    在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
  • 天-安-门，好高 atongyeye 情感
        我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。     晚上躺在床上一个人想了很久，很久。        我生在农
  • android 动画 百合不是茶 android透明度平移缩放旋转
    android的动画有两种  tween动画和Frame动画   tween动画;,透明度,缩放,旋转,平移效果   Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation
  • 查看本机网络信息的cmd脚本 bijian1013 cmd
    @echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\
  • plsql 清除登录过的用户 征客丶 plsql
    tools---preferences----logon history---history  把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一起进步。 email ： binary_spac
  • 【Pig一】Pig入门 bit1129 pig
    Pig安装 1.下载pig   wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz   2. 解压配置环境变量      如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量   expor
  • Java 线程同步几种方式 BlueSkator volatilesynchronizedThredLocalReenTranLockConcurrent
    为何要使用同步？      java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），      将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，      从而保证了该变量的唯一性和准确性。 1.同步方法&
  • StringUtils判断字符串是否为空的方法（转帖） BreakingBad nullStringUtils“”
    转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html   public static boolean isEmpty(String str)   　　判断某字符串是否为空，为空的标准是 str== null  或 str.length()== 0  
  • 编程之美-分层遍历二叉树 bylijinnan java数据结构算法编程之美
    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美 分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要
  • jquery取值和ajax提交复习记录 chengxuyuancsdn jquery取值ajax提交
    // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("
  • 推荐国产工作流引擎嵌入式公式语法解析器-IK Expression comsci java应用服务器工作Excel嵌入式
    这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言
  • 关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer daizj spring
    1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q
  • 二叉树:二叉搜索树 dieslrae 二叉树
        所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码:
  • C语言字符串函数大全 dcj3sjt126com cfunction
    C语言字符串函数大全     函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例:   #include <stdio.h> #include <string.h>   int main
  • 友盟统计页面技巧 dcj3sjt126com 技巧
    在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];
  • window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 flyvszhb javajdk
    window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo
  • Java在创建子类对象的同时会不会创建父类对象 happyqing java创建子类对象父类对象
      1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象，   2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
  • 跟我学spring3 目录贴及电子书下载 jinnianshilongnian spring
        一、《跟我学spring3》电子书下载地址： 《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf     跟我学spring3系列 word原版 下载     二、 源代码下载 最新依
  • 第12章 Ajax（上） onestopweb Ajax
    index.html <!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/
  • BI and EIM 4.0 at a glance blueoxygen BO
    http://www.sap.com/corporate-en/press.epx?PressID=14787   有机会研究下EIM家族的两个新产品~~~~   New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing –
  • Java线程中yield与join方法的区别 tomcat_oracle java
    长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb
  • android Manifest.xml选项 阿尔萨斯 Manifest
    结构 继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组 构造函数 public Manifest () 详细 androi
  • Oracle实现类split函数的方 zhaoshijie oracle
    关键字：Oracle实现类split函数的方 项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他