打印

大家帮我看看这个title提示效果

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

1^# 大中小发表于 2008-6-29 20:52

我想该成提示内容跟随鼠标移动而移动的，再就是提示框背景透明而文字不会透明的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sweet Titles | Fading Tooltips by DustinDiaz.com</title>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
	<meta name="developer" content="Dustin Diaz" />
	<style type="text/css" media="screen,projection">
	
	</style>
    <script language="javascript">
	/*
Sweet Titles (c) Creative Commons 2005
http://creativecommons.org/licenses/by-sa/2.5/
Author: Dustin Diaz | http://www.dustindiaz.com
*/
Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};
function addEvent( obj, type, fn ) {
	if (obj.addEventListener) {
		obj.addEventListener( type, fn, false );
		EventCache.add(obj, type, fn);
	}
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
		EventCache.add(obj, type, fn);
	}
	else {
		obj["on"+type] = obj["e"+type+fn];
	}
}
	
var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
		add : function(node, sEventName, fHandler){
			listEvents.push(arguments);
		},
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				item[0][item[1]] = null;
			};
		}
	};
}();
addEvent(window,'unload',EventCache.flush);
var sweetTitles = { 
	xCord : 0,								// @Number: x pixel value of current cursor position
	yCord : 0,								// @Number: y pixel value of current cursor position
	tipElements : ['a','abbr','acronym'],	// @Array: Allowable elements that can have the toolTip
	obj : Object,							// @Element: That of which you're hovering over
	tip : Object,							// @Element: The actual toolTip itself
	active : 0,								// @Number: 0: Not Active || 1: Active
	init : function() {
		if ( !document.getElementById ||
			!document.createElement ||
			!document.getElementsByTagName ) {
			return;
		}
		var i,j;
		this.tip = document.createElement('div');
		this.tip.id = 'toolTip';
		document.getElementsByTagName('body')[0].appendChild(this.tip);
		this.tip.style.top = '0';
		this.tip.style.visibility = 'hidden';
		var tipLen = this.tipElements.length;
		for ( i=0; i<tipLen; i++ ) {
			var current = document.getElementsByTagName(this.tipElements[i]);
			var curLen = current.length;
			for ( j=0; j<curLen; j++ ) {
				addEvent(current[j],'mouseover',this.tipOver);
				addEvent(current[j],'mouseout',this.tipOut);
				current[j].setAttribute('tip',current[j].title);
				current[j].removeAttribute('title');
			}
		}
	},
	updateXY : function(e) {
		if ( document.captureEvents ) {
			sweetTitles.xCord = e.pageX;
			sweetTitles.yCord = e.pageY;
		} else if ( window.event.clientX ) {
			sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
			sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
		}
	},
	tipOut: function() {
		if ( window.tID ) {
			clearTimeout(tID);
		}
		if ( window.opacityID ) {
			clearTimeout(opacityID);
		}
		sweetTitles.tip.style.visibility = 'hidden';
	},
	checkNode : function() {
		var trueObj = this.obj;
		if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
			return trueObj;
		} else {
			return trueObj.parentNode;
		}
	},
	tipOver : function(e) {
		sweetTitles.obj = this;
		tID = window.setTimeout("sweetTitles.tipShow()",50);
		sweetTitles.updateXY(e);
	},
	tipShow : function() {		
		var scrX = Number(this.xCord);
		var scrY = Number(this.yCord);
		var tp = parseInt(scrY+15);
		var lt = parseInt(scrX+10);
		var anch = this.checkNode();
		var addy = '';
		var access = '';
		if ( anch.nodeName.toLowerCase() == 'a' ) {
			addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
			var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
		} else {
			addy = anch.firstChild.nodeValue;
		}
		this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
		if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) {
			this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px';
		} else {
			this.tip.style.left = lt+'px';
		}
		if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) {
			this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px';
		} else {
			this.tip.style.top = tp+'px';
		}
		this.tip.style.visibility = 'visible';
		this.tip.style.opacity = '0.5';
		this.tipFade(10);
	},
	tipFade: function(opac) {
		var passed = parseInt(opac);
		var newOpac = parseInt(passed+10);
		if ( newOpac < 50 ) {
			this.tip.style.opacity = '.'+newOpac;
			this.tip.style.filter = "alpha(opacity:"+newOpac+")";
			opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);
		}
		else { 
			this.tip.style.opacity = '0.5';
			this.tip.style.filter = "alpha(opacity:50)";
		}
	}
};
function pageLoader() {
	sweetTitles.init();
}
addEvent(window,'load',pageLoader);
</script>
</head>
<body>
	
<div id="wrapper">
	<p id='tagLine'><a href="http://hi.baidu.com/comasp" alt="sdfsfsdfsdfd" >
	<img src="next.png" /></a></p>
	<h1>好看的标题（鼠标移上去，提示）</h1>
	<h2>By Dustin Diaz</h2>
	<ul>
		<li><a accesskey="y" href="http://www.yahoo.com" title="The Great Y! Corp strikes again">Go to Yahoo</a></li>
		<li><a accesskey="s" href="http://www.sitepoint.com" title="Good development site. Great for learning">Go to Sitepoint</a></li>
		<li><a accesskey="2" href="http://www.dustindiaz.com/sweet-titles/" title="A place to download the latest copy just incase something went wrong.">"Sweet Titles" supporting article</a></li>
		<li>An acronym: <acronym title="Document Object Model">D.O.M.</acronym></li>
		<li>An abbreviation: <acronym title="Extensible Hypertext Markup Language">XHTML.</acronym></li>
	</ul>
	<p>今天无意中跑到外国的网站狂了一圈，发现了几个例子（脚本），然后弄了下。 自己整理了下，发布出来看看吧。希望大家喜欢。
	<br>本人的博客地址：   <a href="http://www.cssrain.cn" title="My blog :" >http://www.cssrain.cn</a>
    <br>本人的QQ：<acronym title="My qq:">601606637</acronym> &nbsp;&nbsp;<a href="http://hi.baidu.com/comasp" title="切记加我QQ，必须注名条件..."><img src="spinner.gif" alt="" /></a>
    <br>本人的Email：<acronym title="My email:">dandonglin@yahoo.com.cn</acronym><br>
    <br>爱好学习吗？喜欢java吗？喜欢ajax吗？喜欢就跟我交朋友吧。&nbsp;&nbsp;<a href="http://hi.baidu.com/comasp" title="条件:必须爱好学习，能上进..."><img src="spinner.gif" alt="" /></a>
	<br>
	<br>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 tenado 于 2008-6-30 12:09 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

2^# 大中小发表于 2008-6-29 21:01

最好再加上一个样式开关
比如<div id="a"></div><div id="b"></div>
让此JS作用于A，而不影响B

TOP

美橙vps独立IP月付189元

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

3^# 大中小发表于 2008-6-29 21:27

又想到一点，就是下面自动出现网址那段能不能也可以自由控制其出现与不出现

TOP

中央美院远程平面设计进修班

mmfy

迷失

银牌会员

帖子: 1245
体力: 2481
威望: 0

4^# 大中小发表于 2008-6-29 21:41

呵呵这个不需要高手你看下这个页面就知道怎么实现了
http://www.ohyoung.cn/jdz/

lost

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

5^# 大中小发表于 2008-6-29 22:10

引用:

原帖由 mmfy 于 2008-6-29 21:41 发表
呵呵这个不需要高手你看下这个页面就知道怎么实现了
http://www.ohyoung.cn/jdz/

他这个提示出来的效果还没我原先那个好，只是我不懂js不会修改而已。
我说的这两个功能应该比较容易实现。

TOP

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

6^# 大中小发表于 2008-6-30 15:38

谁帮忙修改下

TOP

kyukoi

初级会员

帖子: 45
体力: 59
威望: 0
离线: 32 天

专长 JS,JAVA,Oracle

7^# 大中小发表于 2008-6-30 17:01

本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；绝对白丁，只吃现成。请大家注意分辨“李逵”和“李鬼”，不要好心帮滥人。

从http://www.cssrain.cn 上搞得例子吧
http://www.ohyoung.cn/jdz/直接用的title

background-color: transparent;似乎有点作用

TOP

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

8^# 大中小发表于 2008-7-1 10:21

引用:

原帖由 kyukoi 于 2008-6-30 17:01 发表
本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；绝对白丁，只吃现成。请大家注意分辨“李逵”和“李鬼”，不要好心帮滥人。

从http://www.cssrain.cn 上搞得例子吧
http:/ ...

确实是从http://www.cssrain.cn 上搞的例子，只想把这个改得更好用，更适合自己用。
本人做美工的，基本不懂程序，人无完人，更没有全能的人，所以只能求助于论坛。
如果自己能解决所有问题那还要论坛干什么。
现在刚学DIV+CSS，DIV+CSS基本上能自己解决，但是JS完全不懂。所以在这求助，并非自己有脑不肯思考。

TOP

tenado [楼主]

中级会员

帖子: 136
体力: 248
威望: 0
离线: 18 天

9^# 大中小发表于 2008-7-2 15:50

哪里有最最最基础的JS教程？

TOP