js 增强型title信息提示效果

效果图:

演示代码:

.xstooltip
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
font: normal 8pt sans-serif;
padding: 3px;
border: solid 1px;
}

显示注释

jb51www.jb51.net

Time spent: 00:00:08

Page viewed: 4

Browser: Mozilla – 1.7.11

Operating system: Linux - i686 (x86_64)

function xstooltip_findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function xstooltip_findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function xstooltip_show(tooltipId, parentId, posX, posY)
{
it = document.getElementById(tooltipId);
if ((it.style.top == '' || it.style.top == 0)
&& (it.style.left == '' || it.style.left == 0))
{
// need to fixate default size (MSIE problem)
it.style.width = it.offsetWidth + 'px';
it.style.height = it.offsetHeight + 'px';
img = document.getElementById(parentId);
// if tooltip is too wide, shift left to be within parent
if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
if (posX

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2010-06-01

基于JavaScript实现 网页切出 网站title变化代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>这里是网站标题</title> </head> <body> <script type="text/javascript"> document.body.onfocus = function

JS实现闪动的title消息提醒效果

有时候我们需要提醒用户,有新的消息,这个可以使用下面的方法实现. 效果就是网页窗口在没有获取焦点并且最小化的时候,网页窗口的标题栏"title"显示的内容为"[ ]","[新消息]"的闪烁效果. <script language="JavaScript"> setTimeout('flash_title()',2000); //2秒之后调用一次 function flash_title() { //当窗口效果为最小

Jquery修改页面标题title其它JS失效的解决方法

Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";

利用JS实现浏览器的title闪烁

主要是通过setTimeout方法设置一个定时器,切换消息提示,从而达title到消息提示的闪烁. 复制代码 代码如下: <html>  <head>      <title>JS效果-浏览器标题栏闪烁</title>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />      <script type

JavaScript获取当前网页标题(title)的方法

本文实例讲述了JavaScript获取当前网页标题(title)的方法.分享给大家供大家参考.具体如下: JS中的document.title可以获取当前网页的标题 <!DOCTYPE html> <html> <head> <title>jb51.net</title> </head> <body> current document's title is: <script> document.write(do

一个JS函数搞定网页标题(title)闪动效果

复制代码 代码如下: <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title></head><body><script language="JavaScript"> step=0 function fla

ToolTip 通过Js实现代替超链接中的title效果

自定义Tooltip特效 body ul { list-style: none; } body li { margin: 60px; } div { border: 1px solid #CCC; padding: 10px; background: #dff5ff; margin-left: 30px; } function initEvent() { var links = document.getElementsByTagName("a"); for (var i = 0; i

使用JavaScript让网页的title动起来

HTML Title: 复制代码 代码如下: <title>你好,Mr-S.R Lee</title> JavaScript: 复制代码 代码如下: <script type="text/javascript"> function scroll() { //获取title信息. var titleInfo = document.title; //获取title第一个汉字(数字.字母). //注释:字符串中第一个字符的下标是 0.如果参数 index

JavaScript Title、alt提示(Tips)实现源码解读

而对于图片标签img也有一个alt属性可以起到类似的作用.但很显然这种提示框太单调了,为此有人用JavaScript实现了漂亮的提示框效果,这种效果常用在WEB游戏中,其中下图的网易邮箱与迅雷影视页面就用到这种效果,虽然彼此实现效果有些差异,但整体实现思路是不变的.为了方便大家了解实现的细节,以方便定制自己想要的效果,我上网找了一段不错的源码,并对其进行了详细的注释,希望对大家有帮助. 含注释代码: 复制代码 代码如下: /************************************

js每次Title显示不同的名言

每次都有不同的名言出来. 实现方法: 1.上传title.js到网站目录 2.在页面相应位置添加以下代码: <script type="text/javascript" src="file/title.js" charset="UTF-8"></script> 3.title.js代码如下: _VC_DocumentTitles = new Array('世间的活动,缺点虽多,但仍是美好的', '真正没有资格谈明天的人,是

js鼠标移动在title中显示图片的效果代码

1.js代码 复制代码 代码如下: //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示. tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFa

js下用层来实现select的title提示属性

复制代码 代码如下: <script>              function opts(selectObj){                          var optDivs=document.createElement("div");                          var objTable=document.createElement("table");                          var ob

JS实现的5级联动Select下拉选择框实例

本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

js下拉选择框与输入框联动实现添加选中值到输入框的方法

本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来. 运行截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-value-to-input-codes/ 具体代码如下: <html> <

JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下

Node.js下向MySQL数据库插入批量数据的方法

项目(nodejs)中需要一次性插入多笔数据到数据库,数据库是mysql的,由于循环插入的性能太差,就像使用批量插入的方法提高数据的插入性能. 批量插入的数据库的表结构如下: 1.数据库连接 var mysql = require('mysql'); // 数据库信息 var connection = mysql.createConnection({ host : 'localhost', user : '数据库用户名', password : '数据库登录密码', database : '操作

js实现遮罩层弹出框的方法

本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

纯js模拟div层弹性运动的方法

本文实例讲述了纯js模拟div层弹性运动的方法.分享给大家供大家参考.具体如下: 特性: 1. 支持各项常数自定义 2. 理论支持所有元素,只需修改style.width,你懂得 3. 已知支持浏览器:chrome/firefox/IE7.8.9 <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script type="te

Node.js下自定义错误类型详解

前言 一般来说,很少人会考虑如何处理应用产生的错误的策略,调试的过程中,简单地利用console.log('error')定位错误,基本够用了,通过留下这些调试信息,能够为我们以后的调试过程中升了不少时间,提高了维护性.所以错误提示非常重要.同时,也会带来一些比较糟糕用法.最近的项目里就用到了自定义错误类型,觉得有必要深入了解一下,所以就写了这篇文章,方便自己和有需要的大家在需要的时候查阅. Subclassing Error 首先我们可以定义一个 Error 的子类.通过 Object.cre

JS实现网页背景颜色与select框中颜色同时变化的方法

本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/

js下拉框里超过变成省略号

我们 www.jb51.net js下拉框省略号 下拉框里的字太多了,下拉框会变长,然后把版面挤乱了,多余的如何显示成省略号? 或者限制住下拉框的跨度也行? style="width:100px;" 这种已经试过了,没用!/option> function cutOption(selectObj , length) { this.selectObj = selectObj; this.length = length; } cutOption.prototype.init = fu