您的位置：首页 > 编程语言

利用jQuary实现文字浮动提示效果示例代码

2013-12-27 16:00 701 查看

发布：whsnow 字体：[增加减小] 类型：转载

文字浮动提示效果想必大家都有见到过吧，其实实现起来很贱的，下面为大家详细介绍下使用jquery是如何做到的，感兴趣的朋友可以参考下

代码如下:

<html>

<head>

<meta charset="utf-8"/>

<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>

<script>

/*文字提示*/

/*

（1）鼠标移入的时候，创建一个div它的内容是title属性的值

（2）规定位置，设置css样式

（3）鼠标移出的时候，移除div

（4）鼠标移动的时候，X Y轴的坐标要相应的变化

*/

$(function(){

var x = 7;

var y = 8;

$("a.tip").hover(function(){

var title = this.title;

var $div = $("<div id='newTip'>"+title+"</div>");

$("body").append($div);

$div.css({"position":"absolute","background":"pink"});

},function(){

$("#newTip").remove();

}).mousemove(function(e){

var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});

});

})

</script>

</head>

unity3d教程http://www.unitymanual.com/

<body>

<a href="#" class="tip" title="这是我的提示">这是我的提示</a>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航