鼠标移动到文字上出现浮层提示特效(兼容IE,火狐等所有浏览器)

栏目: 编程语言 发布于: 2014-05-09 18:30:23

发一个同时兼容IE6,IE7,IE8,IE9,火狐,苹果等所有浏览器的鼠标移动到文字上出现浮层提示特效,效果非常棒,可以根据具体的情况稍作修改:

<html>
<head>
<title>鼠标移动到文字上出现提示特效</title>
</head>
<body>
<script>
function $(id){
	return document.getElementById(id);
}
document.write("<div id=\"ts\" style=\"position:absolute;background-color:#FFFFE6;font-size: 12px;padding: 3px;	border: 1px solid #FFCC99;display:none\"></div>");
function mmove(o,s){
	var evt=event||window.event;
    var x=evt.clientX+5;
    var y=evt.clientY+20;
    $('ts').style.left=x+'px';
    $('ts').style.top=y+'px';
    if(s==''||typeof(s)=='undefined'){
        $('ts').innerHTML=o.innerHTML;
    }else{
        $('ts').innerHTML=s;
    }
    $('ts').style.display='';
}
function mout(){
	$('ts').style.display='none';
}
</script>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">aaaaaaaaa<br><font color=red>aaaaaaa></font></a>
</p>
<p>
<a href="#" onMouseMove="mmove(this,'哈哈s')" onMouseOut="mout();">bbbbbbbbbbb</a>
</p>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">cccccccccccc</a>
</p>
<p>
<img src="http://bbs.blueidea.com/images/default/logo.gif"  onmousemove="mmove(this,' 蓝色理想<br><font color=red>实现梦想</font>')" onMouseOut="mout();">
</p>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">eeeeeeeeeeeee</a>
</p>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">想做个特效就是移到文字上面或是图片上面出现提示,title能够定义属性吗?如换行,文字色彩等<br />
<br />
在坛内看到一个移<span><font color=blue>到小图片上出现大图片的效果,效果不错</font></span>,感觉挺复杂,不知道有没有更简单一点的。
</a>
</p>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">ggggggggggggggggggggggggggg</a>
</p>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">hhhhhhhhhhhhhhhhhhhhhhhhh</a>
</p>
<p>
<a href="#" onMouseMove="mmove(this)" onMouseOut="mout();">想做个特效就是移到文字上面或是图片上面出现提示,title能够定义属性吗?如换行,文字色彩等<br />
<br />
在坛内看到一个移<span><font color="#CC0000">到小图片上出现大图片的效果,效果不错</font></span>,感觉挺复杂,不知道有没有更简单一点的。
</a>
</p>
</body>
</html>

您可能感兴趣的文章

  • 显示行号的文本框效果,兼容ie、火狐等浏览器
  • JS判断滚动条是否停止滚动,兼容IE和火狐浏览器
  • javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
  • 如何设置DIV层显示在flash对象之上,兼容ie和firefox等浏览器
  • 如何解决DIV层被Flash遮盖问题(兼容IE和火狐浏览器),如何使DIV层在FLASH上面显示
  • JS获取按键的代码,Js如何屏蔽用户的按键,Js获取用户按键对应的ASII码(兼容所有浏览器)
  • 网页背景音乐的设置方法,兼容所有浏览器
  • jquery弹出窗口插件(兼容所有浏览器)分享
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.php230.com]
本文标题:鼠标移动到文字上出现浮层提示特效(兼容IE,火狐等所有浏览器)
IT技术书籍推荐:
JavaScript高级程序设计(第3版)
JavaScript高级程序设计(第3版)
泽卡斯 (Zakas. Nicholas C.) (作者), 李松峰 (译者), 曹力 (译者)
《JavaScript高级程序设计(第3版)》是JavaScript超级畅销书的最新版。ECMAScript 5和HTML5在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript增添了很多适应未来发展的新特性。《JavaScript高级程序设计(第3版)》这一版除增加5章全新内容外,其他章节也有较大幅度的增补和修订,新内容篇幅约占三分之一。全书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起,深入浅出地探讨了面向对象编程、Ajax与Comet服务器端通信,HTML5表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。《JavaScript高级程序设计(第3版)》附录展望了未来的API和ECMAScript Harmony规范。
最新互联网资讯