tomhat
- 浏览: 509210 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (156)
- xml (4)
- web前端 (24)
- jQuery (18)
- java (38)
- SQL (9)
- perl (2)
- OTRS (1)
- GWT (4)
- Linux (32)
- Maven (2)
- Spring (2)
- Oracle Win7 (1)
- css (8)
- eclipse (3)
- mysql (11)
- tomcat (5)
- git (4)
- javascript (22)
- font (1)
- android (1)
- log4j (1)
- email (1)
- sublime plugin (1)
- html (2)
- matches (1)
- php (3)
- apache (3)
- gd (1)
- docker (5)
- rails (1)
- RabbitMQ (1)
- Ubuntu (3)
- L2TP VPN (1)
- nodejs (1)
- oraclejet (1)
- ubutun (1)
- ntp (1)
- ngix (1)
- ssl (1)
- https (1)
- Linux，Debian (2)
- dpkg (1)
- pac (1)
- vi (1)
- vim (1)
- java，http (0)
- httpClient (0)
- shutter (1)
- shell (1)
- redmine (1)
最新评论
-
纵观全局：
配置之后，连接显示不是私密连接
keytool生成证书与Tomcat SSL配置 -
zhuchao_ko：
可以 伪造
java获得ip地址 -
longhua2003：
代码太乱了
java下载文件 -
tomhat：
ccx410 写道 安装gwt报错，unable to ret ...
GWT CellTable -
ccx410：
安装gwt报错，unable to retrieve osgi ...
GWT CellTable
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html</title>
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
padding-top:100px;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}
</style>
<script type="text/javascript">
jquery(document).ready(function(){
$('[data-tooltip]').addClass('tooltip');
$('.tooltip').each(function() {
$(this).append('' + $(this).attr('data-tooltip') + '');
});
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('.tooltip-content').css('visibility','visible');
}).mouseout(function(){
$(this).children('.tooltip-content').css('visibility','hidden');
})
}
});
</script>
</head>
<body>
<!-- <div class="tooltip">这是我的文字<span>这是我的说明描述文字。</span></div> -->
<div class="tooltip" data-tooltip="Action Role-Playing">
这是我的文字
<span class="tooltip-content">这是我的说明描述文字。</span>
</div>
<script language="javascript">
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display="";
if (url!=null){
my_tips.innerHTML="<img src='"+url+"'align=left>"+tips;
}
else{
my_tips.innerHTML=tips;
}
my_tips.style.left=event.clientX+10+document.body.scrollLeft;
my_tips.style.top=event.clientY+10+document.body.scrollTop;
}
else
{
my_tips.style.display="none";
}
}
</script>
<div id="mytips" name="mytips" style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);"></div>
<td><font color="#FF0000" tips="截止日期：2007-08-21" onmousemove="show(this.tips,1);" onmouseout="show(this.tips,0)">已售出</font></td>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html</title>
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
padding-top:100px;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}
</style>
<script type="text/javascript">
jquery(document).ready(function(){
$('[data-tooltip]').addClass('tooltip');
$('.tooltip').each(function() {
$(this).append('' + $(this).attr('data-tooltip') + '');
});
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('.tooltip-content').css('visibility','visible');
}).mouseout(function(){
$(this).children('.tooltip-content').css('visibility','hidden');
})
}
});
</script>
</head>
<body>
<!-- <div class="tooltip">这是我的文字<span>这是我的说明描述文字。</span></div> -->
<div class="tooltip" data-tooltip="Action Role-Playing">
这是我的文字
<span class="tooltip-content">这是我的说明描述文字。</span>
</div>
<script language="javascript">
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display="";
if (url!=null){
my_tips.innerHTML="<img src='"+url+"'align=left>"+tips;
}
else{
my_tips.innerHTML=tips;
}
my_tips.style.left=event.clientX+10+document.body.scrollLeft;
my_tips.style.top=event.clientY+10+document.body.scrollTop;
}
else
{
my_tips.style.display="none";
}
}
</script>
<div id="mytips" name="mytips" style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);"></div>
<td><font color="#FF0000" tips="截止日期：2007-08-21" onmousemove="show(this.tips,1);" onmouseout="show(this.tips,0)">已售出</font></td>
</body>
</html>
分享到：
发表评论
-
jquery-chosen.js示例使用方法
2021-02-21 17:18 1143## jquery-chosen.js示例使用方法 1. [ ... -
jquery-validate示例使用方法
2021-02-21 14:19 357## 示例使用方法 <form class=&qu ... -
JavaScript SizeToHuman 大小转换为mb kb tb等
2017-08-21 15:16 1523// byte数据单位转换（以B为基底） functio ... -
javascript 监听键盘事件
2017-04-14 10:38 2804var ie; var firefox; ... -
js去除字符串中的html标签，替换"为'
2016-11-10 14:10 1535今天做文本域编辑和提交，文本域的内容最好带格式，于是找了一些插 ... -
JavaScript从数组中删除指定值元素的方法
2016-10-11 13:13 750下面的代码使用了两种方式删除数组的元素，第一种定义一个单独的函 ... -
安装nodejs oraclejet
2016-05-05 16:45 832ubuntu下安装nodejs Debian and Ubu ... -
CSS几种特效整理
2016-04-19 09:55 536css用伪类before和after制作三角形箭头网上有一堆教 ... -
javascript 生成随机码或随机数
2016-01-15 14:01 2054/** * [getRandomNum 生成随机数] ... -
js 一些知识,js获取contxtPath
2015-11-12 13:49 1206var num = 1; var str = '1'; ... -
IE指定文档模式
2015-10-15 15:21 1010对于 Web 开发人员来说，文本兼容性是一个要考虑的重要问题。 ... -
JS判断鼠标向上滚动还是向下滚动
2015-09-25 17:52 2641js如何判断滚轮的上下滚动，我们应该都见到过这种效果，用鼠标滚 ... -
js验证组织机构代码
2015-09-18 18:06 43911.全国组织机构代码由八位数字（或大写拉丁字母）本体代码和一位 ... -
JSP和JSTL获取服务器参数
2015-09-11 13:57 1197<%@ page language="java ... -
JS,Jquery获取各种屏幕的宽度和高度,clientX,offsetX,在父窗口中获取iframe中的元素
2015-04-22 16:49 3439JS,Jquery获取各种屏幕的宽度和高度 Javascri ... -
javascript 保留2位小数
2014-09-15 13:15 1776<script type="text/ ... -
如何在一个页面上让多个jQuery版本共存
2014-09-10 10:22 916如何在一个页面上让多个jQuery共存呢？比如jquery-1 ... -
Spring MVC @RequestBody接收JSON报HTTP 415/400问题的解决
2014-08-27 13:06 3804Ajax请求传@RequestBody（接收JSON）参数时， ... -
JavaScript中实现replaceAll方法
2014-08-21 18:04 1092使用JavaScript replace方法，如果不使用正则表 ... -
javascript Date Format
2014-07-07 23:14 916// 对Date的扩展，将 Date 转化为指定格式的Stri ...
相关推荐
web前端的大作业，目前整个项目都只基于纯纯三件套的技术做的是个人网站，主要功能包括简陋的图库功能+写个人笔记功能+...最后，还有一个小tips：不要对我的前端代码有太高的期待，他可能只是一团能运行的“答辩”。
1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5....
"纯CSS实现tips帮助提示框代码"是一个专为网页开发者设计的资源，它允许你创建交互式的提示框，无需依赖JavaScript，只用CSS就能实现。这在优化页面加载速度和降低复杂性方面具有显著优势。 首先，我们要理解CSS...
《JavaScript Anthology: 101 Essential Tips, Tricks & Hacks》是一本专注于JavaScript编程实践的书籍，旨在帮助开发者提升JavaScript技能，掌握一系列实用的技巧、窍门和黑客技术。这本书的内容涵盖了AJAX、CSS、...
用了技术框架： HTML+CSS+JavaScript+jsp+mysql tips: 需要链接数据库的jsp程序，用到的数据库保存在源码码头的数据库平台上，为了防止童鞋们不注意删除数据，会每2小时还原一次，有较低的概率在你们演示的时候，刚...
本文将围绕"JavaScript Tips 之二"这一主题，深入探讨如何在ASP.NET环境中有效地利用JavaScript进行客户端处理。 首先，我们来看`Default.aspx`文件，它是ASP.NET Web应用程序中的默认页面，通常包含HTML、CSS和...
展示了如何使用JavaScript制作简单的动态效果，如弹出窗口、滑动面板等。 14. **Time and Motion（时间和运动）** 探讨了如何利用JavaScript实现更加复杂的动画效果，包括定时器、平滑滚动等。 15. **DHTML ...
### CSS Anthology: 101 Essential Tips, Tricks & Hacks (2009) — 知识点解析 #### 一、概述 《CSS Anthology: 101 Essential Tips, Tricks & Hacks》是一本由SitePoint Pty Ltd于2009年出版的专业CSS书籍，作者...
CSS Protips 帮助你提高CSS技能专业的技巧集合
Web标准主要包括HTML、CSS和JavaScript三个方面的规范，它们共同定义了网页的内容结构、表现样式和交互行为。通过遵循Web标准，开发者可以创建更加兼容、可维护且易于访问的网页。 #### 三、CSS标准概述 CSS...
`js-css-tooltip`是一个利用JavaScript和CSS3技术打造的高效、美观的Tooltip插件。这款插件不仅提供了丰富的自定义选项，还引入了CSS3动画效果，使得提示信息的展示更具吸引力和用户体验。 **一、核心功能** 1. **...
以最少的努力获得 CSS 工具提示！ ＃＃例子 <a></a> 工具提示不应该很复杂，它们不应该做超过绝对必要的事情。 如果您的工具提示需要做的不仅仅是提供一小段信息，那么请考虑您的设计或考虑使用诸如 popover 组件...
9. **兼容性**：虽然大多数现代浏览器支持CSS3特性，但考虑到向后兼容，可能需要使用前缀（如`-webkit-`、`-moz-`等）或JavaScript库（如jQuery）来实现跨浏览器的支持。 从压缩包中的“css3-text-bubble-tips.rar...
CSS3 unveils new possibilities for frontend web developers: things that would require JavaScript, such as animation and form validation, or even third party plugins, such as 3D transformations, are ...
这种效果广泛应用于网页设计中，旨在增强用户体验，提供额外的信息或指导，而无需额外的JavaScript代码，从而提高页面加载速度和兼容性。 ### 核心知识点： #### 1. CSS选择器与伪类 在给定的代码示例中，`a#tip`...
在JavaScript中，我们可以轻松实现这种自动动态的tips提示信息框效果，以提高用户体验。下面将详细介绍如何利用JavaScript来创建这样的小气泡框。 首先，我们需要理解基本的HTML结构，通常一个提示信息框包括一个...
要使用jQuery_Tips插件，首先需要在页面中引入jQuery库和该插件的JavaScript文件。在本例中，文件名为`jQuery-toolTip20160904`，这可能包含插件的主脚本和其他资源，如CSS样式文件。将这些文件添加到HTML的`<head>`...