手机
当前位置:查字典教程网 >编程开发 >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实现强制cookie过期方法汇总

jquery实现的判断倒计时是否结束代码

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

jQuery实现表格行上下移动和置顶效果

js实现简单锁屏功能实例

JavaScript实现DIV层拖动及动态增加新层的方法

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

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

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

jQuery实现文本展开收缩特效

精品推荐
分类导航