CSS3--动态实现ToolTip效果(实例)

效果图如下↓↓↓↓↓  (知识点见代码注释)

CSS3--动态实现ToolTip效果(实例)_第1张图片

HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3实现鼠标悬停显示消息提示框</title>
 6     <meta http-equiv="X-UA-compatible" contnet="IE=edge">
 7     <meta name="viewport" content="width=device-width" initial-scale="1">
 8     <link rel="stylesheet" href="css/style.css">
 9     <link rel="stylesheet" href="css/font-awesome.min.css">
10 </head>
11 <body>
12     <div class="nav">
13         <ul>
14             <li>
15                 <a href="#" class="tooltip tooltip-effect-1">Home
16                     <!-- 应用SVG做背景图片 -->
17                     <span class="tooltip-content">
18                         <!-- 应用文字图片,fa:Icon公共类; fa-camera:相机Icon; fa-fw:使i标签display:block; fa-spin:Icon动画效果; fa-border:Icon具有圆角边框; -->
19                         <i  class="fa fa-camera fa-fw"></i>
20                     </span>
21                 </a>
22             </li>
23             <li>
24                 <a href="#" class="tooltip tooltip-effect-2">About me
25                     <span class="tooltip-content"><i  class="fa fa-heartbeat fa-fw"></i></span>
26                 </a>
27             </li>
28             <li>
29                 <a href="#" class="tooltip tooltip-effect-3">Photography
30                     <span class="tooltip-content"><i  class="fa fa-diamond fa-fw"></i></span>
31                 </a>
32             </li>
33             <li>
34                 <a href="#" class="tooltip tooltip-effect-4">Work
35                     <span class="tooltip-content"><i  class="fa fa-cogs fa-fw"></i></span>
36                 </a>
37             </li>
38             <li>
39                 <a href="#" class="tooltip tooltip-effect-5">Contact
40                     <span class="tooltip-content"><i  class="fa fa-comments fa-fw"></i></span>
41                 </a>
42             </li>
43         </ul>
44     </div>
45 </body>
46 </html>

CSS

  1 html {
  2     width:100%; 
  3     height:100%;
  4     /*屏幕旋转时文字大小不发生改变;*/
  5     -webkit-text-size-adjust:none;
  6 }
  7 body {
  8     margin: 0;
  9     padding: 0;
 10     width:100%;
 11     height:100%;
 12     background: #47c9af;
 13     color:#74777b;
 14     font-weight: 300;
 15     font-size: 1.5em;
 16     font-family:"Raleway","Arial";
 17 }
 18 ul {
 19     list-style: none;
 20     padding: 0;
 21     margin: 0;
 22 }
 23 a:link,a:visited,a:focus {
 24     text-decoration: none;
 25     outline: none;
 26 }
 27 
 28 *,*:after,*:before {
 29     /*padding(填充)和border(边框)都不要影响盒子原先设定的大小;*/
 30     -webkit-box-sizing:border-box;
 31 }
 32 *:after,*:before {
 33     display: block;
 34     content:"";
 35 }
 36 /*清除浮动*/
 37 *:after {
 38     clear:both;
 39 }
 40 
 41 /*Navgaitor*/
 42 .nav {
 43     width:800px;
 44     height:300px;
 45     margin:200px auto;
 46 }
 47 .nav li {
 48     display: inline-block;
 49     margin:0 1em;
 50 }
 51 .tooltip {
 52     display: inline-block;
 53     font-weight: 700;
 54     color:rgba(0,0,0,0.3);
 55     padding:0.15em 0.25em 0 0;
 56     position: relative;
 57     z-index: 999;
 58     transition: 0.4s;
 59 }
 60 .tooltip:hover {
 61     color:rgba(255,255,255,1);
 62 }
 63 .tooltip-content {
 64     position: absolute;
 65     z-index: 9999;
 66     width:80px;
 67     height:80px;
 68     /*span相对于父元素a垂直居中:
 69         left:50%;span的左侧距离a的左侧是a宽度一半的距离;
 70         margin-left:-40px;左移相对于自身宽度的一半;
 71         bottom:100%;span的底部距离a的底部是a高度一倍的距离,刚好在a的正上方;
 72     */
 73     left:50%;
 74     margin-left: -40px;
 75     bottom:100%;
 76     margin-bottom: 20px;
 77     text-align: center;
 78     padding-top: 22px;
 79     /*应用svg文件做背景图片;*/
 80     background:url(../img/tooltip1.svg) no-repeat center center;
 81     opacity: 0;
 82     transition: 0.4s;
 83 }
 84 .tooltip-content i {
 85     font-style: normal;
 86     font-size: 30px;
 87     color:#47c9af;
 88     opacity: 0;
 89     transition: 0.3s;
 90 }
 91 .tooltip-effect-1 .tooltip-content {
 92     /*
 93         translate3d(0,10px,0):元素沿Y轴向下移动10px;
 94         rotate3d(1,1,1,45deg):元素分别在X轴,Y轴和Z轴旋转45°;
 95         transform-origin:50% 100%;元素以本身计算出的位置为中心点;
 96     */
 97     transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
 98     transform-origin :50% 100%;
 99 }
100 .tooltip-effect-1 .tooltip-content i {
101     /*
102         元素在X轴和Y轴上缩放0倍(最小化),在Z轴缩放1倍(不缩放);
103     */
104     transform:scale3d(0,0,1);
105 }
106 .tooltip-effect-2 .tooltip-content {
107     transform: translate3d(0,20px,0);
108 }
109 .tooltip-effect-2 .tooltip-content i {
110     transform:translate3d(0,15px,0);
111 }
112 .tooltip-effect-3 .tooltip-content {
113     transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
114     transform-origin:50% 100%;
115 }
116 .tooltip-effect-3 .tooltip-content i {
117     transform:scale3d(0,0,1);
118 }
119 .tooltip-effect-4 .tooltip-content {
120     transform:translate3d(0,-20px,0);
121 }
122 .tooltip-effect-4 .tooltip-content i {
123     transform:translate3d(0,20px,0);
124 }
125 .tooltip-effect-5 .tooltip-content {
126     transform:scale3d(0,0,1);
127     transform-origin:50% 100%;
128 }
129 .tooltip-effect-5 .tooltip-content i {
130     transform:translate3d(0,20px,0);
131 }
132 /*划过效果,所有效果归位0;*/
133 .tooltip:hover .tooltip-content,
134 .tooltip:hover .tooltip-content i {
135     opacity:1;
136     transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
137 }

注:Icon字体引用自 Font Awesome Icons 下载链接 课程链接

CSS3--动态实现ToolTip效果(实例)_第2张图片

 

svg文件(复制以下代码到编辑器,然后保存文件后缀名为.svg)

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5      viewBox="0 0 80 90" enable-background="new 0 0 80 90" xml:space="preserve">
 6 <g>
 7     <path fill="#FFffff" d="M39.8,89.5c0,0.2,0.4,0.2,0.4,0c1.2-6.7,7.4-11.8,14.8-11.8H25C32.4,77.7,38.6,82.8,39.8,89.5z"/>
 8     <circle fill="#FFffff" cx="40" cy="40.3" r="40"/>
 9 </g>
10 </svg>

 

你可能感兴趣的:(tooltip)

  • echarts X轴文本太长 formatter自定义文本的显示方式 每一天，每一步 EChartsechartsjavascriptecmascript
    如果ECharts中X轴的文本太长，可以通过设置axisLabel的rotate属性来旋转标签，或者使用formatter函数来自定义文本的显示方式。另外，可以开启axisLabel的interval属性来控制显示的标签的间隔。option={tooltip:{},xAxis:{type:'category',data:['这是一段非常长的文本','短文本','另一段长文本','另一段长文本'],
  • el-tooltip 修改宽度 胡萝卜大王驾到通通闪开 elementjavascript前端html
    使用popper-class为Tooltip的popper添加类名{{row.range}}在当前组件新建一个style,不要写scoped,这里的样式会应用到全局,所以class命名一定要保证不要和全局别的类名重复.td-nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.tool-tip{max-width:40
  • uniapp+echarts分时图五档行情 Nymph_Zhu uni-appecharts安卓ios前端
    父组件代码：{{isLeave!=1?tooltipData[1]==null||tooltipData[1]==''||tooltipData[1]=='0.00'?'--':toDecimal(tooltipData[1],getTickDecLen(symbol),true):(symbol.cp==null||symbol.cp==''||symbol.cp=='0.00'?'--':to
  • echarts tooltip悬浮框自动轮播 鼠标放上则暂停 Igiveufireworks 前端vue.jsechartsjavascript
    在本项目中,echarts是引入的一个子组件，在父组件中配置好chartOptions和automove后传给子组件。判断传入的automove为true时，则进行轮播。props:{chartOptions:{type:Object,default(){return{}}},automove:{type:Boolean}},data(){return{chart:null,dataLength:
  • js处理echarts tooltip定时轮播 Ciito 前端javascriptecharts
    echartstooltip定时轮播/***echartstooltip轮播*@paramchartECharts实例*@paramchartOptionecharts的配置信息*@paramoptionsobject选项*{*interval轮播时间间隔，单位毫秒，默认为3000*true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip*ser
  • eCharts的样式配置 yu_zheng5163 echarts前端javascript
    {//series的类型，如'line'、'bar'、'pie'、'scatter'等type:'line',//line表示折线图bar表示柱状图pie表示饼图scatter表示散点图//series的名称，用于tooltip的显示，legend的图例筛选等name:'数据系列1',//series的数据，可以是数组，也可以是函数，详见下面的data配置项data:[1,2,3,4,5],//s
  • echarts实现透明3D地图 自定义tooltip悬浮框 藤井粟 echartsecharts3d前端大屏端
    本地图主要使用ehcarts和echarts-gl进行开发，实现的3D地图可以旋转、缩放、多角度观察。悬浮框是自定义样式。1、引入echarts和echarts-gl库echarts的资源比较常见，这里主要列出echarts-gl的离线资源2、3D地图的基础配置根据网上获取的json数据进行初始化地图，然后配置地图的option，重点在于series和viewcontrol的配置。地图的透明质感主
  • React中实现antd自定义图标，鼠标悬浮变色 小鸟哗啦啦 react.js前端javascript
    借助antd的tooltip组件来实现hover时变色的效果1.新建组件自定义图标一般在iconfont上面获取，复制下来的svg代码，切记要删除fill属性后添加到组件中import{Tooltip}from"antd";importReactfrom"react";constHoverableSvg=()=>{return({/*...*/});};exportdefaultHoverable
  • Vue3优化表单标签与布局，解决文字过长问题（附Demo） 码农研究僧 前端/小程序vue.js前端javascript
    目录前言1.增加标签宽度（生效）2.工具提示Tooltip（勉勉强强）3.缩小字体（不生效）4.CSS控制换行（不推荐）前言好不容易构思整个表单的布局，但是个别表单的文字过长，导致自动换行，遮挡另外的一些组件以下内容将围绕实战进行优化以左上角的文字进行调整：尝试了多种方案，最终才有成效对于其他的方式，诸位也可尝试下1.增加标签宽度（生效）通过增加el-form-item的label-width，让
  • echarts柱形图X轴Y轴相关配置 船长㉿ 可视化
    可配置XY轴刻度线，字体大小，柱形图大小颜色等constoptions={tooltip:{trigger:'axis',axisPointer:{//坐标轴指示器，坐标轴触发有效type:'shadow'//默认为直线，可选为：'line'|'shadow'},textStyle:{//鼠标hover遮罩层字体大小fontSize:'12'}},xAxis:[{data:['大学食堂100间',
  • vue 使用el-table 设置了show-overflow-tooltip属性，路由跳转后，气泡不消失的解决办法 前端小白记录 vue.js前端javascriptelementui前端框架
    文章目录一、问题场景二、解决方法1.问题bug2.最终解决总结一、问题场景在vue项目里使用el-table做一个列表页面，表格设置了show-overflow-tooltip属性，文字过长时鼠标滑过会展示气泡显示全部文字内容，因为设置路由缓存，如果这个时候点击鼠标滑过的单元格进行路由跳转，气泡就会在新的页面展示不消失；如下图所示二、解决方法1.问题bug我在网上搜索相关帖子，看到一个说让在dea
  • vxe-grid 利用dayjs提供的方法来格式化， 计算二个日期之间的年数/年龄 花花鱼 Vue3vue.js
    1、安装dayjspnpmadddayjsyarnadddayjsnpminstalldayjs2、导入importdayjsfrom'dayjs';3、vxe-grid列：exportconstUserColumns:VxeGridPropTypes.Columns=[...{title:'年龄',width:70,field:'old',showOverflow:'tooltip',align
  • 【avue+vue2】avue-token,iframe,postmessage,3d按钮权限显隐，avue列表数据过长省略和tooltip，选择框不要勾选 傻傻有内涵的我 vueavueHTML学习javascript开发语言ecmascript
    目录一、avue字典+token二、3diframe三、postmessage四、3d按钮权限五、avue列表数据过长省略+tooltip六、选择框不要勾选（avue）一、avue字典+token{label:'车型',prop:'amrModelShowName',//width:130,span:20,labelWidth:'180',row:true,type:'select',align:
  • Echarts基础学习 3-legend、tooltip、grid、dataZoom 翻斗花园正门保安小夏 Echartsecharts学习前端
    提示信息和工具栏legend、tooltip、title可以展示图表的一些信息，使图表的信息更加清晰明了toolbox是对图表的一些操作，比如下载，折线图和柱形图的切换等操作。如果你想体验各种工具操作，可以在此案例中进行操作——未来一周气温变化grid网格直角坐标系内绘图网格，单个grid内最多可以放置上下两个X轴，左右两个Y轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。在ECharts2
  • echarts 雷达图样式自定义 2018-12-13 心有余悸天
    exportdefaultfunctiondrawradar(basedata,all_data){varRadar={//title:{//text:'基础雷达图'//},//鼠标移入的悬浮框的样式tooltip:{backgroundColor:'#ffff',borderColor:'#eeee',borderRadius:2,borderWidth:1,textStyle:{color:'
  • 自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用 千叶KE vue.jsjavascript前端elementui
    一、写在开头在项目里遇到了这种需求，想到el-table里的show-overflow-tooltip属性就有这种效果，在参考了一些网上的文章以及show-overflow-tooltip跟el-tooltip的源码后，觉得使用自定义指令的方式来实现这个需求会很方便，于是便有了以下代码二、自定义指令代码1、创建一个js文件，复制粘贴以下代码即可使用，无需改动importVuefrom'vue'im
  • Popper.js：ElementUI 中采用弹出，提示框库，好用的没朋友。 贝格前端工场 javascriptelementui开发语言
    Hi，我贝格前端工场，继续介绍经典的js库，ElementUI中Tooltip、Select、Cascader、TimePicker等组件中怎么把提示框定位到目标元素的，是用Popperjs来实现。一、Popper.js是什么？Popper.js是一个用于创建弹出式组件和工具提示的JavaScript库。它提供了一种灵活和可定制的方式来定位和显示弹出式元素，使得开发者可以轻松地创建各种类型的弹出式
  • 饼图外显示百分比，labelLine控制与环的距离 咏竹莉
    示例：image.pngfunctionlossTenants(){varmyDailyEn=echarts.init(document.getElementById('lossTenants'));option={tooltip:{backgroundColor:'#fff',textStyle:{color:'#545EFF'},formatter:"{b}:{c}({d}%)"},legen
  • Unity在Inspector面板显示注释 ChoseYoung
    [Tooltip("显示注释")]//鼠标移到变量上后可以看到汉字[Header("显示注释")]//直接在面板上显示汉字
  • echarts 中tooltip的formatter使用(例如折线图中的，鼠标悬停在某点，会再提示框显示坐标轴对应的数据) 方_圆
    1.当把x轴，y轴数据都设置好以后，x轴的数组是data系列（series）2.把value结构，重新拼了下3.在tooltip中添加formatter方法（我理解的意思，formatter是一个回调函数，series中的data，通过回调，根据数据的拼接结构，把的相关数据拿出来就行）params[x].data.name,也就是series.data.name(相当于把series中的data:
  • echarts(3)——饼图 qq_46285250 echartsecharts
    案例注释代码源码地址：https://www.makeapie.com/editor.html?c=x1zOZDoSxqoption={backgroundColor:'#273454',color:['#FF9966','#FFFFCC','#0099CC','#99CC33','#99CCCC'],tooltip:{trigger:'item',formatter:'{b}:{c}个(占比{d
  • echarts实用代码模板 mbshqqb echartsjavascript前端
    一、键盘事件控制tooltip移动letcurrentIndex=-1;constdataLen=option.series[0].data.length;consthandleKeydown=(e)=>{if(e.key!="ArrowRight"&&e.key!="ArrowLeft"){return;}console.log('handleKeydown:'+currentIndex);my
  • 2019-01-10Unity编辑器开发，使用CustomPropertyDrawer实现枚举中文显示 Nmao
    标注：https://www.cnblogs.com/CodeGize/p/6892299.html在Unity开发中，枚举常常被用到。但是Unity自身对于枚举值，并不能做好中文的支持。无论是Head或者ToolTip.如下例：usingUnityEngine;publicclassEnumTest:MonoBehaviour{publicEmAniTypeAniType;}publicenum
  • 使用npm包js-web-screen-shot做网页截图，可以对截图加文字，箭头等等，类似于微信截图 徐同保 web前端javascript前端npm
    点击上传截图只能上传jpg/png文件，且不超过5M提交取消import{Button,Tooltip,Dialog,Form,Row,Col,FormItem,Upload,Link,Input,}from'element-ui'importhtml2canvasfrom'html2canvas'importScreenShotfrom'js-web-screen-shot'importtemp
  • 因直接展示el-tooltip从而导致表格展示底部增加空行 前端僵尸 bug
    使用tooltip注意事项：问题：因直接展示el-tooltip从而导致表格展示底部增加空行原因：el-tooltip本身渲染的时候，是没有载体的（里面没有内容就已经渲染了）解决：外层需要包裹一层div或是span做父级问题：ElementPlusError:[ElOnlyChild]novalidchildnodefound(使用el-tooltip套tooltip或者popver也会导致)原因
  • React+Echarts实现数据排名+自动滚动+Y轴自定义toolTip文字提示 小浣熊喜欢揍臭臭 Reactechartreact.js前端javascript
    1、效果2、环境准备1、react182、antd4+3、代码实现原理：自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue，自定义tooltip通过监听echar的鼠标移入移出事件，判断tooltTip元素的显隐以及位置。1、导入所需组件：在你的代码文件中导入所需的组件importReactEChartsfrom'echarts-for-react
  • 2020-10-14 echarts tooltip 自定义样式 rub1cky
    echarts自定义tooltip样式备份在echarts文档中有个extraCssText可以进行自定义样式覆盖最终效果图截屏2020-10-14上午8.55.00.png
  • 【Qt学习笔记】（三）常用控件（持续更新） 有心栽花无心插柳 Qtqt学习笔记
    Qt常用控件1控件概述2QWidget控件核心属性2.1enabled2.2geometry2.3windowframe的影响2.4windowTitle2.5windowIcon2.6windowOpacity2.7cursor2.8font2.9toolTip2.10focusPolicy2.11stylesheet1控件概述Widget是Qt中的核心概念英文原义是"小部件",我们此处也把它翻
  • vue3+echarts+地图（3D立体） 修复bug vueechartsjavascriptvue
    首页exportdefault{name:"maps",data(){return{option:{//鼠标悬浮显示省份名称tooltip:{textStyle:{color:"yellow",decoration:"none",fontFamily:"Verdana,sans-serif",fontStyle:"italic",fontWeight:"bold",},formatter:func
  • echarts tooltip.formatter回调函数方式格式化提示框 深吸一口气
    问题在使用echarts配置图表时，tooltip提示框的格式不能满足需求，这时需要自定义格式，echarts文档中给出的方案是配置tooltip.formatter解决方案tooltip.formatter支持字符串模板和回调函数两种形式，官方文档内容这里就不赘述了，请自行查阅echartstooltip.formatter文档，这里主要说一下回调函数格式化方式//params具体信息看下方fo
  • Dom 周华华 JavaScripthtml
    <!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/1999/xhtml&q
  • 【Spark九十六】RDD API之combineByKey bit1129 spark
    1. combineByKey函数的运行机制   RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一   首先看一下combineByKey的方法说明：
  • msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解 daizj mysql设置密码
    MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；   问题原因：你输入的密码是明文。不允许这么输入。   解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串， 然后
  • 路漫漫其修远兮 吾将上下而求索 周凡杨 学习 思索
    王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注
  • Hadoop(二)对话单的操作 朱辉辉33 hadoop
    Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,)
  • web报表工具FineReport常用函数的用法总结（日期和时间函数） 老A不折腾 finereport报表工具web开发
    web报表工具FineReport常用函数的用法总结（日期和时间函数）   说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。   DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。
  • c++ 宏定义中的##操作符 墙头上一根草 C++
    #与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a)   #a #define h(a) g(a) int main() {       &nbs
  • 分析Spring源代码之，DI的实现 aijuans springDI现源代码
    (转) 分析Spring源代码之，DI的实现 2012/1/3 by tony                 接着上次的讲，以下这个sample [java]  view plain copy print
  • for循环的进化 alxw4616 JavaScript
    // for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le
  • 网络编程Socket和ServerSocket简单的使用 百合不是茶 网络编程基础IP地址端口
      网络编程;TCP/IP协议   网络:实现计算机之间的信息共享,数据资源的交换   协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去   端口:用于计算机之间的通信      每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535   查看被使用的
  • JDK1.5 生产消费者 bijian1013 javathread生产消费者java多线程
    ArrayBlockingQueue：        一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部 是在队列中存在时间最长的元素。队列的尾部 是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法：
  • JAVA版身份证获取性别、出生日期及年龄 bijian1013 java性别出生日期年龄
            工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import
  • 【Java范型六】范型与枚举 bit1129 java
    首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的   public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null;
  • 【Nginx五】Nginx常用日志格式含义 bit1129 nginx
    1. log_format 1.1 log_format指令用于指定日志的格式，格式：   log_format name(格式名称) type(格式样式)   1.2 如下是一个常用的Nginx日志格式：   log_format main '[$time_local]|$request_time|$status|$body_bytes
  • Lua 语言 15 分钟快速入门 ronin47 lua 基础
    - - 单行注释 - - [[      [多行注释] - - ]]   - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring'
  • java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 ) bylijinnan java
    the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维
  • mongoDB文档型数据库特点 开窍的石头 mongoDB文档型数据库特点
    MongoDD: 文档型数据库存储的是Bson文档-->json的二进制 特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比    传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的    文档型数据库：不用定好数据结构，
  • [毕业季节]欢迎广大毕业生加入JAVA程序员的行列 comsci java
        一年一度的毕业季来临了。。。。。。。。      正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。      软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的
  • PHP操作Excel – PHPExcel 基本用法详解 cuiyadll PHPExcel
    导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties
  • IBM Webshpere MQ Client User Issue (MCAUSER) darrenzhu IBMjmsuserMQMCAUSER
    IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？ 答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i
  • 网线的接法 dcj3sjt126com
    一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 二、PC连PC （交叉线）A端：(568A)： 白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 三、HUB连HUB&nb
  • Vimium插件让键盘党像操作Vim一样操作Chrome dcj3sjt126com chromevim
    什么是键盘党？ 键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。 在chrome里安装 vimium 插件
  • MongoDB查询（2）——数组查询[六] eksliang mongodbMongoDB查询数组
    MongoDB查询数组 转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述  MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹
  • cordova读写文件（1） gundumw100 JavaScriptCordova
    使用cordova可以很方便的在手机sdcard中读写文件。 首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&
  • HTML5 FormData 进行文件jquery ajax 上传 到又拍云 ileson jqueryAjaxhtml5FormData
    html5 新东西：FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
  • swift appearanceWhenContainedIn:(version1.2 xcode6.4) 啸笑天 version
      swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION;  解决方法： 在swift项目中新建oc类如下： #import &
  • java实现SMTP邮件服务器 macroli java编程
    电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。 　　◆ SMTP 协议 　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的
  • mongodb group by having where 查询sql qiaolevip 每天进步一点点学习永无止境mongo纵观千象
    SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: {
  • Struts2 Pojo（六） Luob. POJOstrust2
    注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q
  • struts2步骤 wuai struts
    1、添加jar包 2、在web.xml中配置过滤器 <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.st
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他