Maison > interface Web > js tutoriel > jquery 操作DOM案例代码分享_jquery

jquery 操作DOM案例代码分享_jquery

WBOY
Libérer: 2016-05-16 17:54:24
original
1269 Les gens l'ont consulté

实例如下:

复制代码 代码如下:


";
$("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 = "
产品预览图"+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"
});
});
})




有效果:



  • 苹果 iPod

  • 苹果 iPod nano

  • 苹果 iPhone

  • 苹果 Mac












无效果:



  • 苹果 iPod

  • 苹果 iPod nano

  • 苹果 iPhone

  • 苹果 Mac




结果:

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal