大家好，又见面了，我是全栈君。
描写叙述：
当用户将鼠标放到 图片上时。显示图片的大图。
效果图：
说明：
用到了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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/116142.html原文链接：https://javaforall.net
