鼠标滑过显示图片大图效果

来源：互联网发布：下载股票买卖软件编辑：程序博客网时间：2024/04/28 20:14

描述：

当用户将鼠标放到图片上时，显示图片的大图。

效果图：

说明：

用到了mouseover、mouseout、mousemove三个事件，分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。

对于mouserover事件，做以下几件事：

获取原标题，并将标题置为空，防止title和提示框同时出现。

创建提示框对象，并将图片地址和title放入其中显示。

设置该提示框的位置并显示。

对于mouseout做以下几件事情：

将title还原，预备下次使用。

移除提示框

对于mousemove，我们需要动态的调整提示框的位置。

因为还没看到动画那一块，所以动画处理的不是太好，以后在优化吧。

完整代码：

<!doctype html><html><head><meta charset="utf-8"><title>jquery test</title><script src="jquery-1.11.1.min.js"></script><style type="text/css">.tooltip{display:inline-block;margin-left:50px;}.tp{color:red;}</style></head><body><div style="margin-left:120px; float:left"><div class="tooltip"><img src="./image/1.jpg" width="200px" title="二尾又旅——人柱力二位由木人"></div><div class="tooltip"> <img src="./image/2.jpg" width="200px" title="九尾九喇嘛——人柱力漩涡鸣人"></div><div class="tooltip"><img src="./image/3.jpg" width="200px" title="八尾牛鬼——人柱力奇拉比"></div><div class="tooltip"><img src="./image/4.jpg" width="200px" title="六尾犀犬——人柱力羽高"></div></div></body><script type="text/javascript">$(".tooltip img").mouseover(function(e){this.Mytitle = this.title;this.title = ""; var $tooltip = "<div id='tooltip'><img src='"+this.src+"' width='70%'><br/><p class='tp'>"+this.Mytitle+"</p></div>";$("body").append($tooltip);//添加到页面中$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px","position":"absolute"}).show("fast");//设置x坐标和y坐标，并显示}).mouseout(function(){this.title = this.Mytitle;$("#tooltip").remove();//将该div移除}).mousemove(function(){$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px",});});</script></html>

0 0