JS实现鼠标移动到缩略图显示大图的图片放大效果

2024-04-11 05:59:17

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。

图片提示效果

body{margin:0 ;padding:40px;line-height:180%;}
img{border:none;}
ul,li{margin:0 ;padding:0;}
li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;}
/*tooltip*/
#tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;}

$(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 元素
document.write(tooltip);
$("body").append(tooltip); //把它追加到文档中
$("#tooltip").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).fadeIn(600); //设置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"
});
});
})