KoalaShane
KoalaShane

CSS3实现开关按钮效果


<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3自定义Checkbox特效DEMO演示title>
head>
<style type="text/css">
.tgl{display:none}
.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tgl ::-moz-selection,.tgl :after::-moz-selection,.tgl :before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:0 0}
.tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:0 0}
.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer}
.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.tgl+.tgl-btn:after{left:0}
.tgl+.tgl-btn:before{display:none}
.tgl:checked+.tgl-btn:after{left:50%}


.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease}
.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}
.tgl-light:checked+.tgl-btn{background:#9FD6AE}


.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease;border:1px solid #e8eae9}
.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}
.tgl-ios+.tgl-btn:active{-webkit-box-shadow:inset 0 0 0 2em #e8eae9;box-shadow:inset 0 0 0 2em #e8eae9}
.tgl-ios+.tgl-btn:active:after{padding-right:.8em}
.tgl-ios:checked+.tgl-btn{background:#86d993}
.tgl-ios:checked+.tgl-btn:active{-webkit-box-shadow:none;box-shadow:none}
.tgl-ios:checked+.tgl-btn:active:after{margin-left:-.8em}


.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;background:#888}
.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}
.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}
.tgl-skewed+.tgl-btn:active{background:#888}
.tgl-skewed+.tgl-btn:active:before{left:-10%}
.tgl-skewed:checked+.tgl-btn{background:#86d993}
.tgl-skewed:checked+.tgl-btn:before{left:-100%}
.tgl-skewed:checked+.tgl-btn:after{left:0}
.tgl-skewed:checked+.tgl-btn:active:after{left:10%}


.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em}
.tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ease;transition:all .2s ease;background:#f2f2f2;content:"";border-radius:1em}
.tgl-flat:checked+.tgl-btn{border:4px solid #7FC6A6}
.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7FC6A6}


.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}
.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}
.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02C66F;-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.tgl-flip+.tgl-btn:before{background:#FF3A19;content:attr(data-tg-off)}
.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotateY(-20deg);-ms-transform:rotateY(-20deg);transform:rotateY(-20deg)}
.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}
.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);left:0;background:#7FC6A6}
.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotateY(20deg);-ms-transform:rotateY(20deg);transform:rotateY(20deg)}
style>

<body>

  <span class='tg-list-item'>
    <input class='tgl tgl-light' id='cb1' type='checkbox'>
    <label class='tgl-btn' for='cb1'>label>
  span>

  <span class='tg-list-item'>
    <input class='tgl tgl-ios' id='cb2' type='checkbox'>
    <label class='tgl-btn' for='cb2'>label>
  span>

  <span class='tg-list-item'>
    <input class='tgl tgl-skewed' id='cb3' type='checkbox'>
    <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'>label>
  span>

  <span class='tg-list-item'>
    <input class='tgl tgl-flat' id='cb4' type='checkbox'>
    <label class='tgl-btn' for='cb4'>label>
  span>

  <span class='tg-list-item'>
    <input class='tgl tgl-flip' id='cb5' type='checkbox'>
    <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'>label>
  span>

body>
html>

效果预览
这里写图片描述

你可能感兴趣的:(css3)

  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
  • CSS和CSS3区别对比
    CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：一、核心概念与版本关系CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模块化设计（如F
  • js实现百度地图的自定义marker与css3动画的交互 沈大大520 css3动画扩展自定义百度地图makerjscss3javascript前端html5
    使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
  • 原生cesium 实现 多图例展示+点聚合(base64图标)
    个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、CSDN优质创作者作者：柳晓黑胡椒❣️专栏：cesium实践(原生)若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力需求背景解决思路解决效果index.vue需求背景1.需要展示多个站点图例的图表及闪烁效果2.需要考虑层级高时，多图例的点聚合效果，且点聚合显示需要采用设计的圆形图标解决思路闪烁效果：采用css3的anim
  • CSS3 文本效果详解 lly202406 开发语言
    CSS3文本效果详解引言随着Web技术的发展，CSS3为前端设计师和开发者提供了丰富的文本效果选项。这些效果不仅能够增强网页的美观性，还能提升用户体验。本文将详细介绍CSS3中的文本效果，包括文本阴影、文本描边、文本装饰、文本换行、文本大小写等，并探讨如何在实际项目中应用这些效果。文本阴影文本阴影是CSS3中最常见的文本效果之一。它可以为文本添加阴影，使其更加立体，提升视觉效果。基本语法text-
  • html怎么设置好看的文本框,html页面输入框input的美化 PassatCC html怎么设置好看的文本框
    input输入框是网页必不可少的组件，可是每个浏览器对于输入框的显示样式各有不同例如：上图分别就是谷歌浏览器和IE浏览器自带显示的输入框，样式也不足人意，所以大多都会自己写样式以下是一个简单的文本框样式input{border:1pxsolid#ccc;padding:7px0px;border-radius:3px;/*css3属性IE不支持*/padding-left:5px;}效果图：样式属
  • html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度 weixin_39886205 html读取媒体长度
    显示网页的终端屏幕分辨率大小不一，为了能使同一网页能在不同的终端中合适显示，CSS3推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度，这主要在CSS文件中根据屏幕分辨率大小定义网页宽度。以前用百分比来根据屏幕分辨率大小确定网页宽度，但由于同样的百分比随着屏幕分辨率的增大，网页离屏幕两边的距离也随之变宽，不能很好的解决这个问题；用媒体查询media就能很好的解决这个问题
  • CSS3盒子模型
    div:nth-child(1){/*传统盒子模型=width+border+padding*/width:200px;height:200px;background-color:pink;padding:10px;border:10pxsolidred;box-sizing:content-box;}div:nth-child(2){/*有了这句话就让盒子变成CSS3盒子模型*//*paddin
  • css滑块开关的使用,CSS3制作滑块按钮
    滑块按钮-渣图.gif查看demo结构先整理一下，这个按钮的层。分层.gif样式body{background:#eee;}/*--用绝对定位让整个按钮在页面垂直居中--*/.toggle-wrapper{position:absolute;;left:50%;top:50%;overflow:hidden;margin-left:-60px;／*--按钮向左移动一半的宽度--*／margin-t
  • css3:css的3种引入方式 ksw000 csscss3html
    css基本知识你好！这是你第一次使用css所需要了解的知识点。如果你想学习如何使用css,可以仔细阅读这篇文章，了解一下css的基本语法知识。CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。一、行内样式使用style属性引入CSS样式。示例：style属性的应用直接在HTML标签中设置的样式实际在写页面时不提倡使用，在测试的时候可以使用。行内样式LeapingAboveTheWater
  • CSS3 常见选择器（属性、伪类、伪元素、组合）面试详解 1加1等于 javascript实战javascript前端css3
    本文详细介绍了日常中常用的几种选择器，包括属性选择器、伪类选择器、伪元素选择器、组合选择器等等本文目录1.属性选择器2.伪类选择器3.伪元素选择器4.组合选择器1.属性选择器属性选择器允许根据元素的属性及其值来选择元素。常见的属性选择器有以下几种形式：[attribute]：选择具有指定属性的元素。[attribute=value]：选择属性值精确等于指定值的元素。[attribute^=valu
  • 大数据项目-Django基于大数据技术实现的农产品销售系统 IT实战课堂-玲琳娜 计算机毕业设计大数据javaspark爬虫
    《[含文档+PPT+源码等]Django基于大数据技术实现的农产品销售系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利！数据库管理工具：phpstudy/Navicat或者phpstudy/sqlyog后台管理系统涉及技术：后台使用框架：Django前端使用技术：Vue,HTML5,CSS3、JavaScrip
  • 从HTML4到HTML5+CSS3，如何快速掌握？(有老版HTML基础或经验) 唐骁虎 html前端
    从HTML4.0到HTML5+CSS3的升级是Web开发技术的一次重要迭代，两者在语法、功能、兼容性等方面存在显著差异。以下是具体异同点、学习注意事项及快速掌握方法：一、HTML5与HTML4.0的核心差异语义化标签HTML5新增：、、、、等，使代码结构更清晰，利于SEO和可维护性。HTML4.0依赖：主要用配合class/id实现布局，语义性较弱。多媒体支持HTML5原生支持：、标签，无需依赖F
  • 总结自适应网站的标准尺寸 scuter_yu web前端
    转载字自"深蓝的镰刀"偶然翻阅国外标准模板，总结一下在使用css3的mediaquery做自适应网站时究竟min-width和max-width设多少是最好的。PC机时：[css]viewplaincopy@mediaonlyscreenand(min-width:960px){*{color:red;}}平板横放时：[css]viewplaincopy@mediaonlyscreenand(mi
  • 实现网页中CSS图片3D旋转效果 Kiki-2189
    本文还有配套的精品资源，点击获取简介：CSS是一种用于定义文档呈现方式的技术，通过CSS3的3D转换功能，能够在二维平面上展示三维对象，让网页元素具有立体感。本文详细介绍了实现CSS图片3D旋转效果所需的CSS属性，如transform,perspective,transition,以及:hover选择器，并提供了一个简单的代码示例。同时，文章也提到了兼容性问题以及提供回退方案的重要性。1.CSS
  • css3 圆形水波纹特效 程序媛之博客 css3前端css
    需求描述：需要制作一个动画，特效从圆心开始往外扩散，然后又往回收。效果图：实现代码：.circle{width:100rpx;height:100rpx;background-color:#FF4C4C;border-radius:50%;/*圆形*/box-shadow:inset00010rpxrgba(255,255,255,0.5),/*内阴影，初始半透明圆*/inset00020rpxr
  • 【CSS】CSS3媒体查询全攻略 Vesper63 前端CSScsscss3媒体
    媒体查询教程媒体查询(MediaQueries)是CSS3中引入的强大功能，允许内容根据设备特性(如屏幕尺寸、分辨率、方向等)进行自适应调整。以下是媒体查询的详细教程：基本语法@mediamediatypeand(mediafeature){/*CSS规则*/}常用媒体类型all-所有设备(默认)screen-电脑屏幕、平板、智能手机等print-打印机和打印预览speech-屏幕阅读器等发声设备
  • H5新增的标签 YiLin_Classics web前端html前端csscss3
    H5新增的内容语义化标签增强型表单增强表单中的新增属性CSS3的选择器语义化标签H5新增的语义化标签有：1）header--------头部区域2）footer----------尾部区域3）section--------主体区域4）main----------主要区域内容5）article--------独立文章区域6）aside--------侧边栏7）nav----------导航区域8）f
  • H5在小程序领域的地图应用开发指南 小程序开发2020 小程序开发宝典小程序ai
    H5在小程序领域的地图应用开发指南关键词：H5、小程序、地图应用开发、JavaScript、HTML5、CSS3、API摘要：本文围绕H5在小程序领域的地图应用开发展开，详细阐述了相关的背景知识、核心概念、算法原理、数学模型、实战案例、应用场景、工具资源等内容。通过逐步分析推理，为开发者提供了全面且深入的开发指南，助力开发者掌握H5在小程序中开发地图应用的技术和方法，应对开发过程中的各种挑战。1.
  • CSS3 3D 转换介绍 半点寒12W csscss33d前端
    CSS3中的3D转换提供了一种在二维屏幕上呈现三维效果的方式，主要包括translate3d、rotate3d、scale3d等转换函数，下面来详细介绍：1.3D转换的基本概念坐标系在CSS3的3D空间中，使用的是右手坐标系。X轴是水平方向（从左到右为正方向），Y轴是垂直方向（从上到下为正方向），Z轴是垂直于屏幕的方向（从屏幕外指向屏幕内为正方向）。容器属性-perspective这个属性用于设置
  • 前端开发：Javascript 与 CSS3 动画的融合 前端视界 前端艺匠馆javascriptcss3开发语言ai
    前端开发：Javascript与CSS3动画的融合关键词：JavaScript、CSS3动画、前端开发、动画性能、事件驱动、硬件加速、浏览器兼容摘要：本文深入探讨JavaScript与CSS3动画的融合技术，解析两者在前端动画领域的优势互补机制。通过对比分析基础动画原理，揭示事件驱动、状态控制、性能优化的核心逻辑，结合具体代码案例演示交互动画实现方案。详细讲解硬件加速原理、浏览器渲染机制、数学缓动
  • GitHub OAuth 认证示例 ZHOU_CAMP flaskreactgithubflaskreact
    GitHub链接：github_auth流程图功能特性✅GitHubOAuth认证✅获取用户基本信息✅显示用户的GitHub仓库列表✅安全的会话管理✅响应式用户界面技术栈后端Flask-PythonWeb框架Flask-CORS-跨域资源共享Requests-HTTP库Session-会话管理前端React-用户界面库ReactRouter-路由管理Axios-HTTP客户端CSS3-样式设计项目
  • 前端开发者必须要掌握的技术栈及学习建议，都是干货 老猿阿浪 前端学习前端
    作为前端开发者，必须要掌握的技术栈非常的广泛，但总体脉络不变，以下是当前前端开发的核心技术分类和学习建议，按优先级和重要性排序如下（都是干货）：一、基础三件套（必学）HTML5语义化标签、表单验证、WebAccessibility（无障碍访问）Canvas/SVG、音视频嵌入CSS3盒模型、Flex/Grid布局、响应式设计（媒体查询）动画（Transition/Animation）、变量（CSS
  • CSS3 背景裁剪：background-clip 的创意用法 大厂前端小白菜 Ccss3前端cssai
    CSS3背景裁剪：background-clip的创意用法关键词：CSS3、background-clip、背景裁剪、文字背景、创意设计、盒子模型、浏览器兼容性摘要：CSS3的background-clip是一个能“裁剪背景画布”的神奇属性。它能精准控制背景的显示范围，从传统的边框、内边距、内容区域，到更前沿的“文字轮廓裁剪”，为网页设计带来了无限可能。本文将从基础原理到创意实战，用“剪窗花”的比
  • jquery和CSS3圆形倒计时特效 yt94832 jquerycss3前端
    这是一款jquery和CSS3圆形倒计时特效。该特效使用CSS对页面进行布局，生成用于倒计时的圆环，然后通过jquery代码来控制圆环的倒计时进度。预览下载使用方法在页面中引入下面的文件。HTML结构MinSec开始停止初始化插件letcircle=document.getElementById('cls');lettotal;letstart=$('#start');start.click(()
  • 3_CSS3 渐变 --[CSS3 进阶之路] 桃园码工 CSS3进阶之路css3前端cssCSS3渐变
    CSS3引入了渐变（gradients），它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3支持两种类型的渐变：线性渐变（LinearGradients）：颜色沿着一条线性路径变化，可以是水平、垂直或者对角线方向。径向渐变（RadialGradients）：颜色从一个起点开始向外扩散，形成圆形或者椭圆形的渐变效果。线性渐变线性渐变-从上到下这里有一个简单的CSS3线性渐变的例子，它从上到下应
  • 前端 CSS3 背景渐变的高级技巧 大厂前端小白菜 前端css3cssai
    前端CSS3背景渐变的高级技巧关键词：CSS3、背景渐变、线性渐变、径向渐变、重复渐变、混合模式、动画效果摘要：本文将深入探讨CSS3背景渐变的高级应用技巧，从基础语法到复杂实现，涵盖线性渐变、径向渐变、重复渐变等多种渐变类型。我们将通过详细的代码示例和视觉效果分析，展示如何创建令人惊艳的渐变效果，包括渐变动画、混合模式应用以及响应式设计中的渐变技巧。文章还将介绍最新的CSS渐变特性，帮助前端开发
  • CSS3 背景渐变的方向与角度调整 大厂前端小白菜 前端开发实战css3前端cssai
    CSS3背景渐变的方向与角度调整关键词：CSS3、背景渐变、方向调整、角度调整、线性渐变、径向渐变摘要：本文深入探讨了CSS3背景渐变的方向与角度调整相关技术。首先介绍了CSS3背景渐变的背景知识，包括目的、适用读者、文档结构和相关术语。接着详细阐述了线性渐变和径向渐变的核心概念、原理及架构，通过Mermaid流程图和文本示意图进行清晰展示。在算法原理部分，使用Python模拟CSS3渐变效果来解
  • 《深度剖析：SCSS中混入（Mixin）为浏览器前缀赋能》
    不同的浏览器，如同性格迥异的守门人，对CSS样式的理解和呈现各有标准。在CSS新特性尚未成为行业共识前，各浏览器厂商会以独特的前缀标注自家版本，这就好比不同地区对同一事物的称呼差异，看似表达相同，实则形式大相径庭。例如，当我们试图用CSS3的动画效果为网页增添灵动气息时，不同浏览器却要求用不同的“咒语”才能生效。在Chrome和Safari中，需要使用“-webkit-”开头的属性；Firefox
  • HTML5+CSS3小实例：文本背景扫光效果 艾恩小灰灰 HTML+CSS+JS小实例css3html5css前端html
    实例：文本背景扫光效果技术栈：HTML+CSS效果：源码：【html】<head
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他