mouse.js

尚学堂JavaScript视频教程源码,可以配合视频使用,其中一些有用的例子也可以在自己的网站中嵌入使用

window.$load(yeeohMouse)
function yeeohMouse(){
	createObj("div","Atitle")
	var Atags = document.getElementsByTagName("a")
	for(var i=0; i<Atags.length; i++){
		if(Atags[i].title && Atags[i].title != ""){
//建立一个新链接属性，将title的信息保存进去，防止没有必要的提示信息
			Atags[i].setAttribute("info","")
			Atags[i].info = Atags[i].title.replace(/\r\n/ig,"<br />")
			Atags[i].title = ""
			Atags[i].onmouseover = function(e){
				$("Atitle").innerHTML = this.info
				displayObj(e)
			}
			Atags[i].onmouseout = function(){
				//this.call(hiddenObj)
				hiddenObj()
			}
		}	
	}
}
//动态加入一个对象
function createObj(objName,idName){
	var newObj = document.createElement(objName)
	newObj.setAttribute("id",idName)
	newObj.style.cssText = "background-color: #ffffe1;position: absolute;padding: 5px;border: 1px solid #000;display: none;"
	document.getElementsByTagName("body")[0].appendChild(newObj)
}
function hiddenObj(){
	if($("Atitle").style.display != "none")
	$("Atitle").style.display = "none"
}
function displayObj(e){
	if(!e)e = window.event;
//需要先显示对象，否则位置不能调整
	$("Atitle").style.display = "block"
//当在边界显示时，调整对象位置到可见
	if(document.body.clientWidth < (e.clientX+$("Atitle").offsetWidth)){
		$("Atitle").style.left = document.body.clientWidth - $("Atitle").offsetWidth - 10 +"px"
	}else{
		$("Atitle").style.left = e.clientX+"px"
	}
//下边界的判断暂时没时间想，哪位想到的通知我，重谢！
	$("Atitle").style.top = e.clientY+document.documentElement.scrollTop+15+"px"
}