手机
当前位置:查字典教程网 >编程开发 >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实现文字浮动提示效果示例代码】相关文章:

jQuery实现div随意拖动的实例代码(通用代码)

jQuery实现鼠标经过图片变亮其他变暗效果

jQuery实现的多屏图像图层切换效果实例

jQuery实现文本展开收缩特效

jQuery实现dialog设置focus焦点的方法

JQuery实现带排序功能的权限选择实例

JavaScript实现鼠标拖动效果的方法

jquery实现弹出层效果实例

JS函数实现鼠标指向图片后显示大图代码

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

精品推荐
分类导航