手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >利用jQuary实现文字浮动提示效果示例代码
利用jQuary实现文字浮动提示效果示例代码
摘要:复制代码代码如下:/*文字提示*//*(1)鼠标移入的时候,创建一个div它的内容是title属性的值(2)规定位置,设置css样式(3)鼠...

复制代码 代码如下:

<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>

<body>

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

</body>

</html>

【利用jQuary实现文字浮动提示效果示例代码】相关文章:

javascript实现日期按月份加减

用JavaScript实现页面重定向功能的教程

jQuery实现返回顶部效果的方法

jquery实现弹出层效果实例

JS+CSS实现的拖动分页效果实例

jQuery实现文本展开收缩特效

Jquery注册事件实现方法

jQuery实现不断闪烁文字的方法

jQuery实现转动随机数抽奖效果的方法

利用js实现禁止复制文本信息

精品推荐
分类导航