欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery 操作DOM案例代码分享_jquery

程序员文章站 2022-05-17 18:12:22
...
实例如下:
复制代码 代码如下:


";
$("body").append(tooltip);
$("#tooltip").css({
"top" : (e.pageY+y) + "px",
"left" : (e.pageX+x) + "px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
});
});
*/
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "
" + this.myTitle : "";
var tooltip = "
jquery 操作DOM案例代码分享_jquery"+imgTitle+""; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})




有效果:



  • jquery 操作DOM案例代码分享_jquery

  • jquery 操作DOM案例代码分享_jquery

  • jquery 操作DOM案例代码分享_jquery

  • jquery 操作DOM案例代码分享_jquery












无效果:



  • jquery 操作DOM案例代码分享_jquery

  • jquery 操作DOM案例代码分享_jquery

  • jquery 操作DOM案例代码分享_jquery

  • jquery 操作DOM案例代码分享_jquery




结果:

jquery 操作DOM案例代码分享_jquery

相关标签: DOM 案例